We've added one widget area to the sidebar, now we're going to add two to the footer.
- Open your theme's
footer.phpfile. - Find the following code (the content of our first
<aside>element):<h3>Socialize</h3> <ul class="grid4up"> <li><a href="#" class="soc facebook">facebook</a></li> <li><a href="#" class="soc twitter">twitter</a></li> <li><a href="#" class="soc rss">rss</a></li> <li><a href="#" class="soc google">gmail</a></li> </ul> <div class="push"></div> <h3>About us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> - Copy that code somewhere safe, we'll be using it again shortly.
- Delete the code and replace with the following:
<?php if ( is_active_sidebar( 'footer-left-widget-area' ) ) : ?> <?php dynamic_sidebar( 'footer-left-widget-area' ); ?> <?php endif; ?>
- Now find the following code (it's inside the second
<aside>element, you don't need to save this):<h3>Navigate</h3> <ul> <li><a href="#" target="" title="">title to link01</a> </li> <li><a href="#" target="" title="">another link02</a></li> <li><a href="#" target="" title="">a different title: link03</a></li> <li><a href="#" target="" title="">yet another link04</a></li> </ul>
- Delete that code and replace it with the following:
<?php if ( is_active_sidebar( 'footer-right-widget-area' ) ) : ?> <?php dynamic_sidebar( 'footer-right-widget-area' ); ?> <?php endif; ?>
- Save your
footer.phpfile.
We added two footer areas to our footer. The code works in exactly the same way as the code we used for the sidebar widget area.
If you check your site now you'll see that nothing is displayed in the footer, in fact the footer has completely disappeared. That will soon change when we add some widgets.
If you wanted to, you could register more widget areas for use elsewhere in the theme, for example:
- Above the header – useful if you want to use a widget to add some important text above the site content or add a login widget here.
- Above the content – sometimes you might want to include a menu or some text above the content of all your pages and posts, without having to manually add it to every post.
- Below the content – useful for messages you want users to read after the content, lists of links for users to click after reading a post, call to action buttons, or social sharing widgets.
- A secondary sidebar – a second widget area in the sidebar. It may seem superfluous to have two widget areas in one place but it can be useful, for example when you want to add a styling element between the two widget areas, you want to position or style them differently or anything else that you can think of. I developed a site once where I used CSS to position the primary widget area across the width of the page above the content and the secondary sidebar – this was done without having to edit the PHP, simply with CSS positioning, widths, and margins.
- More footer widget areas – our theme just uses two, but some themes use three or four footer widget areas side by side, or two or three side by side and another underneath them for the colophon—the small print such as site credits and copyright.
- Custom widget areas – you might want to register a widget area which will only be used in one of your template files, or in a custom include file only called in certain circumstances. This is more advanced territory!
Widgets are fun! They let you add all sorts of custom content to your site without having to touch a line of code. If you're going to have people who can't code working on your site, they're a great way for them to add extra content to the site, and they're even better if you're going to release your theme to other WordPress users—people who don't understand PHP can add custom content in your widget areas using the preinstalled widgets and by adding to these by using plugins.
The possibilities from using widgets and plugins are huge!
Setting up widgets is something you've probably done before and it's very easy to do. Let's add some widgets to replicate the static code we had in our mockup before we turned it into a WordPress theme.
The mockup included one widget area in the sidebar and two in the footer. The sidebar widget area contained three widgets, listing different kinds of content. So which widgets will do that job for us?
- Our first sidebar widget lists the three latest blog posts. We can add that using the Latest Posts widget, which comes preinstalled with WordPress.
- The second sidebar widget lists three categories. Again, WordPress has a preinstalled widget for that – the Categories widget.
- The third sidebar widget lists archives by month – the preinstalled Archives widget will handle that.
- Our first footer widget is for social sharing and some information about the magazine – it lists a set of links to the Open Source Magazine's presence on different social media platforms. We can add that with the Text widget, which lets us add some HTML.
- Our second footer widget is a list of internal links to static pages. We can use the Custom Menu widget to achieve that, along with a new custom menu.
Great! That means we don't have to install any plugins, and can use the widgets already at our disposal to display all the content and links we need.
Setting each of these up is pretty straightforward, so we won't go into too much detail here, but let's just look at the steps involved.