Adding a sidebar (or 2) to WordPress themes

Adding a sidebar to any WordPress theme is incredibly simple. Whether you are adding an additional sidebar or creating the first one for your theme, the process is very straight forward. By adding the sidebar through a widget initialization, the admin will be able to place widgets into the new sidebar. There are 3 steps to make this all work:

1. Register a new sidebar in your theme
2. Create a new sidebar.php file
3. Call the sidebar inside your template

You can actually do these steps in any order you want, so long as all the steps are completed properly.

Step 1: Register the new sidebar

The first thing you’ll want to do is open the functions.php file in your theme. If you don’t already have a functions.php, then simply create one from a blank file and name it functions.php. If your theme already has one, you should search to see if there are already any sidebars or other widgets that have been registered. Look for the following code:

register_sidebar

If your theme does already have a sidebar registered, you’ll want to add the new code after the existing one. You will create a unique ID to use with your new sidebar. Here is a list of IDs to avoid using, as they will conflict with other existing WordPress IDs. The basic code is as follows:

register_sidebar(array(
     'id' => 'main-sidebar',
));

The above code should be wrapped inside a function, so if you don’t already have a function for registering other widgets or sidebars (like if you just created functions.php from scratch), then you would add the following lines above and below that code. I have also given the sidebar a name in addition to the unique ID.

function your_theme_widgets_init() {
    register_sidebar(array(
        'name' => __('Main Sidebar', 'your_theme'),
        'id' => 'main-sidebar',
    ));

add_action('widgets_init', 'your_theme_widgets_init');

This will now let us add widgets to our new sidebar from the admin when we’re done. According to the codex, there are a few other options we can pass which allow you to customize the wrapping elements of each widget in your sidebar, as well as adding CSS classes. A more complex initialization using some of these options might look like this:

function your_theme_widgets_init() {
    register_sidebar(array(
        'name' => __('Main Sidebar', 'your_theme'),
        'description' => __('single.php', 'your_theme'),
        'id' => 'main-sidebar',
        'before_widget' => '<div class="sidebar-wrapper %2$s">',
        'after_widget' => '</div>'
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));

add_action('widgets_init', 'your_theme_widgets_init');

We’ve instructed WordPress to wrap each widget in a <div> with a special CSS class we can use later for styling, and also put the widget titles inside of <h4> tags.

Step 2: Create the sidebar.php file

Create a blank php file and call it sidebar.php. If you are adding a second sidebar to a theme, you can call this file sidebar2.php, or sidebar-alt.php, whatever you like. Just remember the name you use. Then inside this file, we use the dynamic_sidebar function to show the sidebar if it exists. You’ll notice we use the ID we created when registering the sidebar in the first step.

<div id="sidebar">

<?php if ( function_exists ( dynamic_sidebar('main-sidebar') ) ) : ?>
	<?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>

</div>

Step 3: Call the sidebar in your template

Now, you want call that sidebar into your page or posts template. The code is very simple. If you wanted to add the sidebar to your individual blog posts for example, you would open up single.php, and then find / create the appropriate structure to place in this code:

<?php include("sidebar.php"); ?>

That’s it! I should mention, that it is not required for you to create the sidebar.php file in Step 2. You can just put those lines of code directly into your single.php or page.php template. However, by creating a sidebar.php file, we now have a reusable piece of code. We can easily add our sidebar into more than 1 template with the php_include, only requiring 1 small line of code. This is great if you want the sidebar to appear on more than 1 type of post or page layout.