custom post types y custom fields

Tutorial para crear Custom Post Types y Custom Fields en WordPress

Publicado por |
Valora este tutorial


En este tutorial vamos ver cómo crear custom post types y cómo crear custom fields en WordPress, con los cuales podrás personalizar entradas exclusivas para un fin concreto o tener campos de formulario a medida para recoger información útil en cada publicación.

1

¿QUÉ SON LOS Custom Post Types Y LOS Custom Fields?

Vamos a explicar de manera rápida la diferencia entre estos 2 términos.

Custom Post Types

Como sabrás WordPress tiene las Entradas o Post normales con las que escribimos nuestros artículos. Pero imagina que quisieras tener otro tipo de entradas especificas que solo sirvan para mostrar un tipo de contenido concreto, y separarlas del blog que nos otorga WordPress con las entradas normales. Bien, pues a este tipo de entradas personalizadas y distintas a las normales que trae WordPress, se les conoce como custom post types. Seguro que al instalar algún theme corporativo o plugin, has visto que te crea diversos apartados en el panel de administración, como por ejemplo: portfolios, testimonios, servicios,...Pues esos son claros ejemplos de un Custom Post Type.

Custom Post Types

Custom Fields

Los custom fields o campos personalizados, nos servirán para agregar en cada entrada, página o publicación de WordPress, datos e información adicional que nos pueda ser de utilidad. Esta información WordPress la almacena como metadatos, los cuales después podremos utilizar para diversos cometidos. Es por así decirlo, como si creases en cada entrada o página que vayas a publicar, un formulario previo a tu gusto, con el cual recoges datos y luego los muestras. WordPress por defecto ya trae un apartado para poder añadir estos campos a cada publicación, pero viene oculta. Para mostrarla, simplemente tendremos que activar la casilla de campos personalizados, en las opciones de pantalla cuando estemos añadiendo o editando una publicación:

campos personalizados

Una vez que activemos la casilla, nos aparecerá un apartado nuevo llamado Campos personalizados debajo del editor donde solemos escribir nuestra publicación, en el cual podremos ya proceder a crear estos campos.

2

CÓMO CREAR Custom Post Types

Para crear un Custom Post Type, podemos hacerlo de manera manual mediante código o mediante plugins específicos que veremos más adelante.

La forma manual de crearlos mediante código será la siguiente:

  • 1
    Abrimos el archivo functions.php de nuestro theme de WordPress
  • 2
    Para crear por ejemplo un Custom Post Type llamado tutorial, añadimos al final del archivo functions.php la siguiente función:
<?php
/*
**** POST TYPE TUTORIALES ****
*/
function register_tutorial_posttype() {
	$labels = array(
		'name'               => _x( 'Tutoriales', 'tutorialeswp' ),
		'singular_name'      => _x( 'Tutorial', 'tutorialeswp' ),
		'add_new'            => __( 'Añadir nuevo','tutorialeswp'),
		'add_new_item'       => __( 'Nuevo tutorial','tutorialeswp'),
		'edit_item'          => __( 'Editar tutorial','tutorialeswp' ),
		'new_item'           => __( 'Nuevo tutorial','tutorialeswp' ),
		'all_items'          => __( 'Todos los tutoriales','tutorialeswp' ),
		'view_item'          => __( 'Ver tutorial','tutorialeswp'),
		'search_items'       => __( 'Buscar tutorial','tutorialeswp'),
		'not_found'          => __( 'No encontrado!','tutorialeswp' ),
		'not_found_in_trash' => __( 'No encontrado en la papelera','tutorialeswp' ),
		'parent_item_colon'  => '',
		'menu_name'          => __('TUTORIALES','tutorialeswp'));
	$args = array(
		'labels'             => $labels,
		'public'             => true,
		'show_ui'            => true,
		'publicly_queryable' => true,
		'rewrite'            => array( 'slug' => 'tutorial' ),
		'has_archive'        => true,
		'capability_type'    => 'post',
		'menu_icon'          => 'dashicons-welcome-learn-more',
		'can_export'         => true,
		'menu_position'      => 5,
		'supports'           => array('title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions')
	);
	register_post_type( 'tutorial', $args );	
}
  • 3
    Si quisiéramos añadirle una taxonomía de categorías y una taxonomía de tags, al custom post type tutorial creado anteriormente, lo haríamos con la siguientes funciones que añadiríamos también al archivo functions.php:
<?php
/*
**** TAXONOMY categorias-tutoriales ****
*/
function taxonomia_tutoriales_category() {
	register_taxonomy( 'categorias-tutoriales',
	array (0 => 'tutorial'),
	array(
		'hierarchical'      => true,
		'label'             => __('Categorías de tutoriales','tutorialeswp'),
		'show_ui'           => true,
		'query_var'         => true,
		'show_admin_column' => true,
		'labels'            => array (
			'search_items'               => __('Buscar categorías','tutorialeswp'),
			'popular_items'              => __('Más populares','tutorialeswp'),
			'all_items'                  => __('Todas','tutorialeswp'),
			'parent_item'                => __('Superior','tutorialeswp'),
			'parent_item_colon'          => __('Categoría superior','tutorialeswp'),
			'edit_item'                  => __('Editar categoría','tutorialeswp'),
			'update_item'                => __('Actualizar categoría','tutorialeswp'),
			'add_new_item'               => __('Añadir nueva categoría','tutorialeswp'),
			'new_item_name'              => __('Nueva categoría','tutorialeswp'),
			'separate_items_with_commas' => __('Separar por comas','tutorialeswp'),
			'add_or_remove_items'        => __('Añadir o borrar','tutorialeswp'),
			'choose_from_most_used'      => __('Elegir de las más usadas','tutorialeswp'),
		)
	) );
}
<?php
/*
**** TAXONOMY tags-tutoriales ****
*/
function taxonomia_tutoriales_tag() {
	register_taxonomy( 'tags-tutoriales',
	array (0 => 'tutorial'),
	array( 'hierarchical' => false,
		'label'                 => __('Categorías de tutoriales','tutorialeswp'),
		'show_ui'               => true,
		'query_var'             => true,
		'show_admin_column'     => true,
		'update_count_callback' => '_update_post_term_count',		
		'labels' => array (
			'name'                       => _x( 'Etiquetas', 'tutorialeswp' ),
			'singular_name'              => _x( 'Etiqueta', 'tutorialeswp' ),
			'search_items'               => __( 'Buscar Etiquetas', 'tutorialeswp' ),
			'popular_items'              => __( 'Etiquetas Populares', 'tutorialeswp' ),
			'all_items'                  => __( 'Todas las Etiquetas', 'tutorialeswp' ),
			'parent_item'                => null,
			'parent_item_colon'          => null,
			'edit_item'                  => __( 'Editar Etiqueta', 'tutorialeswp' ),
			'update_item'                => __( 'Actualizar Etiqueta', 'tutorialeswp' ),
			'add_new_item'               => __( 'Añadir Nueva Etiqueta', 'tutorialeswp' ),
			'new_item_name'              => __( 'Nombre de Nueva Etiqueta', 'tutorialeswp' ),
			'separate_items_with_commas' => __( 'Separa las etiquetas con comas', 'tutorialeswp' ),
			'add_or_remove_items'        => __( 'Añadir o remover etiquetas', 'tutorialeswp' ),
			'choose_from_most_used'      => __( 'Elige entre las etiquetas más utilizadas', 'tutorialeswp' ),
			'not_found'                  => __( 'Ninguna etiqueta encontrada.', 'tutorialeswp' ),
			'menu_name'                  => __( 'Etiquetas', 'tutorialeswp' ),
		)
	) );
}
  • 4
    Ahora solo nos faltaría cargar estas funciones anteriores, con los hooks o ganchos de WordPress, en este caso con un action hook, añadiendo los siguientes códigos en el archivo functions.php:
<?php
/*
**** Action hooks para los custom post types ****
*/
add_action( 'init', 'register_tutorial_posttype' );
add_action( 'init', 'taxonomia_tutoriales_category');
add_action( 'init', 'taxonomia_tutoriales_tag');

Una vez que hayamos añadido estos códigos al archivo functions.php, ya tendremos nuestro custom post type añadido al panel de administración de WordPress:

Custom Post Type

3

CÓMO CREAR Custom Fields

Los custom fields o campos personalizados, podemos crearlos de varios métodos que veremos a continuación...

MÉTODO 1: mediante los que trae por defecto WordPress

Como vimos anteriormente en el paso 1, WordPress ya tiene por defecto un apartado para crear campos personalizados a cada entrada o página. Solo teníamos que mostrar esa sección oculta en las opciones de pantalla. Una vez que la mostremos, tendremos algo parecido a esto:

campos personalizados

En el botón Nuevo, podremos crear un nuevo campo, donde le daremos un nombre y un valor a ese campo y finalmente apretaremos el botón de Añadir un campo personalizado.

Por ejemplo, imagina que quieres dos campos para meter dos links de las referencias web que has usado para publicar ese artículo. Les damos un nombre web1 y web2 a cada campo y escribes en valor el link de la web de referencia que usaste para cada uno. Una vez añadidos, nos aparecerán arriba listados:

campos personalizados

Podemos crear los campos que necesitemos para nuestra entrada o página.


MÉTODO 2: mediante código 

Vamos a crear los dos campos del método 1 anterior, web1 y web2 para añadir páginas web de referencia a nuestro artículo, pero ahora mediante código. Para crearlos mediante código, lo haremos a través de la función de WordPress add_meta_box() y un action hook, junto a una función de display para mostrar los campos que necesitemos y que será un parámetro de la función add_meta_box(), y por último una función para guardar los metadatos que contengan esos campos y su action hook correspondiente. Cada código lo añadiríamos al archivo functions.php de nuestro theme:

<?php
/*
**** Register meta box(es) ****
*/
function twp_register_meta_boxes() {
	add_meta_box( 'mi-meta-box-id', __( 'Mis Custom Fields', 'tutorialeswp' ), 'twp_mi_display_callback', 'post' );
}
add_action( 'add_meta_boxes', 'twp_register_meta_boxes' );
<?php
/*
**** Meta box display callback ****
*/
function twp_mi_display_callback( $post ) {
	
	$web1 = get_post_meta( $post->ID, 'web1', true );
	$web2 = get_post_meta( $post->ID, 'web2', true );
	
	// Usaremos este nonce field más adelante cuando guardemos en twp_save_meta_box()
	wp_nonce_field( 'mi_meta_box_nonce', 'meta_box_nonce' );
	
	
	echo '<p><label for="web1_label">Web de referencia 1</label> <input type="text" name="web1" id="web1" value="'. $web1 .'" /></p>';
	echo '<p><label for="web2_label">Web de referencia 2</label> <input type="text" name="web2" id="web2" value="'. $web2 .'" /></p>';
}
<?php
/*
**** Save meta box content ****
*/
function twp_save_meta_box( $post_id ) {
	// Comprobamos si es auto guardado
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	// Comprobamos el valor nonce creado en twp_mi_display_callback()
	if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'mi_meta_box_nonce' ) ) return;
	// Comprobamos si el usuario actual no puede editar el post
	if( !current_user_can( 'edit_post' ) ) return;
	
	
	// Guardamos...
	if( isset( $_POST['web1'] ) )
	update_post_meta( $post_id, 'web1', wp_kses( $_POST['web1'] ) );
	if( isset( $_POST['web2'] ) )
	update_post_meta( $post_id, 'web2', wp_kses( $_POST['web2'] ) );
}
add_action( 'save_post', 'twp_save_meta_box' );

El resultado de todo esto, nos creará la siguiente sección debajo del editor de nuestra entrada o post, para que podamos introducir los links de cada página web de referencia:

custom fields

Como ves, hacerlo mediante código nos da muchas más posibilidades y personalización de secciones o apartados cuando creemos una entrada en WordPress, que si solo usamos el método 1 anterior expuesto con los campos personalizados por defecto que trae WordPress.

En este ejemplo hemos creado únicamente dos campos de tipo texto, pero podríamos crear los campos que quisiéramos de otros tipos comúnmente usados en formularios: desplegables, checkboxes, textareas, botones de selección,...¿El problema de todo esto cuál es?, pues que obviamente se necesitan conocimientos de los lenguajes HTML y PHP, para ir creando todos estos campos mediante código.

De todas formas, si tienes algunos conocimientos en estos lenguajes y no quisieses andar perdiendo tiempo en crear todos estos códigos, siempre podremos usar un framework o código ya creado opensource, donde únicamente tendríamos que incluirlo en nuestro archivo functions.php y modificarlo a nuestro gusto. Uno muy bueno que yo he usado más de una vez, es el que te comento en el método siguiente.

MÉTODO 3: mediante CMB2

Custom Metaboxes and Fields

CMB2, es una herramienta de desarrollo para crear Custom Fields y Metaboxes de una manera más fácil que tener que andar creando códigos de manera manual.

Esta herramienta la podremos conseguir de dos maneras:

Para que veas el potencial de esta herramienta, puedes echarle un vistazo aquí a la lista de Custom Fields que tendriamos a nuestra disposición. O si lo prefieres verlo en un video de youtube:

4

CÓMO MOSTRAR Custom Fields

Anteriormente hemos visto cómo crear Custom Fields en nuestras publicaciones de WordPress. Como dije, estos Custom Fields o Campos Personalizados, lo que hacen es guardarnos unos metadatos para cada campo. Bien, pues ahora es la hora de usar estos metadatos guardados.

Para mostrarlos, podemos hacerlo de dos maneras incluyendo los siguientes códigos dentro del Loop de WordPress:

  • 1
    Con la función the_meta() de WordPress incluyendo el código:

<?php the_meta(); ?>

Esto lo que hará es mostrarnos los metadatos que hayamos metido en los campos personalizados que hayamos creado. En nuestro ejemplo, si te acuerdas eran solo dos campos para meter el enlace de dos webs de referencia, y al mostrarlos, nos lo mostraría más o menos de esta forma cuando veamos el artículo:

mostrar custom fields

Como ves, queda un poco cutre, sin apenas personalización, ni muestra el enlace a las webs de referencia, sino que únicamente nos lo muestra en versión texto. Esto se debe a que la función the_meta() es una función muy básica. Para hacerlo más personalizado, tendríamos que hacerlo con el punto 2 que te expongo a continuación.

  • 2
    Con la función get_post_meta() de WordPress:

<?php echo get_post_meta($post->ID, 'clave_campo', true); ?>

Un posible código para mostrar los dos campos anteriores de webs de referencia que habíamos creado sería el siguiente:

		<h2 style="border-bottom: 1px solid #a2a9b1;">Referencias</h2>
		<p>Referencia 1: <a href="<?php echo get_post_meta($post->ID, 'web1', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'web1', true); ?></a></p>
		<p>Referencia 2: <a href="<?php echo get_post_meta($post->ID, 'web2', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'web2', true); ?></a></p>

Este código nos mostrará los datos de esta otra manera:

mostrar custom fields

Como ves, ahora ya sí se muestra mucho más personalizado, ya que hemos podido incluirle una cabecera y que muestre los enlaces a cada web de referencia, muy del estilo a por ejemplo como lo muestra la WikiPedia.

5

CREARLOS CON PLUGINS

Si no quieres crear los Custom Post Types y los Custom Fields de manera manual con los métodos anteriormente vistos en este tutorial, siempre nos quedará crearlos mediante plugins.

Los plugins nos evitarán bastante trabajo y tiempo, ya que lo harán de manera automática por nosotros, y únicamente tendremos que aprender a usarlos y configurarlos.

A continuación voy a listar los que son en mi opinión, los mejores plugins para crear Custom Post Types y Custom Fields.

Toolset Types

Toolset Types

Toolset Types, es el plugin más potente y más avanzado y completo que he visto para crear Custom Post Types y Custom Fields. Trae de todo, y puedes crear tanto un custom post type como sus Custom Fields correspondientes. Lo puedes descargar de:

https://es.wordpress.org/plugins/types/

Custom Post Type UI

Custom Post Type UI

Custom Post Type UI, es otro maravilloso plugin para crear Custom Post Types. ¡Ojo!, no crea Custom Fields, solo Custom Post Types. Es de los mismos que han desarrollado la herramienta CMB2 que vimos anteriormente en el paso 3. Lo puedes descargar de:

https://es.wordpress.org/plugins/custom-post-type-ui/

Advanced Custom Fields

Advanced Custom Fields

Advanced Custom Fields, es de los mejores plugins para crear Custom Fields y más completo que he visto. Aclaro que este plugin solo nos servirá para los Custom Fields, no para crear Custom Post Types. Puedes echarle un vistazo aquí al tutorial que he publicado para aprender a configurarlo y usarlo. El plugin, lo puedes descargar de:

https://es.wordpress.org/plugins/advanced-custom-fields/

¿TE HA GUSTADO ESTE TUTORIAL?
[ Valoración: 4.5 - Votos: ‎10 ]
  • julian

    Hola Javier, felicitaciones por el post, muy bueno.

    Estoy utilizando Meta Box para mostrar una fecha.

    He generado un código pero no logro mostrarlo en el Frontend de la pagina, no se cual es el el problema.

    Que código debería usar para mostrar lo siguiente?:


    function ideasdi_meta_box( $meta_boxes ) {
    $prefix = 'ideasdi-';

    $meta_boxes[] = array(
    'id' => 'fechas',
    'title' => esc_html__( 'Fechas y plazos para participar.', 'metabox-online-generator' ),
    'post_types' => array('post' ),
    'context' => 'advanced',
    'priority' => 'default',
    'autosave' => 'true',
    'fields' => array(
    array(
    'id' => $prefix . 'limite',
    'type' => 'date',
    'name' => esc_html__( 'Cierre de inscripciones', 'metabox-online-generator' ),
    ),
    ),
    );

    return $meta_boxes;
    }
    add_filter( 'rwmb_meta_boxes', 'ideasdi_meta_box' );

    • https://cregotech.com Javier Crego

      Hola Julian.
      Según veo estás usando el plugin Meta Box el cual tiene su propio framework, osea que para mostrar esos metas en tu FrontEnd, necesitarás aplicar la documentación de ese plugin para mostrarlos. Aquí te van diciendo más o menos cómo tienes que hacerlo:

      https://docs.metabox.io/displaying-fields/

      Un saludo.