¿Cómo añadir campos personalizados a posts y páginas de WordPress con tu propio plugin?

Cuando publicas una entrada en WordPress tienes un título, un contenido, una imagen destacada, categorías y etiquetas. Para un blog sencillo es suficiente, pero cuando tu web crece necesitas guardar información extra en cada publicación: un subtítulo, una marca de "destacado", el salario de un empleo, la fecha límite de una convocatoria… Para eso existen los campos personalizados.

En este artículo te explico qué son, cuáles uso yo en mis webs, por qué prefiero crearlos con un plugin propio en lugar de usar Advanced Custom Fields, y te doy el código completo para crearlos, guardarlos y mostrarlos en tu plantilla. También te cuento un error que me hizo "perder" datos y cómo lo solucioné. Todo esto dentro de WordPress.

¿Qué son los campos personalizados?

Un campo personalizado (en WordPress se llaman metadatos o post meta) es un dato adicional que se guarda junto a una entrada o página. Cada campo tiene dos partes:

• Una clave: el nombre interno del campo, por ejemplo _mcp_subtitulo.
• Un valor: lo que escribes en ese campo para esa entrada, por ejemplo "La convocatoria cierra este viernes".

WordPress guarda todos estos datos en una tabla de la base de datos llamada wp_postmeta. Cada fila dice: "la entrada con este ID tiene, en el campo con esta clave, este valor". Recuerda esto, porque es la clave del error que te contaré más adelante.

El campo aparece en el editor como una caja extra (un meta box), donde quien publica rellena la información. Luego, en la plantilla, decides dónde y cómo se muestra en la web.

Ahora, para tener campos personalizados dentro de tu editor de WordPress hay diferentes formas. Puedes instalar un plugin gratuito desde la tienda de WordPress, ¿verdad? Lo instalas, lo activas y ya tienes algunos campos personalizados. También podrías crear tu propio plugin y personalizarlo según tus requisitos, según lo que quieras y los campos que quieras llenar. Y la otra opción es que el código de los campos personalizados esté dentro de la propia plantilla de WordPress que estés usando.

Por ejemplo, te voy a mostrar cómo tengo yo, dentro de mi plantilla de WordPress, una sección que se encarga de administrar toda la configuración de los campos personalizados. Estos campos se muestran en el editor de WordPress, tanto cuando edito mis entradas como cuando edito mis páginas.

Dentro de estos campos hay muchas opciones, como por ejemplo un subtítulo. También hay casillas de verificación donde puedo indicar si el artículo que estoy por publicar es una entrada destacada, si quiero que se muestre el H1, el header, el autor o el sidebar. Digamos que son opciones que puedes controlar desde cada artículo que estés editando.

Hay otros tipos de campos personalizados. Por ejemplo, muchas veces el título de un artículo es muy largo y, si queremos mostrar ese contenido en otras partes de nuestro sitio web, conviene acortarlo. Entonces, en los campos personalizados puedo colocar títulos diferentes, para que, cuando quiera mostrar el artículo en la página principal o en las secciones de categorías o etiquetas, aparezcan esos títulos cortos y no el título original, que es el que aparece cuando uno entra al post.

Los campos personalizados que uso en mis webs

Estos son algunos de los campos que tengo en mi plantilla y que uso a diario:

Subtítulo o bajada. El texto que va justo debajo del título principal y resume la noticia. Es típico de los medios de comunicación y ayuda a que el lector entienda de qué va el artículo en un segundo.

Artículo destacado. Una casilla que, al marcarla, le dice a la web que esa entrada debe aparecer en la sección de destacados de la portada.

Código en la cabecera o en el pie. Un campo para añadir código solo en ese artículo: un script de seguimiento, un estilo especial o un anuncio específico.

Ocultar la cabecera. Una opción que quita el menú superior y deja una página limpia, ideal para páginas de venta o de aterrizaje.

No hay una lista correcta de campos: todo depende del diseño que quieras para tu web y de cómo quieres que las personas encuentren el contenido.

Advanced Custom Fields o un plugin propio

Advanced Custom Fields (ACF) es el plugin más conocido para crear campos personalizados. Lo he usado y funciona, pero tiene dos inconvenientes para mí:

1. Es pesado. Trae muchísimas funciones, y la mayoría no las vas a usar. Todo eso carga en tu panel y en tu web, y si quieres optimizar tu sitio web debes comenzar por tener un código limpio y de bajo peso.
2. Lo mejor es de pago. Algunas funciones avanzadas, como los campos repetibles, están en la versión Pro. Esto tiene que ver con que tanto puedes pagar una membresía, o un pago por un plugin premium. Ahora la IA puedes desarrollar plugin con todas las funcionalidades, así ya no pagarías por esas herramientas.

Con la inteligencia artificial puedes crear tu propio plugin solo con los campos que necesitas, con el diseño que quieras y sin pagar nada. Además, el código es tuyo: si mañana necesitas un campo nuevo, se lo pides a la IA y listo.

ACF sigue siendo una buena opción si no quieres tocar nada de código o si trabajas en una web de un cliente que ya lo usa. Pero si quieres una web ligera y a tu medida, el plugin propio gana. Ahora vamos a crear un plugin con campos personalizados para tu sitio web en WordPress.

El prompt para la IA

Crea un plugin de WordPress llamado "Mis Campos Personalizados". Añade una caja en el editor de entradas y páginas con dos campos: un subtítulo (área de texto) y una casilla "Marcar como destacado". Guarda los datos con claves que empiecen por mcp, verifica el nonce, los permisos y el autoguardado antes de guardar, y limpia todos los valores. Después explícame cómo mostrar el subtítulo en la plantilla single.php.

El código: crear y guardar los campos

Crea la carpeta mis-campos en wp-content/plugins y un archivo mis-campos.php:

<?php
/**
 * Plugin Name: Mis Campos Personalizados
 * Description: Subtítulo y marca de destacado para entradas y páginas.
 * Version: 1.0
 */
if ( ! defined( 'ABSPATH' ) ) exit;

// 1. Añadir la caja al editor
add_action( 'add_meta_boxes', function () {
  foreach ( array( 'post', 'page' ) as $tipo ) {
    add_meta_box( 'mcp_campos', 'Campos personalizados', 'mcp_caja', $tipo, 'side' );
  }
} );

// 2. Dibujar los campos
function mcp_caja( $post ) {
  wp_nonce_field( 'mcp_guardar', 'mcp_nonce' );
  $subtitulo = get_post_meta( $post->ID, '_mcp_subtitulo', true );
  $destacado = get_post_meta( $post->ID, '_mcp_destacado', true );
  ?>
  <p><label>Subtítulo (bajada)<br>
    <textarea name="mcp_subtitulo" rows="3" style="width:100%"><?php echo esc_textarea( $subtitulo ); ?></textarea>
  </label></p>
  <p><label><input type="checkbox" name="mcp_destacado" value="1" <?php checked( $destacado, '1' ); ?>> Marcar como destacado</label></p>
  <?php
}

// 3. Guardar los datos
add_action( 'save_post', function ( $post_id ) {
  if ( ! isset( $_POST['mcp_nonce'] ) || ! wp_verify_nonce( $_POST['mcp_nonce'], 'mcp_guardar' ) ) return;
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
  if ( ! current_user_can( 'edit_post', $post_id ) ) return;
  update_post_meta( $post_id, '_mcp_subtitulo', sanitize_textarea_field( wp_unslash( $_POST['mcp_subtitulo'] ?? '' ) ) );
  update_post_meta( $post_id, '_mcp_destacado', isset( $_POST['mcp_destacado'] ) ? '1' : '' );
} );

Qué hace cada parte:

1. add_meta_boxes añade una caja llamada "Campos personalizados" en la columna lateral del editor, tanto en entradas como en páginas.
2. mcp_caja dibuja los dos campos y rellena lo que ya estuviera guardado. Así, al editar una entrada antigua, ves sus datos.
3. save_post guarda los datos cuando pulsas "Actualizar", pero antes hace tres comprobaciones: que el envío venga del editor (nonce), que no sea un autoguardado y que el usuario tenga permiso para editar esa entrada. Después limpia el texto y lo guarda.

Las claves empiezan con guion bajo (_mcp_). Eso le dice a WordPress que son campos internos y evita que aparezcan duplicados en la caja genérica de "Campos personalizados" del editor.

Mostrar los campos en la web

Este es el paso que muchos olvidan. Puedes llenar los campos en el editor, pero si no los añades a la plantilla, no se ven en la web.

En la mayoría de temas, las entradas se muestran con el archivo single.php y las páginas con page.php. En mi plantilla, los campos se definen en un archivo llamado metabox.php y se muestran en las plantillas de entrada y de página. Busca en tu plantilla la línea que imprime el título (the_title()) y añade justo debajo:

<?php $subtitulo = get_post_meta( get_the_ID(), '_mcp_subtitulo', true ); ?>
<?php if ( $subtitulo ) : ?>
  <p class="bajada"><?php echo esc_html( $subtitulo ); ?></p>
<?php endif; ?>

Y para mostrar los destacados en la portada, consulta las entradas que tengan la marca:

$destacados = new WP_Query( array(
  'posts_per_page' => 4,
  'meta_key'       => '_mcp_destacado',
  'meta_value'     => '1',
) );

Esto lo estamos logrando trabajando con Antigravity de Google. Lo que queremos es poder mostrar los artículos destacados en zonas específicas y también agregar un subtítulo debajo del título de cada artículo.

Lo anterior son solo fragmentos del código, pero si quieres verlo completo, mira: a continuación te muestro el código completo, además de algunas capturas de pantalla con los pasos para instalar el plugin generado. Y es más, este plugin también te lo dejo en el siguiente enlace para que lo puedas descargar.

Código completo del plugin: mis-campos.php, puedes copiar este codigo y guardarlo en un archivo mis-campos.php y luego comprimir este archivo a un .ZIP con el mismo nombre, y tendrás un plugin para instalar en WordPress.

<?php
/**
 * Plugin Name: Mis Campos Personalizados
 * Description: Subtítulo (bajada) y marca de destacado para entradas y páginas.
 * Version: 1.0
 * Requires at least: 5.0
 * Requires PHP: 7.0
 * Text Domain: mis-campos
 */

if ( ! defined( 'ABSPATH' ) ) exit;

// 1. Añadir la caja al editor (entradas y páginas)
add_action( 'add_meta_boxes', function () {
	foreach ( array( 'post', 'page' ) as $tipo ) {
		add_meta_box( 'mcp_campos', 'Campos personalizados', 'mcp_caja', $tipo, 'side' );
	}
} );

// 2. Dibujar los campos
function mcp_caja( $post ) {
	wp_nonce_field( 'mcp_guardar', 'mcp_nonce' );
	$subtitulo = get_post_meta( $post->ID, '_mcp_subtitulo', true );
	$destacado = get_post_meta( $post->ID, '_mcp_destacado', true );
	?>
	<p>
		<label for="mcp_subtitulo"><strong>Subtítulo (bajada)</strong></label><br>
		<textarea id="mcp_subtitulo" name="mcp_subtitulo" rows="3" style="width:100%"><?php echo esc_textarea( $subtitulo ); ?></textarea>
	</p>
	<p>
		<label>
			<input type="checkbox" name="mcp_destacado" value="1" <?php checked( $destacado, '1' ); ?>>
			Marcar como destacado
		</label>
	</p>
	<?php
}

// 3. Guardar los datos
add_action( 'save_post', function ( $post_id ) {
	if ( ! isset( $_POST['mcp_nonce'] ) ) return;
	if ( ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['mcp_nonce'] ) ), 'mcp_guardar' ) ) return;
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( wp_is_post_revision( $post_id ) ) return;
	if ( ! current_user_can( 'edit_post', $post_id ) ) return;

	$subtitulo = isset( $_POST['mcp_subtitulo'] ) ? sanitize_textarea_field( wp_unslash( $_POST['mcp_subtitulo'] ) ) : '';
	update_post_meta( $post_id, '_mcp_subtitulo', $subtitulo );
	update_post_meta( $post_id, '_mcp_destacado', isset( $_POST['mcp_destacado'] ) ? '1' : '' );
} );

/**
 * 4. Funciones de ayuda para usar en la plantilla.
 *
 * Mostrar el subtítulo (en single.php o page.php, debajo de the_title()):
 *     <?php mcp_el_subtitulo(); ?>
 *
 * Consultar entradas destacadas (por ejemplo en la portada):
 *     $destacados = mcp_destacados( 4 );
 */
function mcp_get_subtitulo( $post_id = null ) {
	$post_id = $post_id ? $post_id : get_the_ID();
	return get_post_meta( $post_id, '_mcp_subtitulo', true );
}

function mcp_el_subtitulo( $post_id = null ) {
	$subtitulo = mcp_get_subtitulo( $post_id );
	if ( $subtitulo ) {
		echo '<p class="bajada">' . esc_html( $subtitulo ) . '</p>';
	}
}

function mcp_es_destacado( $post_id = null ) {
	$post_id = $post_id ? $post_id : get_the_ID();
	return '1' === get_post_meta( $post_id, '_mcp_destacado', true );
}

function mcp_destacados( $cantidad = 4 ) {
	return new WP_Query( array(
		'posts_per_page'      => $cantidad,
		'meta_key'            => '_mcp_destacado',
		'meta_value'          => '1',
		'ignore_sticky_posts' => true,
	) );
}

// 5. Shortcode opcional: [mcp_subtitulo] dentro del contenido o en un bloque "Shortcode"
add_shortcode( 'mcp_subtitulo', function () {
	$subtitulo = mcp_get_subtitulo();
	return $subtitulo ? '<p class="bajada">' . esc_html( $subtitulo ) . '</p>' : '';
} );

Comprime y sube el plugin.

Primero instala el plugin en tu web de WordPress. Ve a Plugins → Añadir nuevo → Subir plugin, selecciona el archivo mis-campos.zip (no hace falta descomprimirlo), pulsa Instalar ahora y luego Activar.

Después abre el editor de cualquier entrada o página. En la columna lateral verás una nueva sección llamada “Campos personalizados” con dos opciones:

• Subtítulo (bajada): si tu artículo lleva un subtítulo, escríbelo aquí.
• Marcar como destacado: activa esta casilla si quieres que la entrada aparezca en la sección de destacados de tu portada.

Rellenas los campos, pulsas Actualizar y los datos quedan guardados.

¿Cómo mostrar los campos en tu web?

Llenar los campos no basta: también hay que decirle a WordPress dónde mostrarlos en el frontend. Puedes hacerlo de dos maneras.

1. Con un shortcode (sin tocar la plantilla)

Añade un bloque “Shortcode” dentro de la entrada y escribe:

[ mcp_subtitulo ]

En ese lugar se mostrará el subtítulo que escribiste en el campo.

2. Con código en la plantilla de WordPress

Si prefieres que el subtítulo aparezca siempre de forma automática, añade el código en tu plantilla. Abre single.php (entradas) o page.php (páginas), busca la línea que imprime el título (the_title()) y pega justo debajo:

<?php if ( function_exists( 'mcp_el_subtitulo' ) ) mcp_el_subtitulo(); ?

El día que "perdí" mis datos

Esto me pasó y es algo que no sabía. Recuerda que cada valor se guarda en la base de datos asociado a una clave. En una actualización de mi plugin, cambié la clave de un campo: la función era la misma, pero con otro nombre interno.

Resultado: todos los artículos antiguos aparecieron con ese campo vacío. Los datos no se habían borrado; seguían en la base de datos con la clave vieja. Pero el plugin ahora buscaba la clave nueva y no encontraba nada.

La solución fue simple: volver a poner la clave original. En cuanto lo hice, todos los datos reaparecieron. La lección: una vez que tu web tiene contenido, nunca cambies la clave de un campo. Si necesitas cambiarla sí o sí, pídele a la IA un pequeño script que copie los valores de la clave vieja a la nueva antes de hacer el cambio.

Por eso es muy importante que tengas una copia de seguridad también dentro de tu sitio web, una copia de seguridad para que te sirva de respaldo por si de repente mueves algún código o instalas algún código de forma incorrecta o comienzas a perder tus datos. Muchas plataformas que te ofrecen el servicio de hosting te brindan esta funcionalidad, pero tienes que tenerla para evitar futuros dolores de cabeza.