How to Add a Shortcode in WordPress

Adding a shortcode in WordPress is a straightforward process. Shortcodes allow you to add custom functionality or display specific content by inserting a simple code snippet in posts, pages, or widgets. Here’s how to create and use a shortcode in WordPress:

Step 1: Create a Shortcode

To create a shortcode, use the add_shortcode() function in your theme’s functions.php file or a custom plugin.

Example: A Simple Shortcode This shortcode will display a custom message.

// Create a shortcode to display a message
function my_custom_shortcode() {
    return '<p>This is my custom shortcode!</p>';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

Usage: Insert [my_shortcode] into any post, page, or widget, and it will display:

This is my custom shortcode!

Step 2: Add Parameters to the Shortcode

You can make the shortcode more dynamic by adding attributes.

Example: Shortcode with Parameters

// Create a shortcode with attributes
function my_dynamic_shortcode($atts) {
    // Set default attributes
    $atts = shortcode_atts(
        array(
            'name' => 'Guest',
        ),
        $atts,
        'dynamic_shortcode'
    );

    return '<p>Hello, ' . esc_html($atts['name']) . '!</p>';
}
add_shortcode('dynamic_shortcode', 'my_dynamic_shortcode');

Usage:

• [dynamic_shortcode name="John"] will display:

Hello, John!

[dynamic_shortcode] will display: Hello, Guest!

Step 3: Add Content Inside the Shortcode

Some shortcodes allow users to wrap content within them.

Example: Shortcode with Enclosed Content

// Create a shortcode that accepts content
function my_content_shortcode($atts, $content = null) {
    return '<div class="custom-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('content_shortcode', 'my_content_shortcode');

Usage: Insert [content_shortcode]Your custom content here[/content_shortcode].

Output:

Step 4: Use the Shortcode in Posts, Pages, or Widgets

1. Insert the shortcode directly in the WordPress editor:

[my_shortcode]

2. Use shortcodes in PHP files:

echo do_shortcode('[my_shortcode]');

Step 5: Use Shortcodes in Widgets

To use shortcodes in text widgets or custom HTML widgets, ensure shortcodes are enabled for widgets:

Enable Shortcodes in Widgets: Add this to your functions.php file:

add_filter('widget_text', 'do_shortcode');

Advanced Shortcode Examples

Example 1: Display Recent Posts

Usage: Insert [recent_posts count="3"] to display 3 recent posts.

Example 2: Display User Info

function user_info_shortcode() {
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        return '<p>Welcome, ' . esc_html($current_user->display_name) . '!</p>';
    } else {
        return '<p>Please <a href="' . wp_login_url() . '">log in</a>.</p>';
    }
}
add_shortcode('user_info', 'user_info_shortcode');

Usage: Insert [user_info] to display user-specific information.

Tips for Writing Shortcodes

1. Escape Output: Always sanitize user input and escape output to avoid security vulnerabilities.
   • Use esc_html() for text output.
   • Use esc_url() for links.
2. Use Default Attributes: Use shortcode_atts() to define default attribute values.
3. Test Thoroughly: Ensure your shortcode works across themes and WordPress versions.

Let me know if you’d like help building a specific shortcode!