How To Add a Custom Widget Area in WordPress

  • follow us in feedly
Published April 8, 2013 by Brad Knutson
WordPress Custom Widget

I’ve been looking for good documentation about how to add custom widget areas to my theme templates for quite some time. There is a surprising amount of information out there that touches on the subject, but many of it is incorrect, outdated, flawed, or just plain confusing…it’s frustrating!

Well, despite all the information out there on this subject (which again…is incorrect, flawed, outdated, confusing, etc.), the process to actually create and implement a custom widget area is actually very easy.

Let’s start by checking out our functions.php file.

If you are using the twentytwelve theme, open up functions.php and cruise down to line 204. You’ll see the following function.

function twentytwelve_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Main Sidebar', 'twentytwelve' ),
		'id' => 'sidebar-1',
		'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
		'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' => __( 'First Front Page Widget Area', 'twentytwelve' ),
		'id' => 'sidebar-2',
		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
		'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' => __( 'Second Front Page Widget Area', 'twentytwelve' ),
		'id' => 'sidebar-3',
		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
		'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', 'twentytwelve_widgets_init' );

This function registers the default 3 widget areas. Rather than reinventing the wheel, we will use this function to register our new custom sidebar.

If you are using the twentytwelve theme, make some space below the final ) ); and let’s register our own widget area. Enter the below function there.

	register_sidebar( array(
		'name' => 'Custom Widget Area',
		'id' => 'sidebar-4',
		'description' => 'Widget Description Goes Here',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

If you’re using another theme or building your own, let’s preface the previous function with a stipulation that first checks to make sure the register_sidebar() function exists.

if ( function_exists('register_sidebar') )

OK, we’ve laid the groundwork for our new custom widget area. In fact, at this point, we can see the widget area in the admin. Go to Appearance > Widgets.

WordPress Custom Widget Area Admin

You can change the name of the widget area and the description by editing those values in the initial function.

The final step to adding the custom widget area is to actually add it to the template file that you choose. Do you want it in the footer? In the header? Perhaps in the sidebar of the front page. Open your chosen template, and paste the code below wherever you’d like the widget to show.


<div id="footer-widget-area">
   <?php dynamic_sidebar( 'Custom Widget Area' ); ?>
</div>

Make sure you change ‘Custom Widget Area’ to whatever you in for the ‘name’ variable. That’s it – go and refresh your page, and see the fruits of our labor.

Wordpress Custom Widget Area Front End

From here, we can style the widget container any way we want. We can also style the widget itself based on the ids and classes we set in the original function. Modify these however you’d like.

That’s pretty much it. Leave a comment below if you have any questions or suggestions for improvements!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

16 thoughts on “How To Add a Custom Widget Area in WordPress

  1. Hisham

    Best explanation I’ve read of this process. Straight to the point, explains all you need to know to get started!
    Just what I needed, Thanks!

    Reply
  2. James

    Hi Brad,

    Thank you for this very helpful tutorial. I am brand new at website design and I am using WordPress with Genesis framework and the Lifestyle Pro child theme. I would like to register new widget areas for each page on my website. I want them to be the same ones that already exist on my homepage, but I would like to put different content on each page within the widget areas. Does this make sense? What I’m trying to do is set up all the widget areas that I already have, but to be able to add different content into them for each page listed in my navigation menu. Anything you could offer by way of help would be so very greatly appreciated. I’d be willing to put a link to your website on my page for the help. Thank you.

    James
    jdel83@hotmail.com

    Reply
    1. Brad Knutson Post author

      Hey James,

      The problem with widget areas is that they display the same content site-wide on templates that allow widgets. If you want to have a “widget” area that you can customize differently on each page – you should look into custom fields. There are plugins out there that would help you avoid doing some PHP work, but to really customize it to your needs you’ll probably have to get your hands dirty!

      Good luck!
      Brad

    2. Jos Schuurmans

      My challenge is similar to James’s. I want to create one or two additional widget areas that I can use in certain pages and populate with varying content. I could be wrong but I believe this can be achieved quite easily – after creating the widget areas – by using Jetpack’s ‘Extra Sidebar Widgets’. No? I hope this is helpful.

  3. Jos Schuurmans

    Brad,

    I’ve registered a 4th widget area the way you’ve described and indeed it appears in my widgets dashboard. Thank you!

    Now we’ve edited the twentytwelve parent’s functions.php file. Could we create the 4th widget using a twentytwelve child theme’s functions.php file instead? You know, the usual concerns…

    Whichever way I tried to paste your code into my child theme’s functions.php, the whole dashboard and the front-end would go blank on me :-(

    Many thanks,
    Jos

    Reply
    1. Brad Knutson Post author

      The functions.php file of a child theme is handled a little bit differently than stylesheets or templates. It’s actually loaded in addition to the parent theme’s (TwentyTwelve theme in this case) functions.php file. So if you have a conflict with the two files – you’ll receive a blank white page. Make sure you’re not including the PHP snippet in both files!

  4. Ghulam M.

    Thanks for the guidance. I also want to understand the complete guide of development of a custom widget including its database work. Suggest me some proper and easily to understand tutorial if you can.

    Reply
  5. Troels P

    Nice post champ. Very useful and to the point. It’s hard to beleive that something that isn’t that complicated is so hard to explain for other writers. Coming from the SharePoint world, I think it’s worth making your comment from dec 27 2013 a bit more explicit. It’s kinda weird, that the areas are global and cannot contain different widgets for individual pages/posts. This is solved with shortcodes and a plugin sommehow, right? Im new to WP…

    Reply
    1. Brad Knutson Post author

      Hey Troels,

      If you want unique widgets on individual pages, it’s probably best to use a plugin for that. You could build unique page templates for every page, register a new widget and widget area…but that seems a little overkill – so a plugin is the way to go.

  6. Kamalesh

    Hi, Mr. Brad Knutson!
    Thanks for useful direction! I got my custom widget at top of header but in left side. I want to get at top right side. How can I get it?

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">