I recently had an inquiry here on the RVoodoo blog. Someone asking how to set up different sidebars on different pages. You may notice that some pages have no sidebars, some pages have the normal sidebar, and our shop pages have a shop related sidebar. Well, how did we do that? It’s quite simple really, here’s how it’s done.
First, the general setup. Functions.php is where your sidebars are set up. So we are going to go in there, and register some more sidebars. Then we will make files corresponding to these sidebars. You don’t really need to do this part if you don’t want to, you can call the widget areas in your template directly. I prefer to just make sidebars and include them in my templates, so I’ll explain how to do it that way. Now don’t get hung up on the term “sidebars”. Sidebars are just widget areas, they can be used as sidebars, but they can be used to put widgets anywhere really. For instance, the photo bar on the top of my index page here is a sidebar area. After we register the sidebars, and make the files, we will include them where we need them. Either with templates, or with conditionals.
So, lets start off with registering some more sidebars. It’s a good idea to plan out what you need. How many more sidebars? You don’t need to finalize your plans right now though. Once you know how to add a sidebar, you can add as many as you want. So head over to your functions.php file and look for code that looks like this:
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
register_sidebar(array(
'id' => 'primary',
'name' => __('Main Sidebar'),
'description' => __('Sidebar used on most pages'),
'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>' . "\n\t"
));
}
That’s my main sidebar. Your code may look a bit different, and that’s fine. It doesn’t have to look exactly like mine. The important part is to recognize your sidebar code. To make more sidebars, we are just going to copy some of the existing code and repeat it. To see what the various parts of that code are doing, just read up on registering sidebars in the codex. Now, lets add in 2 more sidebars. Just copy the register_sidebars block of code and repeat it. If your sidebars are registered in a function, make sure you keep the register_sidebars inside the function (before the }). If not, I recommend looking at how it’s done in my code, and consider setting yours up like that. Now, here’s the block of code with 2 new sidebars added:
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
register_sidebar(array(
'id' => 'primary',
'name' => __('Main Sidebar'),
'description' => __('Sidebar used on most pages'),
'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>' . "\n\t"
));
register_sidebar(array(
'id' => 'topwidget',
'name' => __('Top Widget'),
'description' => __('Widget area between nav bar and content on index page'),
'before_widget' => '<li class="top-widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">' . "\n\t\t\t\t",
'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>' . "\n\t"
));
register_sidebar(array(
'id' => 'shop',
'name' => __('Shop Sidebar'),
'description' => __('Sidebar for shop custom post type'),
'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>' . "\n\t"
));
}
You’ll notice now that in addition to the primary sidebar, we’ve added shop and topwidget. You can call these whatever you want. Just use names you can remember, as these names will be used to call your new sidebars. So now we have 3 sidebars registered. If you were to visit the widgets admin menu of your site, all 3 would show up. You could add widgets, etc. But nothing will actually display anywhere. That’s because you haven’t called the sidebars anywhere yet. That’s the next step. Let’s set up those files.
The files are simple really. Just create them, and name them appropriately. The name isn’t too important, I just use descriptive names so I can call them easily. The important part is to call them sidebar-something.php. That naming convention allows us to call them later. For our example, we will set up a file called sidebar-top.php. Now, you can code the sidebars however you want. You can hard code stuff into the sidebar, etc. But if you want widgets, the important part is:
<?php dynamic_sidebar( 'topwidget' ); ?>
That brings in the widget area topwidget, which we set up in functions.php earlier. I like to give a default, so I set my sidebar-top.php file up like this:
<div id="top-widget">
<ul>
<!--Open Top Widget UL-->
<?php if ( is_active_sidebar( 'topwidget' ) ) : ?>
<?php dynamic_sidebar( 'topwidget' ); ?>
<?php else : ?>
<li class="top-widget" id="Pages">
<div class="rounded">
<h3 class="widget-title">Pages</h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</li>
<?php endif; ?>
</ul>
</div>
Which basically says if the topwidget sidebar is registered, and if there are any widgets set up, display them. Otherwise, display a list of pages. You can do whatever you want here, you can have a combination of widgets and hardcoded stuff if you like, etc. So now, we have the sidebars registered in functions.php and we have the files set up, the last thing to do is to call them.
First, here is how we call a sidebar. You probably already have the line:
<?php get_sidebar(); ?>
in your index.php and elsewhere. That calls sidebar.php, your primary sidebar. To call our example sidebar sidebar-top.php the line of code would look like this:
<?php get_sidebar('top'); ?>
That’s it. So to put it all together, in functions.php we registered some new sidebars. One of them was topwidget. We made a file called sidebar-top.php which included the dynamic topwidget sidebar. And now we are able to call those widgets by calling in the top sidebar. Simple right?
How do we use this? How do we place the sidebars on different pages? Well, there are 2 simple methods. One way is with page templates. For instance I have a shop set up, which I want to use different sidebars for. So I made a page template. To create the template, I simply made a copy of index.php and renamed it shop.php. I then added this header to the top.
<?php /* Template Name: eShop Template */ ?>
I also included come custom queries, etc to call in the proper posts. Then I made a page called Shop, and assigned it that page template. Then I edited the code for shop.php and swapped out the call to get_sidebar from the default sidebar to the shop sidebar. That’s one way to do it. But what if you want to change up your sidebar based on page IDs. For example, on your page view, you want page ID 11 and 21 to each have their own sidebar, and everything else to have the default. Well, in page.php you would use a conditional like this:
<?php if( is_page('11') ) : ?>
<?php get_sidebar('customsidebar'); ?>
<?php elseif( is_page('21') ) : ?>
<?php get_sidebar('anothersidebar'); ?>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
And I think that covers it. You can use all sorts of conditionals to display sidebars. In single.php, page.php, index.php, etc. Stuff for custom post types, categories, etc. So play around and enjoy.
I hope I didn’t confuse anyone…I tend to type as I think and maybe float around alittle, but the info is all here. If you have any questions, as always, send ’em my way and I’ll see if I can help!
Hi,
There is a plugin that works in the way you explain in the post, and it allows to create all the sidebars you need without any coding:
Custom Sidebars
From the admin area it is possible to assign the sidebars to posts, pages, categories, post types…
Having a look at it it’s really a worthy try!!
Cheers
Yeah there are a few plugins that can do a variety of things with sidebars and widgets. Widget Logic is another good one. Thanks for the info! I was showing how I do it, as I’m absolutely not interested in using any plugins for theme related stuff. Personal preference!
Yes.. But, plugins creates more problem than it solves. Most of the plugins are generalized to use for multiple purposes and that results in more code + processing power.
Most of the plugins are so badly written that customers dont understand any difference until site becomes big.
Thanks so much for this. I wasted a lot of time on the WordPress explanation. I finally found your tutorial and got it working in minutes!
Hey thanks for taking the time to comment. I’m glad you found this tutorial useful! I’m just starting to write things that I’ve learned about WordPress, and I really enjoy hearing that I’ve helped someone.
Hi, this is great stuff. But I found out the hard way that because the child theme’s ‘functions.php’ file always loads before the parent theme’s ‘functions.php’, it is necessary to remove the parent theme’s action, replace with the child theme’s newly-named action and tie it to the init hook. In fact, until I did this, no matter what I copied and pasted into my child theme’s functions resulted in the White Screen of Death. This is pointed out in comments in Theme twentyten’s ‘functions.php’ file, but being new to this game, I couldn’t quite understand it. Reading the codex, it made a little more sense, so I tried it out:
Worked for me, anyway. Thank you very much : )
Thanks for taking the time to comment @Das, and especially for leaving us some valuable code examples! When I wrote this article, I was fairly new to child themeing myself! Since then, I’ve started my new site, VoodooPress.com. I get into the nitty gritty of child theming a lot more over there. The whole website is just me writing articles about WordPress, and especially Child Themes as I make one. So there’s a variety of articles on overriding functions, etc. Check it out if you need more info in the future!
Well, now I’m looking for help to restyle my alt widget areas. I’ve created the new widget areas, and placed one into the main content of my index.php. Tried creating new style definitions for this particular widget area – mainly I want to get rid of the list bullets. Tried ‘list-style: none’ with every one of the widget css definitions. Not working. Main problem – from what Firebug shows – is that the widget belongs to class xoxo. In my file ‘sidebar-content.php’ I’ve removed reference to that class; and there’s no such string in either parent theme’s or child theme’s functions. The widget I’m calling to the area is a blogroll. Is there any way to remove the xoxo class attached to this widget from within the theme twentyten, using perhaps a filter? Also, how can I resize the widget widths to allow them to fill up the widget area – or will they automatically do so?
What css is applied to xoxo? Looking through twenty ten’s style.css, it doesn’t have any styling applied to it. So that shouldn’t cause any issues really? But if you are having trouble overriding any default styling, such as the list-style, you may just need to get more specific with your css. I had a similar problem with my ‘related posts’ option I added. You can see that here:
http://voodoopress.com/2011/03/adding-related-posts-links-to-a-twenty-ten-child-theme-in-functions-php/
I couldn’t override certain styles in my .related box I had added. As soon as I changed that up to #content .related all my problem styles took. So I assume you added a new widget area, and it has an overall div or whatever around it. You just may need to really target it using multiple selectors. You can see how specific I had to get on my related title in that example. Also, I would think your widget area would automatically become the width of whatever parent element you put it in. So you should be fine, as long as you aren’t leaving any selectors in there which references any css with width limiting code.
Thanks, your answer worked! I ended up declaring #main .alt-widget-area ul {list-style:none} and #main .alt-widget-area ul ul {list style:square} and that took care of it!
According to Wikipedia:
Examples of uses for xoxo includes playlists, blogrolls…
Anyway, playing with the CSS as you suggested has solved the problem! Thanks again. : )
Hey I’m glad it worked out for ya! And thanks for that little tidbit of information, I had been wondering what was up with xoxo, but not enough to google it myself apparently!!
I used exactly this code in a twentyten child theme. It works, the new widget areas pop up in my admin screen. However twentyten’s native widget areas are still there. Why? I thought this code removes them.
I think the conversation below will help you. You have to bring your action in with a priority of 11 to override twentyten’s behaviour.
Rev Voodoo, the ‘remove_action’ string in child theme’s functions.php doesn’t actually remove (delete) the parent theme’s sidebars; it seems only to disable them – but they are still accessible thru the backend.
Of course, deleting the sidebars from the parent theme’s functions.php does remove theme from the backend, but that’s not really a solution in view of the fact that upgrade is going to overwrite the parent theme’s functions.php and put back the default.
How to get rid of the default sidebars altogether but still allow alternative sidebars in the child theme?
There’s no doubt an obvious solution, right in front of my eyes…
Found the solution over at http://wpengineer.com/2049/wordpress-child-themes-remove-widget-areas/, scroll down to comments by Justin Tadlock. In child theme’s functions.php, tie onto the ‘widgets-init’ hook with priority of ’11’. Like this:
I tested only removal (deletion) of the primary widget area, and it did disappear from the backend. Removing primary and secondary widget areas means adding those areas to the function:
I’m glad you reported this back! I actually only just discovered the answer myself very recently. It was when trying to add post formats to a twentyten child theme. I was having the same problems, getting the original ones from the theme, rather than my custom ones. By default twentyten registers stuff with a priority of 10. So if you want to override actions from the parent theme, you need to bring in your stuff (be it sidebars or formats) after the parent theme sets them up, so that would be at priority of 11.
Thank you for this. I have been trying to figure out how to add a menu to my header and this looked like the answer. I have been trying to get it to work for a while now. I discovered by accident that the php file I had created was full of extra code that had been added by Dreamweaver. Once I removed it everything worked perfectly! Thanks again.
Sure, glad you liked the post. http://voodoopress.com/2011/04/add-a-widget-area-under-your-first-post-great-for-ads-or-pictures/ Here’s another one if you’d like to check it out. An even simpler way to add a widget area anywhere you want!!
Or… for a codeless approach you could try The Graceful Sidebar Plugin. This plugin lets you put custom content on each page or post which appears in the sidebar.
Enjoy!
Mike
Sure, there’s also the widgets logic plugin (I think it’s called). I just tend to avoid plugin overhead where not needed, personally.
I have been trying to add code to the end of page templates to load a sidebar based on page ID and to also load the sidebar from a folder in my root directory instead of the theme folder. I succeeded with the following code in older studiopress themes (would also work on other themes I am sure).
I would think this would work for post ID’s as well
You can also use the page slug name but it is not a good idea I think just in case you change this later – direct or indirectly
This code takes sidebar files from the root directory of the site so your WP Appearance Editor does not get clogged up with sidebar files (just means you have to edit these files manually in a text editor).
You could probably apply one sidebar to several page ID’s in one if statement.
Now here is the question, is there a more efficient way to code this in the event that one category of pages (vegetable page template in this case) may exceed a reasonable amount e.g. 100 + pages.
Just want to make sure I am not using code that could mess up the site later on when it gets much larger or if I use this code in a site that could be larger.
If you included any code here, it didn’t show up. Also, you could put all your sidebars in a folder in your theme folder any they shouldn’t show up in the editor. I personally would always include anything to do with my theme in my theme’s folder somewhere.
I hope this thread is still alive as i need help in this area. in my case i do not want to delete the default sidebars, i simply want to register a new sidebar that i will place on top of the content area just below the navigation bar for a banner ad. Can anyone please help me with this?
Thanks in advance.
THreads never die here, or over on VoodooPress! I just take the weekends off to work on school. Anyway, th thread above doesn’t really delete or replace any sidebars, it adds more. You can use the above technique to add your sidebar. If you notice, I just register more sidebars. http://vudu.me/k Has even more info about registering extra sidebars. All you have to do is register the sidebar (widget area) in your functions.php, and then call it from where you want it!
Curious, how would you go about using this technique to specifically target custom post type single pages so that each each CPT single.php would have a custom sidebar of its own?
Couple of options for that!
You could use the template heirarchy…
http://codex.wordpress.org/Template_Hierarchy#Single_Post_display
SO if you had a variety of single templates for your post types, you could name each for the post type
single-product.php, single-something.php, etc
And within each template, just call to the appropriate sidebar for that post type
Or, if all the CPT single templates will be the same and it doesn’t make sense to make individual templates, you can use the conditional route I showed above using
http://codex.wordpress.org/Conditional_Tags#A_Single_Page.2C_Single_Post_or_Attachment
<?php if( is_singular('product') ) : ?> <?php get_sidebar('customsidebar'); ?> <?php elseif( is_singular('something') ) : ?> <?php get_sidebar('anothersidebar'); ?> <?php else : ?> <?php get_sidebar(); ?> <?php endif; ?>Bravo! I am a beginner and the practical examples were useful in helping me customise my sidebars. Could not find such guide until I finally found this thread. Great job!
Thanks for the kind words, and I’m glad you found this helpful! I have a variety of WordPress articles on this site, and I hope you’ll check out my WordPress specific site at http://voodoopress.com for all kinds of helpful tidbits!
Thanks! From a performance perspective, do you think it would better to have multiple templates or to use 1 sidebar file with conditional statements?
If there is any sort of performance difference, it would be extremely negligible. It’s a couple of php calls, and the same amount of code being output really. Whether or not we call out to an extra template is not taxing. Really, go with what you prefer in terms of code.
Thanks for sharing.
Thanks for the lovely post. I really enjoyed reading this.
Try this its easy http://www.wordpressguide.in/want-different-sidebar-for-different-category.html
Thanks for the tip. I can’t recommend any site which violates the WordPress trademark however.
http://wordpressfoundation.org/trademark-policy/
Specifically, WordPress cannot be used as part of any domain name.
I just can’t seem to get this to display on the TwentyTwelve theme header. Have I misread the implementation – I”ve added the code:
<?php get_sidebar('SidebarHeader'); ?>pointing at my .php file that I uploaded into the Theme after creation into the header.php file.
Have you also registered the sidebar in functions.php?
thanks
Thanks a lot!
Very clear and simple explanation of what i really need
Excellent, I’m glad you were able to find what you needed here!
Hi there Rev Voodoo – I wonder if you can help me.
I have created a child theme on the Free Responsive theme and wish to have a custom page with its own sidebar that allows for the use of different widgets to the standard page.
I have created a custom page template called page_sr_sat_xi.php which calls the side bar Sidebar SR SatXI using
<?php get_sidebar('Sidebar Sr SatXI'); ?>and a custom sidebar file called sidebar-sr-satxi.php which contains the code
<?php if (!dynamic_sidebar('sidebar-sr-satxi')) : ?>.
The parent themes functions.php calls various files from an includes folder, so I made a copy of the includes/functions.php and put that into an includes folder in my child theme. My added code looks like this:
remove_action( ‘widgets_init’, ‘responsive_widgets_init’ );
function responsive-child_widgets_init() {
// …..all the parent sidebar registrations first …
//register sidebars for custom team page templates
register_sidebar(array(
‘name’ => __(‘Sidebar Sr SatXI’, ‘responsive’),
‘description’ => __(‘Area 2 – sidebar-sr-satxi.php’, ‘responsive’),
‘id’ => ‘sidebar-sr-satxi’,
‘before_title’ => ”,
‘after_title’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”
));
}
add_action(‘widgets_init’, ‘responsive-child_widgets_init’);
My custom page template appears as an option, but is still displaying the usual sidebar-right, and my custom sidebar does not appear in the list on the Widgets admin page. Please could you help me understand why this might be? I’d really appreciate it! Thank you.
I have gone throgh the first step editing the functions.php to achieve a second sidebar (theme: Twentyfifth). I am not sure where to check if this New sidebar will show up on my Admin Panel. Only able to see the standard sidebar not the one I copied.
(function twentyfifteen_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘twentyfifteen’ ),
‘id’ => ‘engelsk’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘twentyfifteen’ ),
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
No other sidebar shows up to enable insert of widgets.
A little bit lost her about you are saying “If you were to visit the widgets admin menu of your site, all 3 would show up”. It does not with me.
Problem solved.