Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to add Dynamic Widget Ready Sidebars in WordPress

Last updated on by
Elegant Themes
How to add Dynamic Widget Ready Sidebars in WordPress

Widgets are such an integral part of WordPress themes that it is hard to imagine a WordPress theme without widgets. Widgets are executable scripts that you can simply drag and drop in your sidebars or any other widget ready area in your theme. Many of our readers utilize widgets to add custom elements to their sidebar. However this article is for those curious users who want to learn how to add dynamic widget ready sidebars or widget ready areas in WordPress themes.

Registering Sidebars or Widget Ready Areas in WordPress

First thing you need to do is to register your sidebar or widget ready area for your theme. You can register multiple sidebars and widget ready areas. Copy and paste this code in your theme’s functions.php file

function wpb_widgets_init() {

	register_sidebar( array(
		'name' => __( 'Main Sidebar', 'wpb' ),
		'id' => 'sidebar-1',
		'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' =>__( 'Front page sidebar', 'wpb'),
		'id' => 'sidebar-2',
		'description' => __( 'Appears on the static front page template', 'wpb' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
	}

add_action( 'widgets_init', 'wpb_widgets_init' );

In this code, we have registered two sidebars. We have given them names and descriptions to identify them on Widgets screen. The description parameter can be used to tell users where this sidebar appears in the theme. The wpb is the name of the theme we are working on, it is used here to make these strings translatable. You should replace it with your theme name.

Newly created sidebars appearing on Widgets screen

Adding Dynamic Widget Ready Sidebars in WordPress Theme Files

So far we have only registered Dynamic Sidebars. Users can drag and drop widgets into these sidebars from Appearance » Widgets screen. However, these sidebars will not appear on your site until they are called in a template like sidebar.php or anywhere else you want to display them. To add these widget areas, edit the template file where you want to display them and paste this code:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	<div id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div>
<?php endif; ?>

In this example code, we have used sidebar id to call the sidebar we want to display here. Change the sidebar id to display another sidebar. For example, you can register three sidebars for footer area and then call them one by one in your theme’s footer.php template.

Widgets can be very powerful. You can add widgets to your posts and page content, make your text widgets colorful, or extend the power of default WordPress widgets. Rightly placed widget ready sidebars allow users to add custom elements to their websites using simple drag and drop interface.

We hope that this article helped you learn how to add dynamic widget ready sidebars in WordPress. We would recommend that you study the code in theme frameworks such as Genesis to learn how professionals are using them in their products. For questions and feedback please leave a comment below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. arvind says:

    your post is helpful to me,
    thanks !!!!!!

  2. Dharmendra Prajapati says:

    Finally i got my dynamic widget ready sidebar after 23 days… I was googled all the sites.. and finally i redirected @ your site.

    Thanks

  3. Kevin says:

    In the second snippet, where you are inserting the widget code into the template, where you have

    div id=”secondary”

    Should that id change with each widget area.

    Ex:

    First, Secondary, Third, fourth, etc

    • WPBeginner Support says:

      Kevin yes you should, and it should be named after the widget area or the sidebar it is representing.

  4. SS says:

    Works for registering the sidebars but when I go to the Appearance » Widgets screen I see all my widgets but nothing to drag them into.

    • WPBeginner Support says:

      SS, when you have successfully registered a dynamic widget ready sidebar it will appear on Widgets screen. This means that registering sidebars probably didn’t work.

  5. Steve Smart says:

    Hi –

    This is a very helpful post. Thankyou!

    I’ve been successful using one dynamic widget area, now I’m trying to implement more than one. Everything seems to work as expected, except an odd problem in the dashboard. If I drag a text widget to my second dynamic widget area I can add content as you would expect, and save it, and it produces output on my pages as expected, however if I now revisit the dashboard widgets page, the second widget area does not appear to contain any widgets.

    I am using a twentytwelve-child theme, and WordPress 3.7.1.

    Any thoughts?

  6. Jackson says:

    Hearty thanks….You have done such a wonderful work…thanks thanks thanks… :)

  7. JP says:

    thanks, found this useful. right to the point.

  8. Praveen Prasad says:

    Can you tell me where is the Call Function Started ?

  9. Ed Du says:

    You can also use Headway with a additional block and it will take care of all of this. Or pagelines for that matter.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.