Cómo Crear un Shortcode en WordPress con PHP: Simples, con Parámetros (shortcode_atts) y para WooCommerce

Un shortcode en WordPress (como [mi_shortcode]) te permite ejecutar código PHP dinámico, consultas a la base de datos o lógica de WooCommerce e insertarlo en cualquier lugar de una entrada, página de Elementor, plantilla de Gutenberg o widget sin escribir código dentro del editor visual.

En esta guía práctica aprenderás cómo funciona la función nativa add_shortcode(), la regla de oro de usar return (y ob_start()) en lugar de echo, cómo recibir parámetros dinámicos con shortcode_atts() y varios ejemplos listos para usar en producción.

1. Cómo crear un Shortcode básico en WordPress (`add_shortcode`)

La regla más importante al programar un shortcode en WordPress es que la función callback siempre debe devolver (return) el HTML como cadena de texto y nunca imprimirlo directamente con echo (si usas echo, el contenido aparecerá desordenado arriba del todo de la página antes del resto del texto):

function dc_mostrar_anio_actual_shortcode() {
    return '<span class="anio-actual">' . esc_html( date_i18n( 'Y' ) ) . '</span>';
}
add_shortcode( 'anio_actual', 'dc_mostrar_anio_actual_shortcode' );

Ahora puedes escribir Copyright © [anio_actual] en cualquier pie de página de Elementor o WordPress y se actualizará automáticamente cada año.

2. Cómo crear un Shortcode con parámetros dinámicos (shortcode_atts)

Si quieres que tu shortcode acepte atributos personalizados (por ejemplo, [boton_whatsapp telefono="573001234567" texto="Hablar con soporte"]), utiliza la función shortcode_atts() para definir valores por defecto seguros:

function dc_boton_whatsapp_shortcode( $atts ) {
    $atributos = shortcode_atts(
        array(
            'telefono' => '573000000000',
            'texto'    => 'Consultar por WhatsApp',
            'mensaje'  => 'Hola, necesito información sobre un desarrollo en WordPress.',
        ),
        $atts,
        'boton_whatsapp'
    );

    $url = 'https://wa.me/' . preg_replace( '/[^0-9]/', '', $atributos['telefono'] ) . '?text=' . rawurlencode( $atributos['mensaje'] );

    return sprintf(
        '<a href="%s" class="btn-wa-shortcode" target="_blank" rel="noopener noreferrer">%s</a>',
        esc_url( $url ),
        esc_html( $atributos['texto'] )
    );
}
add_shortcode( 'boton_whatsapp', 'dc_boton_whatsapp_shortcode' );

3. Cómo usar Output Buffering (ob_start) para bloques grandes de HTML

Cuando tu shortcode necesita renderizar una plantilla HTML extensa o un bucle WP_Query, concatenar cadenas con puntos (.=) resulta incómodo. La práctica recomendada es capturar el buffer de salida con ob_start() y devolverlo con ob_get_clean():

function dc_estado_suscripcion_usuario_shortcode() {
    if ( ! is_user_logged_in() ) {
        return '<p>Inicia sesión para consultar el estado de tu membresía.</p>';
    }

    ob_start();
    $user_id = get_current_user_id();
    ?>
    <div class="dc-panel-suscriptor">
        <h3>Hola, <?php echo esc_html( wp_get_current_user()->display_name ); ?></h3>
        <?php if ( function_exists( 'wcs_user_has_subscription' ) && wcs_user_has_subscription( $user_id, '', 'active' ) ) : ?>
            <p class="estado-activo">✅ Tu suscripción está activa.</p>
        <?php else : ?>
            <p class="estado-inactivo">⚠️ No tienes una suscripción activa actualmente.</p>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'estado_suscripcion', 'dc_estado_suscripcion_usuario_shortcode' );

4. Ejemplos avanzados de Shortcodes en nuestro blog de código

En DevCristian hemos publicado varios shortcodes listos para copiar y pegar que resuelven necesidades específicas de diseño y navegación en WordPress:

• Cómo mostrar cualquier menú de WordPress mediante un shortcode personalizado.
• Cómo cambiar dinámicamente el menú según si el usuario ha iniciado sesión o no con shortcode.
• Cómo agregar un selector de idioma con banderas en WordPress usando un shortcode.
• Cómo mostrar en WooCommerce si el usuario tiene una suscripción activa.