Creating a Custom WordPress Shortcode with Content Support

In this guide, we will walk you through the process of creating a custom WordPress shortcode that allows you to add dynamic content to your posts and pages. You will learn how to define shortcode attributes and utilize the $content parameter to display additional content within your shortcode.

Table of Contents

1. Introduction to Shortcodes
2. Defining the Shortcode Function
3. Using the Shortcode in Your Site
4. Customizing the Shortcode
5. Conclusion

1. Introduction to Shortcodes

Shortcodes are a powerful feature in WordPress that allow you to insert dynamic content into posts, pages, and widgets using simple, readable tags. They are particularly useful for developers who want to create reusable components without writing repetitive HTML.

2. Defining the Shortcode Function

To create a custom shortcode, you need to define a function that will generate the output you want. Below is an example function that creates a shortcode named [my_hero]. This shortcode will include an optional title and display content provided between the shortcode tags.

Step-by-Step Implementation:

1. Add the Code to Your Theme or Plugin: Open your theme’s functions.php file or a custom plugin file and add the following code:

// Function to create the custom shortcode
function my_custom_hero_shortcode($args, $content = null) {
    // Define shortcode attributes and set defaults
    $args = shortcode_atts(
        array(
            'container_class' => 'my-hero-container',
            'title'           => 'Default Title',
        ),
        $args,
        'my_hero' // Shortcode name
    );

    // Start output buffering
    ob_start();
    ?>
    <div class="<?php echo esc_attr($args['container_class']); ?>">
        <h2><?php echo esc_html($args['title']); ?></h2>
        <div class="content">
            <?php
            // Check if there is any content between the shortcode tags
            if (!empty($content)) {
                echo wp_kses_post($content); // Display the content safely
            } else {
                echo '<p>No content provided!</p>'; // Default message if no content
            }
            ?>
        </div>
    </div>
    <?php
    return ob_get_clean(); // Return the buffered content
}

// Register the shortcode
add_shortcode('my_hero', 'my_custom_hero_shortcode');

3. Using the Shortcode in Your Site

Once you have defined the shortcode function, you can use it in your WordPress content.

• Basic Usage: To use the shortcode, simply add it to any post or page:

[my_hero title="Welcome to My Site"]This is a special announcement![/my_hero]

4. Customizing the Shortcode

You can customize the shortcode in various ways:

• Change the Title: Modify the title attribute to personalize the header.
• Empty Content: If you do not include any content, a default message will appear:

[my_hero title="Exciting Updates!"]Stay tuned for more information.[/my_hero]

[my_hero title="Welcome to My Site"]

Output:

<div class="my-hero-container">
    <h2>Welcome to My Site</h2>
    <div class="content">
        No content provided!
    </div>
</div>

5. Conclusion

Creating a custom shortcode in WordPress is a straightforward process that enhances your site’s functionality and allows for dynamic content insertion. By following this guide, you can implement a reusable shortcode that can display custom titles and content, making it easy to maintain consistency throughout your website. Customize it further as needed to fit your specific use case!