Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

Display sidebar widgets using a shortcode in WordPress

Widgets are one of the best WordPress tools: you can add a widgetized plugin and show it anywhere in your site. Of course, wherever you have a sidebar. 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.

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.

function ilc_register_sidebars(){
	register_sidebar(array(
		'name' => 'Sidecode',
		'description' => 'Widgets in this area will be shown using a shortcode.',
		'before_title' => '<h1>',
		'after_title' => '</h1>',
		'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.

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 unstylized, since chances are that you’ve created your CSS selectors specifically for, well, 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.


“Display sidebar widgets using a shortcode in WordPress” received 14 comments! Add yours.

  1. New Plugin: User Profile + Latest Tweets Widget for WordPress | designerbooster September 6th, 2011

    [...] can use it on your sidebars, or even in your post content, using the last tutorial about displaying a sidebar with a shortcode and display it at the end of the article to showcase the author [...]

  2. Skeleton: responsive WordPress theme | designerbooster September 6th, 2011

    [...] Display sidebar widgets using a shortcode in WordPress [...]

  3. Aamir P September 13th, 2011

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

  4. vrushank October 21st, 2011

    I never wanted to use full code for sidebar widget and was searching for something easy and u have made a beauty. Thanks a lot!!

  5. Ciaran Whelan January 26th, 2012

    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. Ciaran January 29th, 2012

    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. Elio January 29th, 2012

    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 Appearance\Widgets page.

  8. Ciaran January 29th, 2012

    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. Elio January 29th, 2012

    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. dave July 24th, 2012

    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?

  11. Shawn August 29th, 2012

    Works great!! Thanks for great code. You rock!!

  12. Rami October 2nd, 2012

    awesome, a quick fix. thank you!

  13. David April 21st, 2013

    thanks!!

  14. Bijay Yadav January 16th, 2014

    I have found the plugin that is intended to do the same work. Link to the plugin http://wordpress.org/plugins/wp-dynamic-sidebar/

Leave a comment