WordPress Templates: Multiple widget locations

Ed: This article is part of the 21 Days of WordPress Tips

Widget functionality is one of the most useful parts of a WordPress template. It allows the user to easily manage the content that shows on the sidebar. However, what if you want to let someone not only manage the widgets on their sidebar, but their footer as well?

In this WordPress tip, I’ll walk you through how to add a second widget location in your template and then how to manage the widgets that show in each location.

We will be using the “default” theme that is download with WordPress as an example for this tutorial.

1. In /wp-content/themes/default/, open the file functions.php.

2. The very first bit of code at the top is what we will be dealing with. Think of this code as creating a new box that you can put your widgets in. Currently there is only one box and the default name given to it is “Sidebar 1”.

widget1

3. Now what we want to do is give the first box a more descriptive name like “Right Sidebar” and then add in a second box named “Footer” to hold all of the widgets that will show up in the footer of the site.

And just for fun, I changed the code to put the widget title in an <h3> tag in the footer instead of an <h2>.

widget2

Once you’ve made those changes to functions.php, save and upload the file.

4. In order to see the changes you’ve made and start adding widets to your different boxes, login to your WordPress dashboard and browse to Appearance -> Widgets. On the right side of the page should be a dropdown box that shows the two different widget boxes we created and their corresponding names.

Keep in mind that you can make as many widget locations as you’d like and name them whatever you would like.

widget3

5. Go ahead and add some widgets to each one. Be sure to click the “Save Changes” button. In my example, I’ve added Search, Links and Recent Comments to the Right Sidebar and added Archives and Categories to the Footer.

widget4

6. Now you’ll need to add the new Footer widget box to the footer.php file of your theme. Add this code where you would like it to show up:


<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : endif;
?>

The thing to pay attention to here is where it says “Footer”. This is where we put the name of the widget box that corresponds with the changes we made to functions.php

widget5

Save and upload the file and then take a look at your site. With a little CSS magic, here’s what my default installation of WordPress looks like. You can see each of the widgets a placed showing in their corresponding widget box.

And that’s it! Now you have two widget boxes in your theme that can easily be managed from the WordPress dashboard.

Keep in mind that this method can work for any location on your site. You can have two sidebars, add widgets to the header or even have a custom template for your archives page that runs on widgets.

Comments

comments