Para ellos nos vamos a valer del plugin «Advanced Custom Fields«, con el que no solo podremos guardar el contenido básico (título, contenido…), si no que podremos añadir otros campos personalizados que también serán guardados por el formulario.

Artículo disponible en vídeo

Con Advanced Custom Fields instalado vamos a crear un template o página que será la que muestre el formulario.

Para ello recomiendo hacerlo sobre un child-theme, para no perder ningún cambio en caso de que el theme principal se actualice.

Una vez creado el child-theme creamos un nuevo archivo page-nuevo-post.php con el siguiente código:

<?php
    acf_form_head();
    get_header();
?>

<main id="site-content" role="main">
<div id="content">

    <?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
        ));
    ?>

</div>
</main>

<?php get_footer(); ?>

La primera functión acf_form_head(), llama a los scripts necesarios de Advanced Custom Fields que deben cargarse en la cabecera de la página. Esta función no admite ningún parámetro, solo es necesario declararla.

La siguiente función acf_form(), si admite varios parámetros. Ahora mismo ha sido declarada de la forma más básica, con los parámetros mínimos, donde en post_id indicamos que será un new_post y vamos a guardar tanto el post_title como el post_content.

Al entrar en la página Nuevo Post veremos algo así: (dependiendo de vuestro theme):

Donde lo único que podemos hacer es indicar un título y redactar el contenido del post.

Al pulsar «Actualizar», el post será guardado de forma predeterminada como borrador.

Configurar el tipo de post y su estado

Con el siguiente parámetro podemos indicar el tipo de post que estamos guardando y su estado:

'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),

La función completa quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
        ));
?>

Donde en post_type podemos indicar el tipo de post o CPT (custom post type): post, page, product, project… Y en post status, el estado en que se guardará:

• publish: Publicado.
• pending: Pendiente de revisión.
• draft: Borrador.

Personalizar el texto del botón de guardado

Con otro parámetro podemos personalizar el botón de publicar, ya que «Actualizar» no es lo más apropiado si lo que estamos es guardando un nuevo post:

'submit_value' => 'Publicar'

Mensaje de confirmación de guardado

Por defecto, al guardar el post se recargará la página con el formulario vacío, algo que puede despistar a nuestros usuarios pensando que hayan podido hacer algo mal. Podemos insertar un mensaje de confirmación con el parámetro:

'updated_message' => __("¡Tu post se ha publicado!", 'acf')

De este modo, tras guardar una publicación y recargar la página aparecerá el mensaje:

Redirigir a una página tras guardar el post

Si lo preferimos, podemos redirigirle una página de agradecimiento, similar a la página de «gracias» de un formulario de contacto.

'return' => home_url('gracias-por-tu-articulo')

Donde home_url() es una función que devuelve nuestro dominio actual. Solo tenemos que especificar en su interior el slug de la página destino.

Insertar custom fields en el formulario

Si queremos añadir información adicional a las publicaciones a través de campos personalizados (custom fields), estos también pueden ser llamados en el formulario.

Para ello, en primer lugar crearemos un nuevo grupo de campos con Advanced Custom Fields al que llamaremos «Info Post«.

Dentro crearemos 3 campos:

• Campo de texto: Información extra.
• Campo numérico: Año.
• Campo de imagen: Imagen destacada.

En las reglas de ubicación vamos a indicar que estos campos aparezcan solamente en los posts de tipo entrada. Aunque esto solo afectará al «backend» de WordPress, veremos un poco más adelante cómo mostrarlos en el formulario de ACF.

Para el campo de imagen vamos a especificar que nos devuelva solamente el ID de la imagen:

Para que los campos personalizados se muestren en el formulario (frontend), solo tenemos que añadir el siguiente parámetro:

'field_groups' => ['clave_grupo']

Donde la clave del grupo podemos encontrarla en nuestra lista de grupos de campos:

De forma que nuestra función general quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
            'submit_value' => 'Publicar',
            'updated_message' => __("¡Tu post se ha publicado!", 'acf'),
            'field_groups' => ['group_60ffb5cfa3984']
        ));
?>

Ahora al acceder a la página «Nuevo Post», veremos nuestros nuevos campos:

Usar un campo personalizado para establecer la imagen destacada del post

acf_form() no dispone de parámetros para establecer la imagen destacada del post, algo que no se comprende muy bien, pues bastaría con asociar cualquier ID de imagen de nuestra biblioteca de medios con el _thumbnail_id del post.

Para ello tenemos que valernos de un pequeño truco, el cual consistirá en usar un campo personalizado para establecer la imagen destacada del post. Para ello ello hemos creado el campo personalizado «Imagen destacada».

Pues bien, solo tenemos que pegar este snippet en el archivo de funciones (functions.php) de nuestro child-theme:

function acf_set_featured_image( $value, $post_id, $field  ){
    
    if($value != ''){
	    //Add the value which is the image ID to the _thumbnail_id meta data for the current post
	    add_post_meta($post_id, '_thumbnail_id', $value);
    }
 
    return $value;
}

// acf/update_value/name={$field_name} - filter for a specific field based on it's name
add_filter('acf/update_value/name=campo_de_imagen', 'acf_set_featured_image', 10, 3);

Este snippet lo he extraído del foro de Advanced Custom Fields gracias al usuario Jonathan.

Básicamente lo que hace es tomar nuestro campo personalizado de imagen, el cual tenemos que especificar su value en el hook, y establecerlo como imagen destacada del post.

add_filter('acf/update_value/name=imagen_destacada', 'acf_set_featured_image', 10, 3);

Y al guardar o actualizar el post se establecerá como imagen destacada de este.

Y hasta aquí el post de hoy, podéis seguir practicando y aprendiendo nuevos parámetros y ajustes de acf_form() en:

DOCUMENTACIÓN ADVANCED CUSTOM FIELDS: acf_form()

Ahh, y todo esto lo hemos hecho usando la versión FREE de ACV. Nos vemos en el siguiente post

¿Para qué sirve un campo personalizado?

Por defecto, en una entrada o página de WordPress tenemos dos campos principales para agregar información, el campo de título y el editor donde se redacta el contenido principal. Pero adicionalmente podemos agregar otro tipo de campos para mostrar en secciones especificas de nuestra plantilla o simplemente como información que solo veremos desde el modo de edición.

Por ejemplo, podríamos crear un campo para poner el precio de un vehículo y llamar a ese dato en una ubicación especifica de nuestra plantilla. O podríamos crear un campo personalizado no visible al público, pero que guarde información importante sobre el vehículo, como información del anterior propietario, historial de revisiones etc.

Advanced Custom Field

WordPress tiene su propio sistema de creación de campos personalizados, pero es algo confuso y poco intuitivo, por lo que muchos desarrolladores optamos por utilizar el plugin Advanced Custom Field, que permite crear campos personalizados de múltiples tipos y llamarlos con sencillas funciones.

Una vez instalado, Advanced Custom Field organiza los campos en grupos, por si necesitas crear diferentes campos para varios custom posts o páginas concretas, así que lo primero que haremos será crear un Nuevo Grupo de Campos:

Lo primero será darle un título al nuevo Grupo de Campos, por ejemplo «Detalles Vehículos».

Antes de añadir los campos, vamos a ver algunos ajustes importantes del nuevo grupo de campos, para empezar su ubicación.

Ubicación del grupo de campos

Lo que nos interesa es que este grupo de campos aparezca en el modo de edición de Vehículos, siendo irrelevante que aparezca en otros modos de edición como Entradas o Páginas.

Así que definiremos la ubicación en los Post Type que sean igual a Vehículo:

Ajustes del grupo de campos

En el apartado de Ajustes definiremos el estilo del grupo de campos, lo recomendable es utilizar el estilo Estándar (WP metabox) que permite la funcionalidad de arrastarlo y soltarlo en la posición que deseemos. Y hablando de posiciones, la siguiente opción nos permite ubicarlo en la zona de central del modo edición (antes o después del contenido) o en el sidebar (lateral).

Agregando campos

Ahora vamos a agregar los campos que necesitemos:

Vamos a agregar un campo para el precio:

Los parámetros más importantes son la Etiqueta (texto que se mostrará en la página de edición), el Nombre del campo (identificador único sin espacios ni caracateres especiales) y opcionalmente, un campo para las intrucciones. Por ejemplo, para el campo Precio vamos a insertar un campo de tipo numérico, puede que un futuro nos interese ordenar los resultados de una búsqueda de vehículos por su precio y si lo especificamos como una cadena de caracteres (con puntuaciones, símbolos de moneda…), el sistema no sabría ordenarlo correctamente, por lo que solo se introducirán números sin puntuaciones ni signos.

Vamos a añadir un par de campos más, uno para la matrícula (de tipo texto) y otro para observaciones internas (de tipo área de texto):

Una vez definidos todos los campos, publicamos:

Publicar el primer Vehículo

Ya estamos listos para publicar un nuevo vehículo. Como en toda entrada pondremos un título y un texto descriptivo y seleccionaremos su/s taxonomía/s, en este caso «Automóvil»:

En la taxonomía de Extras rellenaremos algunas como: Aire Acondicionado, Dirección Asistida, ABS, etc. Y en nuestros nuevos campos personalizados rellenaremos el precio, la matrícula y las observaciones internas.

Ahora que ya tenemos nuestro nuevo contenido publicado es el momento de crear un Template para mostrarlo en pantalla, pero eso lo veremos en el próximo post