Implementing Custom Shortcodes in WordPress

Creating Custom Shortcodes in WordPress

Basic Implementation

Here's how to create a simple button shortcode that can be used anywhere with [custom_button]:

Add this code to your theme's functions.php file or in a custom plugin:

function custom_button_shortcode($atts, $content = null) {
    // Default attributes
    $attributes = shortcode_atts(array(
        'text' => 'Click Here',
        'url' => '#',
        'color' => '#0066cc',
        'class' => 'custom-btn'
    ), $atts);
    
    return sprintf(
        '<a href="%s" class="%s" style="background-color: %s">%s</a>',
        esc_url($attributes['url']),
        esc_attr($attributes['class']),
        esc_attr($attributes['color']),
        esc_html($attributes['text'])
    );
}
add_shortcode('custom_button', 'custom_button_shortcode');

Usage Examples:

[custom_button text="Learn More" url="https://example.com" color="#ff0000"]
[custom_button text="Contact Us" url="/contact" class="contact-btn"]

Advanced Shortcode with Content

This shortcode allows for wrapped content and custom styling:

function custom_content_box_shortcode($atts, $content = null) {
    $attributes = shortcode_atts(array(
        'type' => 'info',
        'icon' => 'ℹ️'
    ), $atts);
    
    $output = sprintf(
        '<div class="content-box %s">
            <span class="icon">%s</span>
            <div class="content">%s</div>
        </div>',
        esc_attr($attributes['type']),
        esc_html($attributes['icon']),
        do_shortcode($content)
    );
    
    return $output;
}
add_shortcode('contentbox', 'custom_content_box_shortcode');

Adding Required CSS

Add this CSS to your theme's stylesheet or through WordPress customizer:

function add_shortcode_styles() {
    $styles = '
        .custom-btn {
            display: inline-block;
            padding: 10px 20px;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .content-box {
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .content-box .icon {
            margin-right: 10px;
        }
    ';
    
    wp_add_inline_style('your-theme-style', $styles);
}
add_action('wp_enqueue_scripts', 'add_shortcode_styles');

Plugin Alternative

If you prefer using a plugin, here are reliable options:

1. Shortcodes Ultimate - Offers 50+ ready-to-use shortcodes
2. Shortcode Widget - Enables shortcodes in widgets

Best Practices

1. Always sanitize and escape output
2. Use meaningful shortcode names
3. Include default values for attributes
4. Document usage examples
5. Test shortcodes in different contexts (posts, pages, widgets)

Important Notes

• Place code in functions.php or a custom plugin
• Shortcode names should be lowercase and use underscores
• Use do_shortcode() for nested shortcodes
• Register shortcodes on init hook if timing is important

This solution provides a foundation for creating custom shortcodes. Adjust the styling and functionality to match your specific needs.