WordPress Shortcode Plugin — 6 Reusable Content Blocks for Posts and Pages

What Are WordPress Shortcodes?

A shortcode is a small tag in square brackets — like [yfin_alert] — that WordPress replaces with HTML when a post is rendered. The editor types the tag, and your plugin function returns the HTML that appears on the front end.

They are one of the most powerful WordPress plugin features because non-technical editors can use them without knowing any HTML.

The Golden Rule — Return, Never Echo

// ❌ WRONG — echo outputs immediately, breaks page layout
function my_shortcode( $atts ) {
    echo '<div>My content</div>';
}

// ✅ CORRECT — always return the HTML string
function my_shortcode( $atts ) {
    return '<div>My content</div>';
}

WordPress collects the returned string and places it in the correct position in the page content.

The shortcode_atts() Pattern

Every shortcode uses shortcode_atts() to merge user attributes with defaults:

function yfin_button_shortcode( $atts ) {
    $atts = shortcode_atts([
        'url'   => '#',
        'label' => 'Click Here',
        'color' => 'gold',
        'size'  => 'medium',
    ], $atts, 'yfin_button');

    $url   = esc_url( $atts['url'] );
    $label = esc_html( $atts['label'] );

    return '<a href="' . $url . '" class="yfin-btn yfin-btn-' . $atts['color'] . '">'
         . $label . '</a>';
}

add_shortcode( 'yfin_button', 'yfin_button_shortcode' );

Usage in a post: [yfin_button url="/buy" label="Buy Now" color="gold" size="large"]

Enclosing Shortcodes — Wrapping Content

Some shortcodes wrap content between opening and closing tags:

// [yfin_highlight color="#FFF8E7"]important text[/yfin_highlight]

function yfin_highlight_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts([
        'color' => '#FFF8E7',
    ], $atts, 'yfin_highlight');

    if ( empty($content) ) return '';

    return '<mark style="background:' . esc_attr($atts['color']) . ';">'
         . do_shortcode($content) // allows nested shortcodes
         . '</mark>';
}

Live Countdown Timer

The countdown shortcode uses ob_start() for clean HTML output and enqueues JavaScript:

function yfin_countdown_shortcode( $atts ) {
    $atts = shortcode_atts([
        'date'  => '',
        'label' => 'Countdown',
    ], $atts, 'yfin_countdown');

    $timestamp = strtotime( $atts['date'] );
    $target_ms = $timestamp * 1000; // JS needs milliseconds
    $unique_id = 'yfin-cd-' . uniqid(); // unique per instance

    wp_enqueue_script('yfin-countdown', YFIN_SC_URL . 'js/countdown.js', [], '1.0', true);

    ob_start();
    ?>
    <div class="yfin-countdown" id="<?php echo esc_attr($unique_id); ?>"
         data-target="<?php echo esc_attr($target_ms); ?>">
        <div class="cd-label"><?php echo esc_html($atts['label']); ?></div>
        <!-- Timer display here -->
    </div>
    <?php
    return ob_get_clean();
}

The 6 Shortcodes — Quick Reference

| Shortcode | Example | |---|---| | [yfin_alert] | [yfin_alert type="success" message="Done!"] | | [yfin_button] | [yfin_button url="/page" label="Go" color="gold"] | | [yfin_highlight] | [yfin_highlight]text[/yfin_highlight] | | [yfin_columns] | [yfin_columns left="..." right="..." split="60-40"] | | [yfin_countdown] | [yfin_countdown date="2027-01-01" label="Until Launch"] | | [yfin_profile] | [yfin_profile name="Ana" role="Dev" bio="..."] |

This is a preview. The full ebook includes complete PHP, CSS, and JavaScript for all 6 shortcodes, including the countdown timer JS that supports multiple instances on one page, the profile card with avatar/initials fallback, and a full shortcode cheat sheet.