One of the great features of Genesis is the ability to change between many different page layouts on a per-page basis. You can have 1, 2, or 3 columns, and specify the order of the sidebar areas and content area.
But one issue you might have is which sidebar shows up in each of the sidebar areas. For example, if you select “Sidebar-Sidebar-Content,” it will be arranged as “Secondary Sidebar – Primary Sidebar – Content Area”. If you happened to have your site navigation in the Primary Sidebar, it’s now in the middle column of the page.
Before trying this, always check beforehand, if what you’re trying to do can be accomplished with CSS first. More often than not, you can re-order the sidebars correctly by simply shifting the way elements of the layout are floating. This should only be used if you need the Secondary Sidebar between the Primary Sidebar and the Content Area.
Here’s how to specify which sidebar shows up in which sidebar area on a specific page template.
| <?php | |
| add_action( 'genesis_after_header', 'be_change_sidebar_order' ); | |
| /** | |
| * Swap Primary and Secondary Sidebars on Sidebar-Sidebar-Content | |
| * | |
| * @author Bill Erickson | |
| * @link http://www.billerickson.net/switch-genesis-sidebars/ | |
| */ | |
| function be_change_sidebar_order() { | |
| $site_layout = genesis_site_layout(); | |
| if ( 'sidebar-sidebar-content' == $site_layout ) { | |
| // Remove the Primary Sidebar from the Primary Sidebar area. | |
| remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); | |
| // Remove the Secondary Sidebar from the Secondary Sidebar area. | |
| remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' ); | |
| // Place the Secondary Sidebar into the Primary Sidebar area. | |
| add_action( 'genesis_sidebar', 'genesis_do_sidebar_alt' ); | |
| // Place the Primary Sidebar into the Secondary Sidebar area. | |
| add_action( 'genesis_sidebar_alt', 'genesis_do_sidebar' ); | |
| } | |
| } |
Julie says
Hi Bill
Thanks very much for this… is there a way to specifically apply this just to a category or page rather than the whole site – ie I want a three column layout for my blog where the rest of the site is two column. At the moment the secondary sidebar is moving to the place where the primary sidebar is located on the rest of the site. I am using layout extras for the blog to default to 3 columns (sidebar-content-sidebar).
thanks
Bill Erickson says
Yes, just change the if statement to include your conditional. Ex:
if( 'sidebar-sidebar-content' == $site_layout && is_category() )Shelley says
Is it possible to do this in Simple Hooks so that it can be applied to one site in a network instead of to all of them?
Bill Erickson says
I assume so, but I’ve never used simple hooks.
alex vasquez says
Hey Bill,
As usual, awesome stuff. This doesn’t seem to work when defining sidebar-content-sidebar, even if I’ve selected that as the default layout in Genesis settings.
Bill Erickson says
Not sure what issue you’re having. I’m actually using this on a project I’m building right now. Are you sure you don’t have some other code that’s overriding it? Are you using Genesis Simple Sidebars? If so, you’ll need to unhook ss_do_sidebar and ss_do_sidebar_alt
Carmela Belgado says
Two years later to the conversation, but just wanted to say this worked for me and thanks!
Seth says
Hi Bill,
This works great, but the widths are off. I want the secondary sidebar to be narrow and the main sidebar to be wide. How do I change the CSS for just this one template?
Bill Erickson says
View the source of the page, and look at the body classes. If the layout is Content Sidebar Content, you should see a .content-sidebar-content body class. Use that class to style things specifically for this template.
Susan says
Thank you so much for this tutorial!! You just saved me a huge headache. 🙂
Gabrielle Laney says
This is a very good tutorial, however I am using Genesis simple sidebars so my sidebar content is showing up twice in both sidebars. I can’t figure out how to “unhook” the simple bars with the code mentioned above. I also asked how to do this at the StudioPress forum, but have not gotten an answer.
I would be most grateful if you could post the complete code to unhook the simple sidebar. Thanks!
Bill Erickson says
Simple Sidebars removes the genesis function and replaces it with its own. So in the above code, change genesis_do_sidebar with ss_do_sidebar, and change genesis_do_sidebar_alt to ss_do_sidebar_alt.
Gabrielle Laney says
Hi Bill, Thanks for the reply. I did put the code in like that. Does this code go into the functions.php file or is it to go into a template file? That may be my problem. Appreciate your support.
Gabrielle Laney says
Oh, and I forgot to add, I am using Woocommerce and Genesis connect for woo commerce
Bill Erickson says
It can go in your functions.php file if you want it applied sitewide, or a specific theme file if you only want it applied there (ex: put it in front-page.php if you only want them switched on the homepage).
If that doesn’t work, I’m not sure what the issue is. You might try leaving a message in the StudioPress support forum in the section Genesis Simple Sidebars.
Gabrielle Laney says
Thank you, I will try it in a template, I only want this on one section of the site. If it doesn’t work I will leave a message at StudioPress.
Daniel says
I feel like the answer to my question is in here somewhere, and yet I’ve messed around a bit and can’t get what I want.
What I want is to have a sidebar-content layout, however I’d like that left sidebar to be the smaller alt sidebar. Is there an easy way to do this?
Thanks for the write-up.
Daniel
Bill Erickson says
This simply replaces the content of the sidebar with the content of sidebar-alt. If you want it to “appear” smaller, you’ll need to update the CSS for that layout (ex: .sidebar-content .sidebar { width: 150px;} ).
Adam Nguyen says
Awsome tips. thanks for sharing!