Display sidebar widgets using a shortcode in WordPress

Posted on by Elio Rivero

Widgets are one of the best WordPress tools: you can add a widgetized plugin and show its content in any sidebar in your site. But what happens if you want to show a widget within your post? In this tutorial we will learn how to create a sidebar to be displayed using a shortcode.

Overview

The following video will give you a quick overview of what we’re going to build, how it works and how to use it:

First of all, we need two things: a sidebar and a shortcode.

<?php
add_action( 'init', 'ilc_register_sidebars' );
add_shortcode( 'shortbar', 'shortbar_sc' );

Open the functions.php file in your WordPress theme and let’s begin defining our sidebar and shortcode.

Registering the sidebar

Our sidebar definition is the usual one, just remember to add a descriptive title and a good description for the end user.

<?php
function ilc_register_sidebars() {
    register_sidebar( [
        'name'          => 'Sidecode',
        'description'   => 'Widgets in this area will be shown using a shortcode.',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
        'before_widget' => '',
        'after_widget'  => ''
    ] );
}

You don’t need to create a different instance of the sidebar.php file since we won’t be using a PHP file. Instead, we will use the dynamic reference.

Creating the shortcode output

This is where the magic happens. Due to the nature of a shortcode, we can’t just use the dynamic_sidebar function because its return is echoed and hence the content will be outputted before the post content. We need to return the shortcode content for it to be displayed in the natural flow of the post content.

<?php
function shortbar_sc( $atts ) {
    ob_start();
    dynamic_sidebar( 'sidecode' );
    $html = ob_get_contents();
    ob_end_clean();
    return $html;
}

To prevent the echo, we capture the output buffer and instead save it in the $html variable to properly return it.

Conclusion

You can now use this going to your Widgets area in the WP Admin and dropping some widgets in the new Sidecode sidebar you should have. Then go to your post and type [shortbar] to embed the sidebar in your post. Of course, the widgets might appear with no style, since chances are that you’ve created your CSS selectors specifically for widgetized areas in sidebars, instead of post content. Not a big deal, go ahead and add the required selectors to stylize the widgets shown in your content.

This example show how to display all the widgets from an specific sidebar into the post using a shortcode, but if you want to display an specific widget, you could use the_widget function instead in your shortcode to configure the widget and display it within your post content. It won’t allow for easy customization of the widget though, and it’s definitely less user friendly, so if you’re preparing this for a theme to be sold or for a client, you might want to go with the approach outlined in this tutorial and create the sidebar to drag and drop widgets and display them using your shortcode.

Published by Elio Rivero

Software engineer, designer and photographer.

14 thoughts on “Display sidebar widgets using a shortcode in WordPress”

  3. Nice, this helped me…BTW could you check out ym blog, it would be of great help, only started it up a day ago! 😀
    Aamirp.wordpress.com

  5. Fantastic work..
    I have watched learnt, not yet tried. It is something I will need soon on a few sites.
    Coffee on the way to your paypal. Not much right now, but each time I need to use the script I will be sure to send something for this code and help.

    Regards,

    Ciaran

  6. Can you advise how I can make multiple instances of new widget to use as shortcodes please. The code above works fantastic, however i have another widget I would like to place in another area on the site.

  7. That’s a tricky one. If you only need one or two more you could replicate the code given here to suit your needs. Otherwise if you need tenths or hundreds of widgets maybe you could create a custom post type that initializes sidebars and that provides a shortcode to use them.
    In the best case, you should initialize all the widgets and drag and drop interface inside the custom post type, but you could also just display the created sidebars in the AppearanceWidgets page.

  8. Hi Elio, I am looking for only 3 more, could you please make an example in code as I keep making drastic failure to replicate x3 more of these.

  9. this will be messy, but (untested) duplicate code could be:
    add_shortcode( 'shortbar1', 'shortbar_sc1' );
    and
    function ilc_register_sidebars(){ register_sidebar(array( 'name' => 'Sidecode' )); register_sidebar(array( 'name' => 'Sidecode1' )); }
    and finally
    function shortbar_sc1( $atts ) { dynamic_sidebar('sidecode1'); }
    note that I’ve removed portions of code for the sake of brevity

  10. I know it’s an old article, but had a question.

    I followed the directions, but when I add the [sidecode] to my post content, that is what is displayed on the page output. I don’t see the sidebar, but rather the shortcode txt. Is there another step to get the content area to parse the shortcode?

Leave a Reply