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' ); | |
| } | |
| } |
Tracy Smith says
Bill great tips you have, been perusing them all weekend (just starting with Genesis).
Follow up question. I was able to switch the sidebars in sidebar-content-sidebar layout by changing the first if statement above no problem. My follow up is how to make the left-side sidebar show up first in a responsive design then the screen is shrunk to the defined min-width?
So on a small screen from top to bottom, it would be header->nav->content->sidebar (left)->sidebar (right)->footer instead of the default header->nav->content->sidebar (right)->sidebar (left)->footer.
Bill Erickson says
You’ll have to change the actual markup of Genesis to make sure the sidebar you want is outputted in HTML first.
Gabrielle Laney says
I haven’t been able to get back to this issue for some time, just started working with it again and I discovered that the cause of the sidebar info showing up twice was the combination of the switching code here, plus Genesis simple sidebars, plus Genesis connect for Woocommerce. If I take away any one of those components it will work, the combination of the three causes the issue. Since I need both woo commerce and simple sidebars, I have had to compromise and use those two and make both sidebars the same size and swap out the content with simple side bars. It works well enough for this project. On others not so complicated I can use this code. Just wanted to confirm that code you gave works just fine, adding Genesis connect for woo messed it up.
Bill Erickson says
You’ll have to dig into each plugin and see how they are adding the sidebars. When unhooking the main sidebar, I often take the following approach so it will work even if they install Genesis Simple Sidebars: https://gist.github.com/billerickson/5134811
Danilo says
Hello, where i must insert this code? thx
John says
I was looking for a solution to use just the second sidebar on some pages. So I just needed the first remove action…
remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ );
Thank you so much!
Raju Gautam says
Hi Bill,
How can I place the sidebar (primary sidebar) in the main and secondary in the side bar if I have selected the layout content-sidebar ? I am just pulling my hair since 5/6 hours but no luck yet 🙁
Thanking you in advance ! Happy New Year 🙂
Bill Erickson says
Something like this? https://gist.github.com/billerickson/8288152
Karlo says
Hi Bill,
thanks for this tutorial, it’s very useful.
I have one question, is it possible to change name and description of default sidebars?
Bill Erickson says
Not really. Your best approach is to unregister_sidebar(), then re-register with different names and descriptions. If you keep the ID the same, everything else in Genesis will work with your newly named sidebars.
Here’s a plugin I wrote that changes them to Left Sidebar and Right Sidebar, and updates the page templates to put them in the right spot: Genesis Left Right Sidebar
Karlo says
Thanks Bill,
I will try your plugin.
Ana says
Glad I stumbled onto this site!
Do you know if changing the Genesis default layout from 2 column to 3 column (in the “theme settings”) will “break” the site. I have basic html knowledge and haven’t upgraded to the latest WP and G versions because I am afraid to break my blog. Please help!!
Thanks!!!
Bill Erickson says
It shouldn’t break the site, as long as the theme was designed to work with three columns (if it’s an option, the theme should work with it)
Jeremiah says
If you’re using a child theme it’s possible to break your layout when updating genesis if you didn’t create the child theme properly. Additionally, if you’ve made changes to the Genesis core theme CSS style sheet, those will be overwritten when you upgrade genesis. Also if you added code to your child theme functions.php file to enable html5 support on an older version of genesis, you’ll need to remove that line from the child theme functions.php file after upgrading to the newer version of genesis. Always make backups of your theme files and database when upgrading in case anything goes wrong. It’s not hard to revert an update if you’ve taken the proper precautions and made backups before updating.
Suuzen says
1. I installed and activated this plugin with the StudioPress Genesis 2.0 theme Eleven40 Pro, but the plugin does not seem to work. Do I need to change the plugin so it will work with 2.0? I would like to keep my pages menu permanently on the left.
2. Is there anything I can add to either the plugin or functions file so that the left sidebar will load before the plugin, so that it will automatically move above the content on media screens?
Bill Erickson says
I haven’t used that theme, but the hooks have not changed between Genesis 1.9 and 2.0 for this code, so that shouldn’t be a problem.
Try installing Genesis Left Right Sidebar.
Suuzen says
‘Sorry, that should have said “2.0 . . . so the left sidebar will load before the content.”
Jeremiah says
Thank you for the write-up. I needed to swap the primary sidebar with the secondary on 2 column layouts since the 3 column layout uses the secondary sidebar on the left hand side of the screen, but the two column uses the primary sidebar on the left hand side.
Because I’m using a 3 column layout on the home page and a 2 column on some other pages, it presented somewhat of a confusing interface for the user when the left sidebar elements suddenly changed to the elements that were in the right sidebar.
I edited your code and was able to achieve what I was after, so thanks again.
https://gist.github.com/billerickson/9076974
Bill Erickson says
You might also try my Genesis Left Right Sidebar plugin. It does the switch for you, as well as rename Primary/Secondary Sidebar to Left/Right Sidebar
Jeremiah says
Cool, thanks for the tip. I try to avoid using plugins for simple swaps like this, since I can’t be quite sure how they’re going about making the swap without reading all of the plugin code, which doesn’t really save any time. 😀