Visually splitting the primary sidebar in a Genesis Framework child theme into two smaller sidebars is a powerful design feature. It allows prominent important areas to apparently span a double width, before breaking down into narrower columns for other widget content.
Get A Split Sidebar
If you’re thinking “How did I get a widget to span two sidebars?” or “What CSS do I use to split a sidebar?”, then you’re over-thinking the problem. We don’t actually split a sidebar, but we introduce two new widget areas that are completely independent, and then just display them below the main one instead. Kudos to Brian Gardner for originally suggesting this approach after I was trying to recreate the Custom Content Box above the two sidebars as it appeared in Thesis.
By using new widget areas, users get clear guidance on where their widget will appear without having to work out if the new widget will appear in the normal sidebar, or in one of the split sidebar areas.
Here’s what we’re trying to achieve (screenshot from an client site I did):
Ready for some code?
PHP
Add the following to your child theme function.php file:
| <?php | |
| // Don't include the <?php above | |
| add_action( 'after_setup_theme', 'prefix_register_split_sidebars', 5 ); | |
| /** | |
| * Register the two widget areas that make up our visually separated sidebar. | |
| * | |
| * @author Gary Jones | |
| * @link http://gamajo.com/split-sidebar-genesis | |
| */ | |
| function prefix_register_split_sidebars() { | |
| genesis_register_sidebar( | |
| array( | |
| 'id' => 'prefix-split-sidebar-left', | |
| 'name' => __( 'Primary Sidebar Bottom Left', 'textdomain' ), | |
| 'description' => __( 'This shows up underneath the primary sidebar.', 'textdomain' ), | |
| ) | |
| ); | |
| genesis_register_sidebar( | |
| array( | |
| 'id' => 'prefix-split-sidebar-right', | |
| 'name' => __( 'Primary Sidebar Bottom Right', 'textdomain' ), | |
| 'description' => __( 'This shows up underneath the primary sidebar.', 'textdomain' ), | |
| ) | |
| ); | |
| } | |
| add_action( 'genesis_after_sidebar_widget_area', 'prefix_display_split_sidebars' ); | |
| /** | |
| * Add two sidebars underneath the primary sidebar. | |
| * | |
| * @since 1.0.0 | |
| * | |
| * @author Gary Jones | |
| * @link http://gamajo.com/split-sidebar-genesis | |
| */ | |
| function prefix_display_split_sidebars() { | |
| ?> | |
| <div class="split-sidebars"> | |
| <?php | |
| genesis_widget_area( 'prefix-split-sidebar-left' ); | |
| genesis_widget_area( 'prefix-split-sidebar-right' ); | |
| ?> | |
| </div> | |
| <?php | |
| } |
The first function registers the two widget areas. For more info about genesis_register_sidebar() see the StudioPress tutorial on How to Register a Widget Area (login needed).
The function is attached to the after_setup_theme action hook at priority 5 so that the split sidebar widget areas appear after Genesis has registered the Primary and Secondary sidebars, but before the footer widget areas.
The second function handles the output of the widget areas. Here we use the genesis_widget_area() function. This function is a wrapper for the WordPress function dynamic_sidebar() but it sets up the default markup for before and after the widget area and calls two contextually-named action hooks before and after the dynamic_sidebar() call, making it more flexible for plugins or later code. You can see that the single argument being passed to each call is just the ID of the widget areas we registered in the first function.
The second function is attached to the genesis_after_sidebar_widget_area hook, which is what determines the location of the split sidebar output (after the Primary sidebar). If it was attached to the genesis_before_sidebar_widget_area then the split sidebar would be above the Primary sidebar.
Attaching it to genesis_before_sidebar_alt_widget_area or genesis_before_sidebar_alt_widget_area would make it appear before or after the Secondary sidebar instead.
CSS
The CSS is relatively trivial but might need adapting to fit in to your existing theme styles. We give each widget area half of the available width, and float them so they fill in the space instead of the second one stacking underneath the first.
http://gist.github.com/GaryJones/1698319#file_style.css
If you need to target the left sidebar you can use the .split-sidebars > .widget-area:first-child {} selector, and .split-sidebars > .widget-area:last-child {} for the right sidebar.
Conclusion
You can now register new widget areas, and output them above or below the primary and secondary sidebars, giving a “split sidebar” appearance. If you have any questions, let me know in the comments.
Hi,
I tried using this on one of my sites and I keep getting this error: Parse error: syntax error, unexpected $end in C:xampphtdocswordpresswp-contentthemescopybloggerfunctions.php on line 90 is there something I am missing? I am only getting this once I install the code in my functions file.
Thanks
“Unexpected $end” usually means that a closing } is missing. I’ve updated the post to use code hosted at Github, so you can try clicking the “view raw” link, and ensure you copy and paste all of it.
In-genius.
I floated both left extended the width to 300px and was able to change the background colour of the widget in that SideBar.
Thank You Thank You Thank You
This needs to be more step by step, because I still can’t get it to work. I can register the widgets fine. It’s the code above it. Where does it go? Because I keep getting errors no matter where I put it.
Hi Autumn,
All of the PHP code (registering of sidebars, and the code above it) goes into your functions.php, so just copy and paste the whole lot there.
The CSS code obviously goes into your style.css file (see the bottom right of each code block to see the filename).
Awesome! Just what I was looking for! I’d like to place the split widget area somewhere in the middle of the sidebar area, then resume the single column widget area. How would I accomplish that? (or am I being too greedy?)
You won’t be able to continue the top widget area, but you could just add in the markup and registration for a new widget area that follows after the split sidebars. See https://gist.github.com/3811839 (where I’ve renamed the split section from
sidebar-bottom-tosidebar-middle-, and added a newsidebar-bottom). Since thesidebar-bottomwon’t have any styles to make it half-width, it will naturally expand to be the full-sidebar-width.Fantastic. Thanks Gary. I can’t wait to implement this!
Hi Gary,
I’m trying to implement your solution for Bill, above, on a blog I’m working on. The sandbox site is up at http://freehomeschooldeals.theblogmaven.com . The child theme I’m using is News; when I add the code to functions.php, it breaks the site. I’d love to be able to add this split sidebar, though! Would you mind taking a look? I can send you the functions.php for the blog if you need it.
Thanks!
Jeni
Hi Jeni,
Did your sandbox site throw any errors? If it included line-numbers, how do they relate to the code you’ve pasted in?
(Remember, that you likely won’t need the opening
<?php– that’s just to get the code displaying here with correct syntax highlighting.)Gary,
Is it possible to execute this using hooks? I don’t mind changing my code but I may end up wanting to go back to a single sidebar later and I find it easier to do it through hooks.
Hi Katy,
This solution does use hooks – specifically the
genesis_after_sidebar_widget_areaaction hook, as seen at the top of the code snippet.Gary
I have been looking for this and I was so excited to find it but I can’t seem to get it to work. I pasted the top part from raw into Genesis Custom code, php and the css into same css area. I have Genesis Prose. Not sure what I’m doing wrong but the new areas do not appear in my widgets area.
Hi Gary-
I left a comment yesterday but I think it got wiped. I used this code as instructed (I have Genesis Prose, I put the php stuff in custom code php and css in custom code css). But the new widgets do not appear. Any advice?
Gary- nevermind – got it!
I did this, but I don’t see that there are sidebars I can add widgets to in the widget area. How can I tell if it worked?
Great little tutorial. This is exactly how I’ve done it before, good to know I was on the same path as the great Gary Jones!
I just wanted to say THANK YOU VERY MUCH.
I am getting the same error that Angie posted above, however, my error states there is an unexpected “}” at line 56, which happens to be the closing bracket of your code as well as the end of my functions.php file. Please help, thanks!
Check the rest of your code Jeff. Others have successfully implemented the code in this tutorial without any problem. I’ve just double-checked the code, and it all looks fine to me.
Thanks Gary, this is a useful post :). There is a small enhancement you can add so that there is no empty html if there are no widgets in there. Like…
// add conditional widget area to theme
add_action( ‘genesis_after_sidebar_widget_area’, ‘conditional_sidebars’ );
function conditional_sidebars() {
if (is_active_sidebar(‘conditional-sidebar’)):
?>
<?php
endif;
}
Gary,
Thank you for providing the code. Actually, I did as you advised. However, it is still giving a parse error like below. Parse error: syntax error, unexpected ‘<‘ in /home/halaltim/public_html/wp-content/themes/metro-pro/functions.php on line 151