Switch the Order of Genesis Sidebars (and Fix the CSS classes too)

One of the few limitations of the Genesis theme framework for WordPress is that there is no graphical option to choose which side of the page the primary sidebar will occupy when the sidebar-content-sidebar layout is used.

When the page layout is set to sidebar-content-sidebar the primary sidebar is placed on the right-hand side of the page.

Genesis Page Layout Options
Genesis Page Layout Options

What if we want the primary sidebar to be on the left-hand side of the content and the secondary sidebar to be on the right-hand side of the content?

The sidebar layout problem

When dimensions are set for the left and right sidebars, those dimensions follow the sidebar to whatever position it occupies. When the primary sidebar is set to 300px width then it will be 300 pixels wide whether it is left or right of the content.

What if we have the primary sidebar set at 300px width and the secondary sidebar set to 140px width and we want to use the sidebar-content-sidebar layout but with the primary sidebar on the left of the content and the secondary sidebar on the right of the content?

The primary-content-secondary layout is a non standard layout for Genesis so we need to use an action hook to switch the positions of the sidebars. The code for this goes into the theme’s functions.php.

add_action( 'genesis_after_header', 'vr_change_sidebar_order' );
function vr_change_sidebar_order() {
	$site_layout = genesis_site_layout();
	if ( 'sidebar-content-sidebar' == $site_layout ) {
		
		// switch sidebar positions
		remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
		remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
		add_action( 'genesis_sidebar', 'genesis_do_sidebar_alt' );
		add_action( 'genesis_sidebar_alt', 'genesis_do_sidebar' );
		
	}
}

The problem with switching the Genesis sidebar positions is that although the sidebars switch sides their CSS classes do not switch sides. So the primary sidebar is given the CSS class of sidebar-secondary and the secondary sidebar is given the CSS class of sidebar-primary. That means the sidebars and their content trade sides but the sidebar widths are wrongly applied.

The above code for switching the sidebar positions in the sidebar-content-sidebar layout results in a primary sidebar to the left of the content that – in our example – was 300px wide being now 140px wide and a secondary sidebar that was 140px wide being now 300px wide and positioned to the right of the content.

To restore their proper widths we need to add a little more code to correct the CSS classes applied to the sidebars and we need to insert a little CSS styling to adjust the width of the inner content area (CSS class .sidebar-content-wrap).

Here is that code…

Reposition Genesis sidebars properly

The code below needs to be put into your Genesis child theme’s functions.php file. This code repositions the primary and secondary sidebars, corrects each sidebar’s CSS classes and adds a little CSS styling to pages that use the sidebar-content-sidebar layout. You may need to adjust the CSS styling for your theme.

/* Switch Sidebar Order */

// Add custom styling to sidebar-content-sidebar layout
function vr_sidebar_content_sidebar_css() {
	$site_layout = genesis_site_layout();
	if ( 'sidebar-content-sidebar' == $site_layout ) {
			?>
				<style>
				.sidebar-content-sidebar .content-sidebar-wrap {
					width: auto;
				}

				.sidebar-content-sidebar .sidebar-primary {
					float:left;
					margin-right:auto;
				}

				.sidebar-content-sidebar .sidebar-secondary {
					float:right;
					margin-left:20px;
				}
				</style>
			<?php
	}
}
add_action('wp_head', 'vr_sidebar_content_sidebar_css', 99);
	
add_action( 'genesis_after_header', 'vr_change_sidebar_order' );
function vr_change_sidebar_order() {
	$site_layout = genesis_site_layout();
	if ( 'sidebar-content-sidebar' == $site_layout ) {
		
		// reposition sidebars
		remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
		remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
		add_action( 'genesis_sidebar', 'genesis_do_sidebar_alt' );
		add_action( 'genesis_sidebar_alt', 'genesis_do_sidebar' );

		// Add 'sidebar-secondary' class to, and remove 'sidebar-primary' class from, the left-hand <aside> sidebar
		function vr_add_left_sidebar_class( $attributes ) {
			$attributes['class'] = str_replace( 'sidebar-primary', 'sidebar-secondary', $attributes['class'] );
			// Next line commented out but left available in case needed later
			/* $attributes['class'] = $attributes['class']. ' sidebar-secondary'; */
			return $attributes;
		}
		add_filter( 'genesis_attr_sidebar-primary', 'vr_add_left_sidebar_class' );
		
		// Add 'sidebar-primary' class to, and remove 'sidebar-secondary' class from, the right-hand <aside> sidebar
		function vr_add_right_sidebar_class( $attributes ) {
			$attributes['class'] = str_replace( 'sidebar-secondary', 'sidebar-primary', $attributes['class'] );
			// Next line commented out but left available in case needed later
			/* $attributes['class'] = $attributes['class']. ' sidebar-primary'; */
			return $attributes;
		}
		add_filter( 'genesis_attr_sidebar-secondary', 'vr_add_right_sidebar_class' );
		
	}
}

If one of your sidebars falls under the content or falls below the secondary sidebar, change the CSS in the code to decrease the 20px margin in ‘margin-left: 20px’.

4
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Mr. Thi

Hello !
How to move the primary sidebar to secondary sidebar. I use Dynamik Genesis:

– Home Page: http://hoanggiapearl.com/en/ (Primary Sidebar – Content – Secondary Sidebar)

– Blog Plage, Shop,…: http://hoanggiapearl.com/en/store/products/category/high-grade-chain-pearls/ (Primary Sidebar – Content)

Thanks !

amsjazz

Thanks for your post! Unless I’m missing something, doesn’t the Genesis Layout Extras plugin do this for you?

Sahajahan

I found this problem, Which solution may I apply for fix my “genesis-sidebar-primary” Problem

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!