Enclosing shortcodes in Wordpress

Introduction

Enclosing shortcodes let you wrap content inside special tags to add extra features or styles easily.

You want to style a block of text differently inside a post.

You need to add a custom box or highlight around some content.

You want to create reusable content blocks that can contain other text or shortcodes.

You want to add interactive elements that wrap around content, like tabs or accordions.

Syntax

Wordpress

[shortcode]Your content here[/shortcode]

The shortcode has an opening tag and a closing tag with the content in between.

WordPress passes the content inside the shortcode to your function to process.

Examples

This shortcode wraps the text to apply a highlight style.

Wordpress

[highlight]This text will be highlighted[/highlight]

This example shows how to add attributes to customize the shortcode output.

Wordpress

[box color="blue"]This is inside a blue box[/box]

Sample Program

This code creates a shortcode named box that wraps content in a colored border box. You can set the color with an attribute. The content inside the shortcode is processed and displayed inside the box.

Wordpress

<?php
// Register enclosing shortcode 'box'
function box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'yellow'
    ), $atts, 'box');

    return '<div style="border: 2px solid ' . esc_attr($atts['color']) . '; padding: 10px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'box_shortcode');

// Usage in post content:
// [box color="red"]This text is inside a red box[/box]
?>

Important Notes

Always use do_shortcode() inside your shortcode function to process nested shortcodes.

Use shortcode_atts() to set default attribute values safely.

Summary

Enclosing shortcodes wrap content between opening and closing tags.

They let you add styles or features around blocks of text or other content.

Attributes customize how the shortcode works and looks.