Cómo Crear un Shortcode en WordPress Paso a Paso (Con Ejemplos)

Los shortcodes son una de las funcionalidades más prácticas y versátiles que ofrece WordPress. Con tan solo escribir una etiqueta corta entre corchetes, puedes insertar contenido complejo en cualquier entrada, página o widget sin tocar el código de tu plantilla. Si alguna vez has usado [galeria] o [formulario_contacto], ya sabes de qué hablamos.

La buena noticia es que crear tus propios shortcodes personalizados no requiere ser un experto en PHP. Con conocimientos básicos y los ejemplos correctos, puedes tener tu primer shortcode funcionando en menos de diez minutos. En este tutorial completo de WordPress vas a aprender a hacerlo paso a paso, con código listo para copiar, adaptar y usar en tu web sin complicaciones.

Tanto si quieres mostrar un botón personalizado, insertar un bloque de texto dinámico o crear una caja de aviso reutilizable, los shortcodes son la solución más limpia y eficiente. Vamos a ello.

¿Qué son los shortcodes en WordPress y cómo pueden facilitarte la vida?

Un shortcode en WordPress es una pequeña etiqueta entre corchetes que ejecuta una función PHP y devuelve contenido HTML en su lugar. Cuando WordPress procesa una página o entrada, detecta esas etiquetas y las sustituye por el resultado de la función asociada.

La API de shortcodes de WordPress lleva disponible desde la versión 2.5 y su uso está completamente integrado en el núcleo del CMS. Puedes usarlos en el editor de bloques, en el editor clásico, en widgets de texto e incluso en algunos campos de plugins.

Para qué sirven en la práctica:

• Insertar bloques de contenido reutilizables sin copiar HTML en cada página.
• Mostrar información dinámica como la fecha actual, el nombre del usuario o datos de la base de datos.
• Crear botones, cajas de alerta o elementos visuales personalizados con un simple código.
• Añadir funcionalidades a tu contenido sin depender de plugins externos.

En resumen, los shortcodes te dan el control de tu contenido sin obligarte a editar plantillas cada vez que necesitas algo específico.

Dónde y cómo agregar el código de tu shortcode de manera segura

Antes de escribir una sola línea de código, tienes que decidir dónde vas a guardarlo. Esta decisión es más importante de lo que parece porque afecta directamente a la estabilidad y portabilidad de tu web.

Opción 1: Añadir shortcodes en el archivo functions.php de un tema hijo

Si ya tienes un tema hijo activo en tu instalación, puedes añadir tus shortcodes directamente en su archivo functions.php. Al estar en el tema hijo, el código no se perderá cuando actualices el tema padre.

Opción 2: Crear un plugin personalizado para tus shortcodes (la opción más recomendada)

La opción más profesional y portable es crear un pequeño plugin específico para tus shortcodes. Esto garantiza que funcionen independientemente del tema que uses y que puedas migrarlos fácilmente a otra instalación. Para más información sobre cómo crear un plugin, visita la documentación oficial de WordPress.

Para crear un plugin mínimo, crea una carpeta llamada mis-shortcodes dentro de /wp-content/plugins/ y dentro un archivo PHP con el mismo nombre:

<?php
/**
 * Plugin Name: Mis Shortcodes Personalizados
 * Description: Shortcodes propios del sitio
 * Version: 1.0
 */

// Aquí irá el código de tus shortcodes

Después actívalo desde el panel de administración en Plugins > Plugins instalados y ya tendrás tu contenedor seguro para todo el código que crees.

Aprende a crear tu primer shortcode básico en 3 sencillos pasos

Vamos a crear el shortcode más sencillo posible: uno que devuelva un texto fijo. Esto te permitirá entender la estructura antes de complicar las cosas.

Paso 1: Define la función que generará el contenido del shortcode

Toda la lógica de tu shortcode vive dentro de una función PHP estándar. Esta función debe devolver el contenido con return, nunca con echo. Usar echo es uno de los errores más frecuentes y hace que el contenido aparezca en el lugar equivocado de la página.

function mi_primer_shortcode() {
    return '<p>¡Hola! Este texto viene de un shortcode.</p>';
}

Paso 2: Registra tu shortcode usando add_shortcode()

Una vez tienes la función, debes registrarla con la función nativa add_shortcode(). Esta función acepta dos argumentos: el nombre del shortcode (lo que escribirás entre corchetes) y el nombre de tu función.

add_shortcode( 'saludo', 'mi_primer_shortcode' );

Paso 3: Usa el shortcode en tu contenido

Con el código guardado y el plugin o tema hijo activo, ya puedes usar tu shortcode en cualquier entrada o página escribiendo:

[saludo]

Cuando WordPress renderice esa página, sustituirá [saludo] por el párrafo HTML que definiste en tu función.

Cómo crear shortcodes con parámetros personalizables para mayor flexibilidad

Los shortcodes estáticos tienen utilidad limitada. Lo realmente potente es poder pasarles parámetros para que se comporten de forma diferente según el contexto. Por ejemplo, que el mismo shortcode muestre un botón con distintos textos y colores.

WordPress gestiona los parámetros a través del array $atts que recibe la función. Usa shortcode_atts() para definir valores por defecto y combinarlos con los que pase el usuario:

function shortcode_boton( $atts ) {
    $atts = shortcode_atts(
        array(
            'texto' => 'Haz clic aquí',
            'url'   => '#',
            'color' => 'azul',
        ),
        $atts,
        'boton'
    );

    $clase = esc_attr( $atts['color'] );
    $url   = esc_url( $atts['url'] );
    $texto = esc_html( $atts['texto'] );

    return '<a href="' . $url . '" class="btn btn-' . $clase . '">' . $texto . '</a>';
}
add_shortcode( 'boton', 'shortcode_boton' );

Ahora puedes usar este shortcode así:

[boton texto="Ver oferta" url="https://tusitio.com/oferta" color="verde"]

Fíjate en el uso de esc_url(), esc_attr() y esc_html(). Estas funciones de escape son imprescindibles para evitar vulnerabilidades de seguridad en tu web. Nunca imprimas datos de usuario sin sanitizarlos.

Ejemplos prácticos de shortcodes que transformarán tu web

Aquí tienes algunos shortcodes funcionales que puedes empezar a usar de inmediato con pequeñas adaptaciones:

Incluir el año actual automáticamente en tus textos

Perfecto para el pie de página o textos con copyright que necesitan actualizarse cada año sin intervención manual:

function shortcode_anio_actual() {
    return date( 'Y' );
}
add_shortcode( 'anio', 'shortcode_anio_actual' );

Uso: [anio] mostrará el año actual automáticamente.

Crea una caja de aviso personalizada para destacar información importante

function shortcode_aviso( $atts ) {
    $atts = shortcode_atts(
        array( 'tipo' => 'info' ),
        $atts,
        'aviso'
    );
    $tipo = esc_attr( $atts['tipo'] );
    return '<div class="aviso aviso-' . $tipo . '">Recuerda revisar esta información antes de continuar.</div>';
}
add_shortcode( 'aviso', 'shortcode_aviso' );

Cómo crear shortcodes que muestren contenido dinámico en tiempo real

Los shortcodes pueden conectarse a la base de datos de WordPress para mostrar información actualizada en tiempo real. Por ejemplo, mostrar el número de entradas publicadas en una categoría concreta o el nombre del usuario actual.

Este ejemplo muestra el nombre del usuario que ha iniciado sesión:

function shortcode_usuario_actual() {
    if ( is_user_logged_in() ) {
        $usuario = wp_get_current_user();
        return esc_html( $usuario->display_name );
    }
    return 'visitante';
}
add_shortcode( 'usuario', 'shortcode_usuario_actual' );

Con [usuario] puedes personalizar mensajes en tus páginas según quién las visita. Este tipo de shortcodes dinámicos añaden un nivel de personalización muy valioso sin necesidad de plugins complejos.

Si vas a hacer consultas a la base de datos dentro de un shortcode, usa siempre WP_Query en lugar de consultas SQL directas, y considera cachear el resultado con las funciones de transients de WordPress para no impactar el rendimiento.

Aprende a usar shortcodes con contenido encerrado: botones y cajas personalizadas

Además de los shortcodes simples, WordPress soporta shortcodes de cierre, es decir, aquellos que encierran contenido entre una etiqueta de apertura y una de cierre. Son perfectos para envolver texto en cajas con estilo especial.

function shortcode_caja( $atts, $content = null ) {
    $atts = shortcode_atts(
        array( 'estilo' => 'destacado' ),
        $atts,
        'caja'
    );
    $estilo = esc_attr( $atts['estilo'] );
    return '<div class="caja caja-' . $estilo . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'caja', 'shortcode_caja' );

Su uso en el editor sería:

[caja estilo="alerta"]Este contenido aparecerá dentro de la caja con estilo alerta.[/caja]

Nota importante: usa siempre do_shortcode( $content ) en lugar de imprimir $content directamente. Esto permite que el contenido encerrado también pueda contener otros shortcodes anidados.

Identifica y soluciona errores comunes al crear shortcodes

• Usar echo en lugar de return: el error más frecuente. El contenido aparecerá al principio de la página en lugar de donde está el shortcode. Usa siempre return.
• No sanitizar los parámetros: siempre escapa los datos con esc_html(), esc_url() o esc_attr() según el contexto.
• Nombres de shortcodes en conflicto: usa un prefijo único para tus shortcodes, como las iniciales de tu web, para evitar colisiones con plugins instalados.
• Guardar el código en el functions.php del tema principal: se perderá en la próxima actualización del tema. Usa siempre un tema hijo o un plugin personalizado.
• Hacer consultas pesadas sin caché: si tu shortcode ejecuta una WP_Query en cada carga, puede ralentizar tu sitio. Usa set_transient() para guardar el resultado durante un tiempo determinado.

Mejores prácticas para organizar y optimizar tus shortcodes

A medida que creas más shortcodes, es fácil que el código se convierta en un caos difícil de mantener. Estas prácticas te ayudarán a mantener todo bajo control:

1. Agrupa todos tus shortcodes en un único plugin personalizado, organizado por archivos si tienes muchos. Por ejemplo, un archivo para shortcodes de contenido, otro para shortcodes de usuario, etc.
2. Usa un prefijo consistente en todos los nombres de función y shortcode para evitar conflictos con WordPress o con plugins de terceros.
3. Documenta cada shortcode con un comentario breve explicando qué hace, qué parámetros acepta y un ejemplo de uso. Te lo agradecerás meses después.
4. Agrupa el registro de shortcodes dentro de una función enganchada a init para asegurar que se registran en el momento correcto del ciclo de carga de WordPress.
5. Prueba cada shortcode en distintos contextos: en entradas, páginas, widgets y con distintos temas activos para asegurarte de que funciona en todos los escenarios.

Con estas bases, tienes todo lo necesario para crear shortcodes sólidos, seguros y fáciles de mantener. La clave está en empezar con algo sencillo, entender la estructura y ir añadiendo complejidad solo cuando la necesitas. Los shortcodes bien escritos son una herramienta que seguirás usando a lo largo de toda tu vida con WordPress.

Preguntas frecuentes sobre la creación de shortcodes en WordPress

¿Es necesario saber PHP para crear shortcodes en WordPress?

Sí, aunque no a un nivel avanzado. Los shortcodes simples requieren solo conocimientos básicos de PHP, como definir una función y usar return. Los ejemplos de este tutorial están pensados para que puedas copiarlos y adaptarlos cambiando textos, URLs y parámetros sin necesidad de dominar el lenguaje en profundidad.

¿Dónde es más seguro almacenar el código de mis shortcodes?

Lo más recomendable es crear un plugin personalizado específico para tus shortcodes. También puedes usar el archivo functions.php de un tema hijo, pero nunca el del tema principal porque perderás los cambios al actualizarlo. El plugin personalizado es la opción más profesional porque el código funciona independientemente del tema activo y puedes portarlo fácilmente entre instalaciones.

¿Los shortcodes personalizados pueden impactar el rendimiento de mi web?

Los shortcodes bien programados tienen un impacto mínimo en el rendimiento. Los problemas aparecen cuando se ejecutan consultas pesadas a la base de datos en cada carga sin ningún tipo de caché. Usando las funciones de transients de WordPress y evitando consultas innecesarias, tus shortcodes no ralentizarán tu sitio de forma apreciable.

¿Qué sucede con mis shortcodes si decido cambiar de tema?

Si tus shortcodes están en el functions.php del tema activo, dejarán de funcionar al cambiar de tema y el código del shortcode aparecerá como texto plano en tu contenido. Por eso es fundamental guardarlos en un tema hijo o, mejor aún, en un plugin personalizado independiente del tema. Así se garantiza su funcionamiento sin importar qué tema tengas activo.