How to Add a Sidebar to Your WordPress Theme

/121 Comments/in /by

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”.

Add WordPress Sidebars

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.

Add WordPress Sidebar Step 2

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:

Our New WordPress Sidebar

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!

 

You might also like
CSS Gallery Ultimate List
WordPress Tutorial: Display All Posts on a Page
Ultimate WordPress Hacking Recovery Guide
Are Site-wide H1 Tags in WordPress Good or Bad?
From the Wordpress SEO book Is WordPress Good for SEO?
From the Wordpress SEO book SEO Master Class: Choosing a Keyword-Rich Domain Name
121 replies
« Older Comments
  2. hornlouder
    hornlouder says:

    Hi, my website dont have any sidebars. Can i still use this method to add sidebars to the left and right hand sidebars?

    Reply
  4. Tara
    Tara says:

    Thanks for the tutorial! I used the information to add an additional sidebar to a client’s website. Their first sidebar has simple company information, the additional one is for their blog!

    Also, LOVE your website design!

    Reply
  6. Abhijit Guha
    Abhijit Guha says:

    hi I want to make a left sidebar in my theme, I have registered the widget area, but I am confused where to add the ” ” ???

    please help

    Reply
  8. Daniel
    Daniel says:

    Ok I got everything until the #3… It talkes about calling the page, but where are we suppose to save that code? there is no sidebar-homepage.php I dont get it.. Am kind of you but i understand some of it.. Just need clarification on step #3

    Thanks

    Reply
    • Mr Tenerife
      Mr Tenerife says:

      Hi Daniel,
      There will be other template pages such as ‘post.php’ / ‘home.php’ / ‘search.php’ in the base of your theme. You enter the content in #3 inside any of those types of template pages to see the new sidebar appear in any page of your site which uses that particular template page such as single post page ‘single.php’ (depending on what theme you have loaded.)

      Reply
  9. winresh24
    winresh24 says:

    Hi, Michael

    I just want to know if its going to be the same layout as the Theme?
    Pleases answer back.

    Thank you in advance.

    Reply
    • Naples FL
      Naples FL says:

      @winresh24
      Following Michael’s instructions above will use whatever stylesheet is being active within your theme – so yes to your answer. However,/b> – if you add your own custom classes as part of your sidebar you will have to ensure that those class details are added into the stylesheet else you won’t get your desired layout.

      Reply
  10. Syxguns
    Syxguns says:

    Michael,
    Fantastic tutorial, you don’t know how much searching I did to find this! Now I only hope that I can make it work for me. I may need to PM you with the specifics, but lets just say for the time being that I have a fantastic theme for WP called Bluebirds. Currently I have a redirect script that will not take you there, but if you wish to view it the location is https://www.place4musicians.com/news

    Now the way my template was originally constructed I am suppose to use a plugin called Ad-Minister to accomplish what I need done. Needless to say I’ve had the following difficulty:

    http://wordpress.org/plugins/ad-minister/ has not been updated in over 2 years, it does not work with WP 3.5.2

    I’ve also tried without success Adsense Insertion, and WP Simple Adsense Insertion. I’ve come to the conclusion that relying on others is not something I should do. That is why I’m glad I found your page!

    My objective may be a little more complicated, so I may need some assistance with it. Here is what I did:

    I have sidebar.php file that calls for Ad-Minister, so I commented out those areas. With your code I used “width 125px height 125px” for my Adsense ads. Now there should be 4 of them eventually and I may need a little assistance with that. In the sidebar.php file where the call for Ad-Minister was I placed the which is what I used for my placement.

    Here is the issue; there are a total of 4 ads that I want to place in a square patter in the area that is provided. How do I accomplish this?

    many thanks!

    Reply
  12. Betty Jay
    Betty Jay says:

    Thank you very much for the easy to follow tutorial!!! I was able to create my custom sidebars for my different posts and pages in less than 5 minutes – you are awesome! Thank you once again you saved the day :) was looking for this the whole day!

    Reply
  13. Tracy
    Tracy says:

    This was very helpful. My only issue was that I don’t want to use text, I want to use an image in my sidebar that has linkable text (like PSD file) and I can’t get that to render right. Any thoughts? Do I need to create a custom widget?

    Reply
  16. Heidi@OneCreativeMommy
    Heidi@OneCreativeMommy says:

    I understand your tutorial perfectly until I get to step three. The only php files in my theme are function.php and home2.php. (Home2.php actually does not get used. It’s for a function in my site that I don’t want. To stop the function and preserve it incase I want it someday, I renamed the file.) Will adding the code to the home2.php file still work? I’m sure there are other php files in the genesis theme, but I’m pretty sure I’m not supposed to mess with those. I use a child theme.

    Also, I am trying to create a sidebar to go under my navbar–a horizontal area. Does simply putting in the description ‘Appears as the sidebar under the nav bar’ tell the program where to put it? It seems like there must be another step.

    I tried putting something in the widget, and it didn’t show up anywhere, so I’m sure I’m missing something. (Right now, the step 3 code is in the home2.php file.)
    I’m just learning. I really appreciate your time! Thank you.

    Reply
  19. Omar
    Omar says:

    Is it possible to make a sidebar on both sides?

    I think something like a three-column layout, where the main content will be displayed in the middle column?

    Reply
    • Jouke Nienhuis
      Jouke Nienhuis says:

      Of course that is possible, but I think you already figured that out. If not, just make 2 sidebars: sidebar-left and sidebar-right. Create both files: sidebar-left.php and sidebar-right.php and make dynamic sidebar call in your index.php file. Don’t forget to register your sidebars in the functions.php and then you can easily fill your sidebars.
      Maybe a little css is also needed for the makeup

      Reply
      • njuki
        njuki says:

        You tutorial is very easy to follow. Thanks. But I still cannot figure out what tells the sidebar to appear on the left side.
        I would like my sidebar to appear on the left. Is calling it the file “sidebar-left” sufficient to achieve this?

  20. Rod
    Rod says:

    Nice, i just added a new sidebar and called to the Index.php but always appears a black dot next to any widget that i add to the new sidebar, anyway to fix this’?

    Reply
  21. Christina
    Christina says:

    After completing the steps – I couldn’t get a sidebar to appear in any of the templates I placed php get_sidebar(‘homepage

    So, on a whim, I placed it my footer.php and voila, it appeared there just fine.

    Any workaround for getting this into my templates?

    I’m using WooThemes ( http://demo2.woothemes.com/ontopic/2013/04/26/earning-and-learning-with-sensei/ ) with only Footer Widgets. Support is no help because it requires custom coding, beyond their assistance.

    This is a fantastic tutorial.. it has me 90% there. Any ideas? Thank you so much :)

    Reply
  25. Emelie
    Emelie says:

    I have created a new sidebar but it just shows up at the bottom of the page. I want the new sidebar to be placed to the right of the page, how do I move it?

    Reply
  30. Filippo
    Filippo says:

    Hi, i want that my custom sidebar appear only in determinate page. I create custom sidebar files but it show always the same sidebar in all menus with sidebar, why?

    Reply
  31. Tony Scialdone
    Tony Scialdone says:

    Thanks for a very straightforward tutorial!

    I’ve had some success with it, but can’t get it working at the end. I’m sure I’m doing something wrong.

    1. I can register the sidebar fine, as it shows up in my Widgets list. I can drag widgets into it.

    2. I have a file named sidebar-internal.php:

    For testing purposes, I’ve duplicated it as internal-sidebar.php, with the custom name being “sidebar-internal”.

    3. I can’t get the stuff to display. I’ve added the following to my template:

    and

    and

    with no success.

    I’ve even started over with your exact file, filenames, and code. Any idea why the call might be in my template and NOT work to pull in the file?

    Thanks!

    Reply
    • Tony Scialdone
      Tony Scialdone says:

      Argh. Of course the php won’t post. Let’s just say I followed your instructions exactly, used your code exactly, and it won’t display. I’m using a child theme for Twenty Thirteen, that – in every other way – seems to work perfectly.

      Thanks!

      Reply
  34. paul
    paul says:

    I know this is forever old now but I’m (mostly) making it work. The sidebar shows up in my template where I put it, but when I drag a widget into the new sidebar it does nothing on the front end. Just doesn’t show up. Any idea what I might be doing wrong?

    Reply
  35. Dewinda
    Dewinda says:

    Hi,
    I’ve tried this tutorial and it works!
    I can create one more sidebar in my theme
    Problem is, I want it to be in the footer area, instead it appears in header area
    Anyone can help me how to move it into the footer area?

    Thanks

    Reply
  37. Alexander
    Alexander says:

    Thank-you for sharing this tutorial. I have been doing the same as i have seen the tutorial to create widget area https://www.wpblog.com/how-to-add-custom-widget-area-to-wordpress-themes/ . I have been adding this code in functions.php but still having issues

    function wpblog_widget()
    {
    registr_sidebar(array(
    ‘name’ => __(‘Primary Sidebar’, ‘wpb’),
    ‘id’ => ‘primary_sidebar’, // unique-sidebar-id
    ‘description’ => ”,
    ‘class’ => ”,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    }

    add_action(‘widgets_init’, ‘wpblog_widget’);

    Reply
  38. Amanda
    Amanda says:

    Why I am having an error while adding custom widget in my theme? This is the code that I have added in functions.php.

    function widget()
    {
    register_sidebar(array(
    ‘name’ => __(‘Primary Sidebar’, ‘wpb’),
    ‘id’ => ‘primary_sidebar’
    ‘description’ => ”,
    ‘class’ => ”,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    }
    add_action(‘widgets_init’, ‘widget’);

    I have seen this code here https://www.wpblog.com/wordpress-custom-widget-area/

    Reply
« Older Comments

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.

CSS Gallery Ultimate List Video Tutorial: How to Clean Up Your WordPress Head