You are here: Home / Genesis / Genesis Split Sidebars

Genesis Split Sidebars Make the primary sidebar split into two equal sidebars

2011-08-12 by 15 Comments

Visually split the primary sidebar in Genesis into two further sidebars, each with their own widget area. For more info about genesis_register_sidebar() see the StudioPress tutorial on How to Register a Widget Area.

PHP

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 
<?php
 
add_action( 'genesis_after_sidebar_widget_area', 'child_split_sidebars' );
/**
 * Add two sidebars underneath the primary sidebar.
 *
 * @since 1.0.0
 *
 * @author Gary Jones
 * @link http://code.garyjones.co.uk/genesis-split-sidebars
 */
function child_split_sidebars() {
 
	?>
	<div class="sidebar-bottom">
 
		<div class="sidebar-bottom-left">
			<?php dynamic_sidebar( 'sidebar-bottom-left' ); ?>
		</div><!-- end .sidebar-bottom-left -->
 
		<div class="sidebar-bottom-right">
			<?php dynamic_sidebar( 'sidebar-bottom-right' ); ?>
		</div><!-- end .sidebar-bottom-right -->
 
	</div><!-- end .sidebar-bottom -->
	<?php
 
}
 
// Register the sidebars with WordPress
genesis_register_sidebar(
	array(
		'id'          => 'sidebar-bottom-left',
		'name'        => __( 'Sidebar Bottom Left', 'theme-text-domain' ),
		'description' => __( 'This shows up underneath the primary sidebar.', 'theme-text-domain' ),
	)
);
 
genesis_register_sidebar(
	array(
		'id'          => 'sidebar-bottom-right',
		'name'        => __( 'Sidebar Bottom Right', 'theme-text-domain' ),
		'description' => __( 'This shows up underneath the primary sidebar.', 'theme-text-domain' ),
	)
);
view raw functions.php This Gist brought to you by GitHub.

CSS

1 2 3 4 5 6 7 8 9 10 
.sidebar-bottom-left,
.sidebar-bottom-right {
	display: inline;
	float: left;
	width: 212px;
}
 
.sidebar-bottom-right {
	float: right;
}
view raw style.css This Gist brought to you by GitHub.

The Result

Filed Under: Genesis

Comments

  1. Angie says:
    2012-01-05 at 04:12

    Hi,

    I tried using this on one of my sites and I keep getting this error: Parse error: syntax error, unexpected $end in C:\xampp\htdocs\wordpress\wp-content\themes\copyblogger\functions.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

    Reply
    • Gary says:
      2012-02-05 at 17:43

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

      Reply
  2. Dale says:
    2012-02-17 at 00:17

    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

    Reply
  3. Autum says:
    2012-05-31 at 21:41

    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.

    Reply
    • Gary says:
      2012-06-01 at 09:12

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

      Reply
  4. Bill says:
    2012-09-28 at 18:39

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

    Reply
    • Gary says:
      2012-10-01 at 14:37

      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.

      Reply
  5. Jeni says:
    2012-10-19 at 03:20

    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

    Reply
    • Gary says:
      2012-10-30 at 21:47

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

      Reply
  6. Katy Widrick says:
    2013-02-21 at 03:48

    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.

    Reply
    • Gary says:
      2013-02-23 at 10:50

      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.

      Reply
  7. Kat says:
    2013-04-04 at 02:38

    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.

    Reply
  8. Kat says:
    2013-04-04 at 14:51

    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?

    Reply
  9. Kat says:
    2013-04-04 at 21:05

    Gary- nevermind – got it!

    Reply

Speak Your Mind

*