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
Setting Up a Stripe.com Single Payment Page for WordPress
Web Tour: Early Websites of Internet Giants
Video Tutorial: How to Clean Up Your WordPress Head
How To Delete All WordPress Pending Posts
Ultimate WordPress Hacking Recovery Guide
How to Insert Images into WordPress Posts and Pages
121 replies
Newer Comments »
  4. hk
    hk says:

    hi there,
    this is working if i stick to adding one more sidebar…as soon as i add an array of sidebars (to get more than one in the footer area) I am seeing the widgets in the WP cms widget area, i can add stuff to it, it is also outputting the widgets in the source code, BUT the content within the widgets is missing – it isn’t being output anywhere…Any ideas would be highly appreciated.

    Reply
    • Nitin Reddy Katkam
      Nitin Reddy Katkam says:

      If the widgets aren’t showing, it is most likely because you didn’t include the call to the function dynamic_sidebar. Using register_sidebar merely tells WordPress that you have a sidebar somewhere in your theme. It is only by calling dynamic_sidebar that WordPress knows where to render the sidebar.

      Reply
  5. Rick A Prentice
    Rick A Prentice says:

    From what I understand, this will only take the place of the existing sidebar so you can swop it out on a per page basis. I have a theme with template options: “Full Page”, “Left Sidebar”, “Right Sidebar”. I need to have a “Left and Right” sidebar on the same page. Unless I have misunderstood how this method works, I don’t think it will do that. Or, have I got it wrong?

    Reply
    • RA Prentice
      RA Prentice says:

      Michael,

      I had forgotten I posted here until I was going through my bookmarks.
      Thanks for responding and thanks for providing this tute.
      Anyway, the theme I use is from “mysitemyway.com” (Dejavu). The child theme is “Dejavu-buddypress”.
      Currently it has: Homepage sidebar and Primary sidebar.
      It also has the ability to create custom sidebars that can be selected per page, but when used they take the place of the existing sidebar.

      Do I add the additional .php to my child or parent?
      Which template file will be the best place to add this:

      Also, I’m thinking I will need to create space via css for the additional sidebar I will place on the right before I add the new sidebar? Will the new sidebar be inside the main container or main content?
      I can reduce the width of the main content and leave space to the right for the new sidebar. Is this correct?

      Thanks for your help, really hope this works.
      Rick

      Reply
    • RA Prentice
      RA Prentice says:

      Do I add the additional .php to my child or parent?
      Which template file will be the best place to add this:

      get sidebar (left)
      get sidebar (right)

      dropped of other post

      Reply
  6. Marvin
    Marvin says:

    Great tutorial but my new sidebar appears disordered in the botton of my site. do i have to do something in the css styles?

    Reply
    • Michael David
      Michael David says:

      Every template is different, so yes, you might need to make some css adjustments. It’s hard for me to say exactly without studying the template. If you are stuck, you can probably call in a coder for a quick job like that for like 20 bucks on Craigslist or even Elance.

      Reply
  8. Rick A Prentice
    Rick A Prentice says:

    Michael,
    Thanks for responding. I forgot I had posted here until I was looking at my bookmarks.
    Anyway, My theme (mysitemyway.com… Dejavu) has a homepage sidebar and a primary sidebar. I can also create custom sidebars on a page by page basis but they take the place of existing sidebars. My child theme is Dejavu-buddypress and that is where I want to add the second sidebar on the right side in the buddypress section of my site. Will I add the additional code to the “child” .php or the parent?
    Also, do I need to create space on the right in my css to make room for the sidebar before I add the additional code?
    Thanks for providing this tutorial
    Rick

    Reply
  9. mahmud
    mahmud says:

    actually i searched here and there for a way out to create a sidebar just beneath the category nav of my theme. your article gave me the basic idea and i did it on my own accord. thanks to pave me the path.

    Reply
  11. Pam Warden
    Pam Warden says:

    Hi
    I’m not sure how I add things to my sidebar? I can’t find the area to post in. It was easy to see in blogger, but I’m just learning my way around wp and it is quite different in many ways…most of them in GOOD ways.
    Thank you,
    Pam

    Reply
    • Pam Warden
      Pam Warden says:

      Sorry, in reading back I don’t think I was clear on something, when I said I’m not sure where to post I was still talking about my sidebar.
      Pam

      Reply
  12. Robert
    Robert says:

    Thanks for this badass tutorial! Incredible walk through and I love your “10,000 foot view.” It really helped add four ‘sidebars’ into my footer area.

    Reply
  14. Ken
    Ken says:

    This is absolutely one of the best clearly stated tutorials I’ve come across, except for one issue…and maybe I just don’t get it…

    Appearance==>Editor ==> list of templates on right of page. I see all the templates listed on the right including sidebar.php. Exactly how do I find the folder in which sidebar.php file exists. That is, where do I actually re-create and rename the second (re-named) php file.
    Thanks in advance!

    Reply
    • Michael David
      Michael David says:

      That’s a bit more work because you need to create a css-based

      area in which to house the new sidebar–and then integrate that new area in to the theme’s architecture. That is pretty advanced–we’ll consider writing a tutorial on that in the future.
      Reply
      • Porshia
        Porshia says:

        Hi.. have you written a tutorial for a left sidebar? I really need it..
        Thanks for this post though..

  16. Willi
    Willi says:

    Well written tutorial. That helped a bunch. Very generous friendo!
    My peeps live in Fredericksburg… if I gen up some Hill Country clients, I’ll point them to ya!

    Reply
  20. Courtney
    Courtney says:

    Ah, but what about for a child theme? I think there’s a lot more involved, am I right? In order to add a sidebar, I have to unregister the parent themes? Can you help me out?

    Reply
  23. cat
    cat says:

    Such a great tut, thank you so much!

    Mine worked nearly perfectly… apart from the final step, getting the sidebar to show up!

    My site: http://catillest.com/shop/bear-style-t-shirt/ The standard sidebar is still showing, even though this page is set to product template and the product-sidebar is called within that… I’m not sure what I’m missing.

    any ideas anyone? Any help massively appreciated!

    Reply
  28. Colin
    Colin says:

    Hi all,
    Going crazy here trying to get a sidebar to show up.
    I created a custom page template to have a blog page and modified the home page to stop posts showing up. Thats all working nicely.

    I want to have the blog categories show on the blog page so was planning to put the categories widget on a sidebar created using widgets on pages plugin. Completed the steps for that but no sidebar. Completed the steps here and no sidebar. I dont have the layout options available when creating a page and cant figure out why, is this because of the theme im using?

    I tried using another plugin Page Columnist to create columns but still no sidebar

    Reply
    • Nicole
      Nicole says:

      I am having the same issue. Or maybe not. I am not sure where I should call the function. I am using template intrepidity. I see the php file in my template and the widget on my widget page, but when i try passing info into it it does not show. Ideally would like the sidebar to show up in the header of the page.

      Reply
      • Nicole
        Nicole says:

        Actually I found it. I was within the content section of my page. How do i make it align to the left as a left sidebar, or a header side bar?

  29. SaveMarriage
    SaveMarriage says:

    Hello Michael,

    My issue is somewhat different but I was hoping something could help me fix a right sidebar issue. I have a blog at internetmarketerdotcom(DOT)com/blog. When doing a search on my blog using the search bar the right sidebar moves upward from the slider image where it’s suppose to be. This issue only occurs when creating a static home with blog (posts page). I’m using the Woo Headlines Enhanced 3.2.3 theme.

    Before I noticed this issue, another issue had occurred after creating the static home page. The right sidebar moved down to the right of the post content and not the along side the slider where it is now. If fixed this issue issue in my sidebar.php by…

    Replacing this code…

    with this code…

    It worked and my right sidebar now aligned correctly. However the issue I explained earlier still exist. Do a search on my blog and you will see that the right sidebar has moved up.

    Doesn’t anyone know how I can fix this?

    Thanks in advance.

    P.S. The theme I mentioned earliest came with a set of PLR blog that purchased sometime ago so I/m eligible for any support from http://www.woothemes(DOT)com/

    Reply
  33. vonromantiko
    vonromantiko says:

    Nice post hehehe..

    One question please..

    I’m confused with step 3, where .php do I put the code?

    thanks again nice post hehe

    Reply
  35. mzer michael
    mzer michael says:

    Hi Michael,
    I want the sidebar to appear only on my static frontpage and not all the site pages.
    The conditional tag: if (is_front_page()) does not seem to be working. Maybe i am not placing it in the right place.

    Could you please advice.

    Thanks.

    Reply
  36. vlado
    vlado says:

    Sorry for the very stupid question, but i’m very novice at coding. I didn’t get the 2nd step. Must I made a new file in my responsive theme directory called sidebar-homepage.php and insert the given code in it, or i must do something else? Currently i have the sidebar in my widget area in WP but i don’t have it displayed in my site. Honestly some time ago it took me a lot of nerves to find out how to completely remove it, and now i need it and i have no idea how i removed it xD.

    Reply
  39. Michael Stone
    Michael Stone says:

    Could you help me with Step 3 please? Where do I put “”? Does it go in the file created in Step 2?

    Thanks in Advance!

    Reply
  42. Gbenga Olotu
    Gbenga Olotu says:

    Thanks for this post…It was really informative. I’m new to word press. I’ve gone through tutorials on presscoders to get me up and running. I want to customize this template ( http://www.wpexplorer.com/gopress-wordpress-theme/ ) to make it have this look and feel ( http://demo.mythemeshop.com/s/?theme=Glamour ). All I’ve been able to do so far is to add additional side bars. I want to add an additional column to the template…I don’t know how to go by it. a little hint from you might be helpful. Looking forward to reading from you.

    Regards,
    Olotu Gbenga.

    Reply
  43. MANOS
    MANOS says:

    Hi! actually my site has no sidebar at all. so i fixed 1st step. then what i have to do? where i have to put sidebar.php file? inside index.php? or where else? and then?..

    thanks in advance
    manos-greece

    Reply
  44. boardtc
    boardtc says:

    Great article, thanks! Similar to Madeline’s question, I want to add a sidebar to a one column theme. I’d prefer not to change the theme – I’ve already hacked it a bit. I can see the sidebar in appearance|widgets as you describe in steps 1 & 2.

    The issue is step 3 and where to call the getsidebar from. Some of my pages (tabs) use custom templates but I want the sidebar to show regardless, like as if the current them was inserted into the first column with the second column being the sidebar. You suggest that it’s not straightforward to do anyway :-(

    Reply
  46. tyee
    tyee says:

    hi great tutorial but i have this theme that come with no slider and i would like to add slider to the theme. the theme name is magnifique. i have followed your instructions but i dont see any side bars showing up. basaically the questions is how do i add side bar to a theme that has none. not to a theme that has one but none please.
    thank you

    Reply
  47. Sardasht
    Sardasht says:

    HI Thanks wonderful tutorial

    I was doing all steps you write and I succeed to drag a content to a widget but it doesn’t appear on my template!

    Reply
Newer 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