How To: Different Homepage and Single Post Sidebars

themes 250x385 How To: Different Homepage and Single Post Sidebars

Illustrated instructions have been made available here.

One of the more frequent questions we get is how to have different sidebars on the inside of a WordPress blog than there are on the Homepage.  It is a pretty simple fix, but there isn’t a ton of complete instruction available for it.  So we created this tutorial.

You probably already know about your sidebar.php file that came with WordPress or the theme you’ve purchased.  That file controls your main sidebar.

Logically, you’d think all you need to do is make a secondary sidebar.  That’s completely true.  Then  you just call it into the post template.

See Also: How many ads should I have on my site?

Here is how to have two separate sidebars without widget/dynamic functionality.  (Next, we will show you how to make your secondary sidebar widget ready so you can control it in your Widgets tool.)

For this lesson, we are going to assume that you want your post pages to have a different sidebar than your homepage.  The same instructions would apply if you wanted to have different sidebars on pages too.

STOP: Before continuing, make a backup copy of all your template files.  If you accidentally make a mistake, you can restore these files.

Basic Method:

  1. Find your sidebar.php file.
  2. Make a copy of it.  Name it sidebar-secondary.php.  Your second, third, forth, etc. sidebars all need to start with sidebar-NAMEHERE.php.  That’s part of the naming convention in WordPress.
  3. Make the content changes you need in secondary sidebar file.  This is where you make the secondary sidebar different.  Whatever it is you need to be different should go in this file.  Save sidebar-secondary.php and upload it to your server.
  4. Locate your single.php file.
  5. Look for a line near the end of the file that looks like this: <?php get_sidebar(); ?>
  6. Change it to <?php get_sidebar(‘secondary’); ?> (note, the ‘secondary’ part should match the name of the new sidebar-secondary.php file).  The single quote marks ‘  ‘ are required.
  7. Save your new single.php file and upload it.
  8. Done.
Enjoy. You’ve now made two separate sidebars.  You then told your single.php file (single posts) go fetch a different sidebar file than your index.php (homepage) does.  Your homepage will pull in the old sidebar.php file.  Your single posts will pull in the sidebar-secondary.php file. Note: In your sidebar-secondary.php file, you will want to remove the dynamic sidebar components.  Otherwise, your homepage widgets will also show up on your inside pages.  Look for a line like this: <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>. Only remove that line of code from the file if you do not need the new sidebar to have dynamic widget functionality.  Otherwise, if you would like to wigetize this sidebar, proceed to the next lesson.

UPDATE:

Illustrated instructions have been made available here.

How to make your new sidebar Widget Ready or Dynamic:

We have to do two things.  1) Register your sidebars to your WordPress backend knows you have two ready for widgets.  2) Tell each sidebar.php page which set of widgets to pull in.

Here we go:

1) Find your functions.php file.

2) Look for the register_sidebar section.  It will look something like this:

if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Homepage Sidebar', 'id' => 'homepage_only', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', ));

It may not contain all of the lines such as ‘name’ or ‘id’.  It may not even exist at all.  In the next step, you will overwrite the old version.  If you don’t have one, you will make one now. 3) Set one will control the homepage sidebar and should be setup to look like this:

if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Homepage Sidebar', 'id' => 'homepage_only', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); 'name' => 'Homepage Sidebar', will refer simply to the name of the sidebar that shows up on the Widgets admin page drop down list.

'id' => 'homepage_only', is a unique ID just for that sidebar set.  We will add this ID to the sidebar templates later.

4) Next, make the second set for the inside pages:

if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Inside Sidebar', 'id' => 'inside_only', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', ));

5) STOP.  This is how a section inside your functions.php file should now look:

if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Homepage Sidebar', 'id' => 'homepage_only', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Inside Sidebar', 'id' => 'inside_only', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', ));

6)  Continue.

7)  Locate your sidebar.php file.

8)  Locate the line that looks like this: <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

9)  Make it look like this: <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘homepage_only’) ) : ?> You have now told your single.php file to go look specifically for the widgets assigned to the homepage_only function. 10) Locate your sidebar-secondary.php file.

11)  Locate the line that looks like this.  If none exists, don’t worry. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

12)  Make the line look like this.  If you do not have this line, simply add it in the possition where you want your dynamic widgets to appear. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘inside_only’) ) : ?>

13) Upload your newly changed functions.php, sidebar.php, and sidebar-secondary.php files to your server.

14) Earlier in the basic method, we already changed your single.php file to pull in the sidebar-secondary.php file.  So at this point, you are all done. You can now log into your WordPress Admin and go to the widgets section.  You will now see a dropdown menu with your Homepage Sidebar and Inside Sidebar listed.  You can add widgets separately to each sidebar.  When you save, the changes will update on your site.

script type=”text/javascript” src=”http://forms.aweber.com/form/14/71940714.js”>

This can be a little confusing.  All it takes is one little out of place punctuation mark to crash your whole site.  If you are comfortable with WordPress, the previous intructions should get you by.  If it would be helpful to you to get some more details for each step including diagrams and images, fill out the form below.  We will send you the fully illustrated doccumentation immediately.

About Travis Lusk

Since early 2000, Travis Lusk has been involved in publishing content online. Currently, he is an influential leader in online video advertising, brand marketing, and content publishing. I addition to publishing here on BlogCraving, Travis works for a national leader the online video advertising platform space. A self professed web geek, you'll often find him combing the web on his iPad or blogging away on his Macbook. Follow on Twitter @travislusk or on Facebook. Also, check out his photography on SmugMug.

Comments

  1. Thanks for this.. it helped greatly!

  2. Make sure you check the quotes if you just copy the code though.. I had to go through and replace them so they would register (they are curly instead of vert quotes).
    Cheers

  3. Hello, would it be possible to send me the illustrated documentation aswell, I’m really confused using the text instructions.

    Thanks

    N

  4. Oh man!

    I’ve been looking for this for ages… Thank you!

  5. So I’ve followed this carefully and have now created a new template page (page-ceramic.php) and a new sidebar (sidebar-c.php) that includes the line

    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘ceramic’)

    Where ‘ceramic’ is the id of my second sidebar. But the page still shows the default sidebar.

    However if I alter the default sidebar.php file to

    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘ceramic’)

    then it DOES show this sidebar.

    My functions file now shows this…

    if (function_exists(‘register_sidebar’))
    {

    register_sidebar(
    array(‘name’ => ‘Sidebar’,
    ‘id’ => ‘sidebar1′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));

    register_sidebar(
    array(‘name’ => ‘sidebar-c.php’,
    ‘id’ => ‘ceramic’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));
    }

    ?>

    Any idea where I may be going wrong?

    Thanks for any suggestions.

  6. J. Travis Lusk says:

    @NS – Yeah just input your name and email address and the illustrated version will be emailed to you instantly. Enjoy!

    @Simon – Have you signed up to get the illustrated version? It is color coded and really points out the specific code areas better. I didnt see your name on the subscriber list. If not, give it a try. It’s free, and I think it will help you.

  7. This post was exactly what I needed. Didn’t know that sidebar-xxxxx was the naming convention – thanks a million!

  8. Hello. And Bye.

  9. thank, really helpful tut

  10. Richard Giles says:

    Apologies if this is covered above.

    I'm running WordPress as a CMS and have the sidebar appearing for my pages. So far so good. However I'd like a completely different sidebar just for my blog – I believe your post covers 95% of it but how do I configure a sidebar just for the blog?

    Many thanks

    • You should put your email name/email in the fields in the post. You'll automatically be sent the full color, illustrated instructions. Those might be easier to follow along.

  11. thanks for the tut. Just what I was looking for.

  12. WOW. I spent HOURS sifting through the changes from WP 2 to WP 3 trying to figure out how to make a second dang sidebar…..all I Found were crazy complex 6,000-step processes. this was stupid easy. you’re the best. I love you.

  13. Hi!

    Thank you for the great tutorial.

    I am just learning WordPress and having problem with sidebars.

    Is it possible for me to have the illustrated version of this tutorial, please?

    Thank you.

    K. Rylan

  14. Brilliant, it worked first time.
    Thanks

  15. Richard Stone says:

    Hi,
    Many thanks for this tutorial.

    It helped me see the light and unleashed some great new ideas.
    Cheers
    Rich

  16. I’m trying to set up a second wigitized sidebar to just use on my homepage so hopefully this will work. I’m trying it now, wish me luck! :)

  17. hello i signed up but didnt get the images associated with the instructions, can you resend with images as you promised.
    stanley

  18. is this just a scheme to get email addresses???
    if you promise something you deliver or dont promise!!

    • Hey Stanley,

      Sorry about that.  Not sure why you didnt receive the instructions.  Maybe caught in your spam?  

      Anyway, I looked up your email address and resent you the instructions directly.  Please let me know if you dont receive them and I will try something else.

  19. Thank you for being so detailed with these instructions. Yesterday I was scared of PHP but now I’m feeling more comfortable with changing things around. Cheers!

  20. Hi Travis, thanks a lot for the info!, one question: how can i change sidebar for a specific PAGE only?
    thanks a lot

  21. Hopeful says:

    Hello,

    This might be a bit off topic, but I have a question I hope you can answer. I am looking to have custom sidebars for each, individual “page” of my archives and categories. I do not want something that will affect all ‘pages’ or an archive or category, but rather to target only one specific ‘page’ from there. Please find more details here: http://wordpress.org/support/topic/custom-sidebar-for-each-page-of-an-archive-or-category?replies=9

    I’ve been searching in a variety of places, and have yet to find the solution.

    Thanks in advance!

  22. Great tutorial! Thanks so much!

  23. Hi travis, great post but can you please send me the full color, illustrated instructions.

    Cheers
    Geoff

  24. Excellent post, I really searched alot to create multiple sidebars for separate page but I didn’t find proper answer. But when i read your article my problem solve you have briefed very excellent style.

    It is really very helpful.

    Thanks.

  25. Great post, please send me illustrated version.

  26. Excellent. Can you please send the illustrated instructions

  27. The Widget Logic plugin can also help you show certain widgets on different posts and pages

  28. Love this! Thank you!

  29. Thanks for the tutorial! This maybe a dumb question, but what is the exact code I would need to enter to have a sidebar for all posts and a different sidebar for all pages?

  30. Perfect, great post!

  31. ThankU very much….It is very helpful for me.

  32. COULD YOU PLS SEND ME THE ILLUSTRATED TUTORIAL ON IT. THANKS.

Trackbacks

  1. […] Di seguito il link, se sapete un pò di inglese con la spiegazione completa: TUTORIAL CODING […]

Leave a Reply