WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Themes» How to add Dynamic Widget Ready Sidebars in WordPress

How to add Dynamic Widget Ready Sidebars in WordPress

Last updated on August 19th, 2013 by Editorial Staff
75 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

75 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

27 Comments

Leave a Reply
  1. nabil says:
    Nov 12, 2017 at 9:56 am

    hi i need two column in side bar ! how can i do that whit css

    Reply
  2. Jason says:
    Jun 1, 2017 at 4:49 am

    Where can i extend the functionality of my wordpress widgets

    Reply
  3. Milada says:
    Mar 28, 2017 at 9:33 am

    Hallo team again,

    sorry to trouble you, but I would like to specify, that I would need one widget above the themes current Primary Sidebar widget on the right and the other widget on the left side from the article in the middle.
    How should I proceed?
    Thank you,

    Milada

    Reply
  4. Milada says:
    Mar 28, 2017 at 9:13 am

    Hallo team again,

    how do I add a field in the widget and which and where do I paste a field code to have there affiliate links?
    Thank you,

    Milada

    Reply
  5. Tanmay Bala says:
    Feb 26, 2017 at 5:25 am

    i want to learn how to use DB Plugin in wordpress and redux framework.

    Reply
  6. Marc says:
    Nov 30, 2016 at 8:05 pm

    This tutorial was a great help.
    Been trying to accomplish this for about a week now.
    Nice and to-the-point.

    Thank you!

    Reply
  7. Laura says:
    Jul 6, 2016 at 6:05 pm

    I just wondered, before I actually paste the code, does this work on a theme that originally doesn’t come with a sidebar? I’m using Book Lite which only has footers.

    Reply
    • WPBeginner Support says:
      Jul 8, 2016 at 10:20 am

      Yes, it does.

      Reply
      • Laura says:
        Jul 27, 2016 at 9:34 pm

        Thanks so far – I tried to register the sidebar but whenever I hit “save” I get the white screen of death – which I never had before. Any suggestions what could be wrong?

        Reply
  8. Lohith says:
    May 23, 2016 at 2:03 pm

    Thanks Alot :)
    Its really wonderful and simple method to explain….

    Reply
  9. Bakopu says:
    May 9, 2016 at 3:00 am

    Thank you very very much sir. Where are you sir , we want to take your blessings by touching your feet.

    Reply
  10. akhilesh says:
    Sep 11, 2015 at 6:10 am

    thanks sir these post have vry helpful for me

    Reply
  11. Marcos Nakamine says:
    Aug 31, 2015 at 8:19 am

    Worked perfectly

    Thanks

    Reply
  12. gWorldz says:
    Jun 22, 2014 at 3:14 pm

    I am having trouble getting the widget to display o.O

    The widget is registering and displaying in the back-end properly with no issues, however, it will only show my widget content if I include content in the previous widget.

    I’m using a 2011 child theme and registering an additional footer area.
    functions.php snippet:
    https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
    sidebar-footer.php
    https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
    style.css
    https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css

    Do you have any idea what I’m doing wrong or what is causing this issue?

    Reply
    • Tiger says:
      Oct 26, 2015 at 11:57 am

      Did you ever get any help on this? I am having the same issue.

      Reply
  13. MJ says:
    May 16, 2014 at 5:50 pm

    Just wanted to say thanks for this. I Googled to find out how to register a sidebar in WordPress, and hit a few other sites before this one, and yours had the best, clearest, most understandable directions. Well done.

    Reply
  14. arvind says:
    Mar 23, 2014 at 7:37 am

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

    Reply
  15. Dharmendra Prajapati says:
    Feb 17, 2014 at 9:40 am

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

    Thanks

    Reply
  16. Kevin says:
    Jan 22, 2014 at 10:54 am

    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

    Reply
    • WPBeginner Support says:
      Jan 22, 2014 at 12:14 pm

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

      Reply
  17. SS says:
    Dec 13, 2013 at 11:18 am

    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.

    Reply
    • WPBeginner Support says:
      Dec 13, 2013 at 7:12 pm

      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.

      Reply
  18. Steve Smart says:
    Nov 20, 2013 at 5:07 am

    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?

    Reply
  19. Jackson says:
    Sep 26, 2013 at 1:40 am

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

    Reply
  20. JP says:
    Aug 24, 2013 at 6:24 am

    thanks, found this useful. right to the point.

    Reply
  21. Praveen Prasad says:
    Aug 21, 2013 at 12:23 pm

    Can you tell me where is the Call Function Started ?

    Reply
  22. Ed Du says:
    Aug 19, 2013 at 4:56 pm

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

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
CometChat
CometChat Coupon
Get 30% OFF on CometChat WordPress user chat and conference call plugin.
EWWW Image Optimizer
EWWW Image Optimizer Coupon
Get 15% OFF on EWWW Image Optimizer WordPress plugin for image resizing.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.