How to Add a Sidebar to Your WordPress Theme
Most simple WordPress templates/themes generally employ a single sidebar. But, in keeping with WordPress’ open architecture, you can easily add a second (or 3rd or 4th) sidebar to your site’s theme. And, you aren’t restricted to using your sidebar in the typical sidebar area–you can put your new sidebar in a header, a footer, or any other area in your template. Additional sidebars let you place any WordPress Widget (such as Recent Posts, Pages, Links/Blogroll, Calendar, Tag Cloud, as well as any custom widgets) into new areas of your WordPress template. This technique is especially powerful when combined with custom WordPress page templates–with additional sidebars, we can have custom sidebars for each of our custom page templates. This is the approach we’ll teach you in this tutorial.
Laying the Groundwork for Your New Sidebar
So what we’ll do in this tutorial is to add a second sidebar to one of our custom template pages in our WordPress theme. We have a custom homepage in our template where we want to include a robust call to action to our website visitors rather than a Category list which is more appropriate for blog readers. The screenshot below shows the default “Sidebar 1” sidebar from our simple template, and we’ll add a second sidebar called “Homepage Sidebar”.
Let’s first take a 10,000 foot view, we are going to employ the following steps to add our sidebar:
- We are going to register our sidebar within the template by making an entry in the template’s functions.php file.
- We are going to create a separate, custom sidebar file called sidebar-homepage.php.
- We are going to include a reference to our custom sidebar-homepage.php file in our custom page template.
That’s it! With these three steps, we’ll have a 2nd sidebar that will display on our custom homepage. With the same technique, we could create additional sidebar areas, the steps would be the same.
Step 1: Registering the Additional Sidebar Within the WordPress Template
First step: we start by registering our sidebar within the template’s functions.php file. 99% of all WordPress templates/themes have a functions.php file. If your theme doesn’t have one, simply create a file in a text editor (we like Notepad++ in the Windows environment and TextMate in the Apple environment). If you don’t know how to find your theme files, you’ll find them in your web host in the following directory: www.yoursite.com/wp-content/themes/yourtheme/.
You’ll want to begin by finding any existing “register_sidebar” entries in your functions.php file. Ours had the following existing sidebar definition for our single default sidebar:
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}
To register our second sidebar, we simply add the following code to the functions.php file:
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Homepage Sidebar',
'id' => 'homepage-sidebar',
'description' => 'Appears as the sidebar on the custom homepage',
'before_widget' => '<div style="height: 280px"></div><li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}
So what did we just do?
- We told our WordPress installation, “we are adding a second sidebar area that we’ll use in our theme”
- The sidebar’s name is “Homepage Sidebar”
- The ID of the sidebar (we’ll refer to that ID later) is “homepage-sidebar”; you can choose “footer-sidebar”, “second-sidebar” or anything you want
- We added the description “Appears as the sidebar on the custom homepage” that will display just under the sidebar’s title.
If you upload your new functions.php file to your WordPress installation, you should see your new sidebar if you browse from your WordPress dashboard to Appearance, then Widgets. It should look like the following picture. We’ve already added a Text Widget with the title “Contact Us” to ours, but yours will be empty when you first look at it. But, all we have done is create the sidebar so far; we haven’t yet taken the steps to display the sidebar anywhere in our theme, that will come in the next steps.
If you see your new sidebar in the Widgets area of your WordPress Dashboard, you are ready to move on to the next step.
Step 2: Create an Additional Sidebar File
WordPress themes use a default file called sidebar.php to display sidebars on pages and posts. But, our goal is to create a second sidebar, we’ll do that with a separate file called sidebar-homepage.php.
Again, we’ll open our text editor and create a file and paste in the following code and insert the ID of your new sidebar within the “dynamic_sidebar()” declaration like so:
<div id="sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('homepage-sidebar') ) :
endif; ?>
</ul>
</div>
Now, we have to note that our example sidebar file is highly simplified. Most sidebar files have more code–this extra code displays core navigation in the event the sidebar does not have any widgets installed in it–but for the purposes of this tutorial, we have to simplify it. As an alternative, you can simply copy your sidebar.php file and rename it. Don’t forget to include your sidebar ID within the dynamic_sidebar declaration (shown in red in the code example above)–that sidebar ID tells WordPress which sidebar (which we registered in Step 1) to display.
Step 3: Call the Additional Sidebar from Your Theme Files
We’re almost there. Now, all we need to do is call our new sidebar file, sidebar-homepage.php from our template files–keep in mind that our file name must follow this construct: sidebar-_______.php; we’ll see why in a moment. In our example, we’ll call our sidebar file from a custom template page–but you can call your new sidebar from a footer file, header file, or any theme file that displays on your WordPress site.
The function in WordPress that calls sidebars is get_sidebar(). When get_sidebar() is used with no information within the parenthesis, WordPress grabs the default sidebar.php file. But we want to grab our sidebar-homepage.php file, so we put “homepage” in single quotes within the get_sidebar parentheses. This tells WordPress to grab a file called sidebar-homepage.php . The code we want to insert in our template file is the following:
<?php get_sidebar('homepage'); ?>
What we’ve told WordPress to do is the following: we want to grab a sidebar file, but not the default sidebar, we want a file called sidebar-homepage.php. With this string of code, we’ve successfully grabbed our custom sidebar file.
Our New Sidebar
If you’ve coded your additional sidebar correctly, you can drag Widgets from the WordPress dashboard to your new sidebar and you’ll see the widgets displayed on your WordPress site. Here’s our new sidebar displaying on our homepage, while we display our default sidebar on interior pages and blog posts:
Other Approaches to Adding Sidebars
Our method is one of many, there are more elegant ways of accomplishing the same result without creating separate template files, but the method outlined here is simple and reliable. Please comment below if you have questions or run into trouble.
Your WordPress site needs SEO. Buy our WordPress SEO book at Amazon. Now in the second edition!
Next, you will see that once you click the graphic icon for image uploads indicated in the picture above, the “add an image” dialogue box pops up, as shown in the picture below. You’ll note that in this picture the “from computer” tab is highlighted– but you can also upload from a URL. Today we will learn how to upload from computer. Keep in mind that once images are uploaded, resizing them or editing them is difficult or impossible, so you want to make sure your images are sized right before you upload.
