How To Add A Split Sidebar in Genesis

This tutorial was originally posted to http://code.garyjones.co.uk on 2011-08-12. The comments have been carried across to this site. It has been updated here with a more detailed description and improved code.

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):

Screenshot showing a split sidebar, with one sidebar split into two narrower sidebars

One sidebar, split into two (each with their own widget area)

Ready for some code?

PHP

Add the following to your child theme function.php file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<?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
}
view raw functions.php hosted with ❤ by GitHub

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.

Screenshot showing a list of widget areas

Sensible registration of the widget areas can determine the order in which they appear on the Widgets screen.

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.

1 2 3 4
.split-sidebars > .widget-area {
float: left;
width: 50%;
}
view raw style.css hosted with ❤ by GitHub

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.

Want to know what changed in Genesis 2.0?

Changes in Genesis 2.0

How many changes do you think happened in Genesis 2.0? 20? 50?

Not even close.

There were 131 in Genesis 2.0, a further nine in 2.0.1 and another 19 in 2.0.2. Finding them yourself and understanding why they changed is a massive impact on your precious time.

Changes in Genesis 2.0 documents them all in one handy resource with detailed explanations, screenshots and code snippets. It contains everything you need to know to get familiar with the new version, fast.

Get your two FREE chapters now!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. 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.

  2. 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

  3. 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).

  4. 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- to sidebar-middle-, and added a new sidebar-bottom). Since the sidebar-bottom won’t have any styles to make it half-width, it will naturally expand to be the full-sidebar-width.

  5. 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.)

  6. 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_area action hook, as seen at the top of the code snippet.

  7. 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.

  8. 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?

Trackbacks

Leave a Reply