I’m working on a project using the most excellent Education Theme from StudioPress. I love the double sidebar (content/sidebar/sidebar) layout on this theme, but found myself needing to get rid of the primary sidebar and go full-width on a couple of pages. The catch? I wanted full-width in the main area, while keeping that secondary sidebar hanging off the edge (essentially a content/content/sidebar layout).
The Genesis Framework makes it easy enough to change the layout on a page by page basis, or even remove the primary or secondary nav via filter hooks. But how can I ditch the primary sidebar while keeping the secondary?
I found a CSS solution that did the trick. Ready? Here goes!
Setting the Stage – Remove the Primary Sidebar from a Single Page
Remember, I actually want my primary sidebar on the rest of the site. But for THIS page, I want the primary sidebar to go away completely so that I can use that space for my main content.
I could use an action hook like this…
if ( is_page('special-page') ) {
/** Remove default sidebar */
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
}
…but that only makes the sidebar disappear and leaves a gaping hole in the layout.
So that’s not the solution.
The Fix
Step 1: Use Body Classes to target your page via CSS
We’re going to go with a CSS-only solution. I want to be able to target my special page via CSS, so I’m going to use a Body Class. First, I’ll tell you how to add a body class to your own special page, then I’ll tell you what it does.
Scroll down to the bottom of any page or post on your site running on the Genesis Framework and you’ll find the Layout Settings metabox. It looks like this:
Next we need to specify a name for our custom body class. You can name it anything, just don’t be too generic. I’m calling mine “special-page.”
After you’ve entered your body class, save your post/page and go view it in a browser. A little check of the source code shows that my custom body class (“special-page”) has been added:
Now we’re ready to add some CSS that targets this specific page.
Step 2: Add Custom CSS to change the width of your Page
This solution is so easy, you’ll wanna slap your momma. Actually no, don’t slap your momma. But it is easy!
Use the custom body class we created to target the sidebar and content widths on this specific page, like this:
.special-page #sidebar {display: none;}
.special-page #content {width: 85%;}
The first line made the primary sidebar invisible, like Wonder Woman’s invisible jet. The second line tells the content area to scooch on over and take up more room. I went with 85% because it worked with my design, but you could play with that number.
Here’s the result:
That’s all I’ve got
I don’t know if this officially qualifies as a Genesis Theme Tutorial since my solution is a hack, but it works! If you have a different solution for accomplishing the same layout, please leave a comment below!
Haven’t messed around with this theme, but it could come in handy in the future if I ever do… Great job! Bookmarked!
Thanks Ozzy! It’s a fun theme layout. Glad to make your bookmark.
Hi Carrie,
Adding CSS to change the width of page is easy than I thought. Thank for your tutorial.
Will take a note.
Hi Carrie
I actually Googfled “slap your momma” and it brought me here – glad it did.
That’s a pretty neat solution and one most people would find easy to understand and implement.
Good to see you’re running the Subscribe to comments plugin – a great way to get the conversation moving.
Right who was #2 in the SERPS for “slap your momma”
Haha – I certainly wasn’t trying to optimize for that term!
I’m using Jetpack now to manage comments/post subscriptions. What are you using? I don’t *love* Jetpack, but I do love that particular feature…
I’m using GASP plugin for antispam and subscribe to comments plugin to get people involved.
I’ve just closed comments on one of my other sites because of the amount of spam I was getting – I think that the spammers have cracked the GASP plugin.
Not sure what to try next!
I have thought about Jetpack, but it comes with lots of things that I’ll never use.
Nice post Carrie. Thanks! We’re enjoying “long walks on the beach” (among other things) this week, but will look forward to implementing your Genesis tutorial magic next week when we’re back and resuming construction. Cheers, Steve & Sally
Hey! Google is supposed to block honeymooners from reading technical posts.
We’ll see you on the flip side!
Excellent! I’m wanting to do the same thing on another site using Education. Shoulda known to check here first without even having to Google. Thanks for being a Genesis braniac.
Glad I finally know an answer to a Dorian question.
Sweet! I’m just putting the finishing touches on my site and had already resigned to not being able to do just what you described. God, I really am loving this Education Theme.
Hey Carrie, I wanted to remove the primary sidebar from my home page and make it full width. The way I ended up doing it was adding your function to my home.php to get rid of the sidebar on the home page only, then using the Genesis Layout Extras plugin, which allows you to change the layout for specific pages, I selected full width content for the home page.
You can see the result at http://responsivethemeshq.com
Just thought you might want to know of a slightly different (and possibly even hackier!) way of doing things.
Ha! There are lots of ways to skin the cat, so to speak.
Thanks for sharing.
Thank you so much for sharing this little trick. I am using it right now on a custom page where I wanted full width without any sidebars and it was a snap. Awesome!
Great tips!
I’m also using the Education theme by Studiopress and I’m looking to get rid of the primary sidebar on Category and Tag archives. I’m using the Rich Text Tag plugin (http://wordpress.org/extend/plugins/rich-text-tags/) so I can use a WYSIWYG editor to style the category and tag descriptions. But on the Edit Category and Edit Tag admin pages, there is no option to add a custom body class. Any ideas on what to do?
Thanks…
Since those are two specific pages you’re targeting, you can probably use the body class that’s already there.
Pull up your category archive page in the browser and do a view source and see what classes are already in the BODY tag. Among other classes, you should see
class=”archive category….
So you could target that in your CSS like
.archive.category #sidebar {display: none;}
.archive.category #content {width: 85%;}
I didn’t test that, but you get the idea. Same thing with the tags page.
Carrie
I figured out how to do it with the functions.php file. This adds a new layout, essentially accomplishing the same thing you did with CSS:
//** Add sidebar-alt-content layout **//
genesis_register_layout( ‘sidebar-alt-content’, array(
‘label’ => ‘Small Sidebar/Content’,
‘img’ => CHILD_URL . ‘/images/sidebar-alt-content’,
) );
add_action(‘genesis_before’, ‘gt_new_custom_layout_logic’);
function gt_new_custom_layout_logic() {
$site_layout = genesis_site_layout();
if ( $site_layout == ‘sidebar-alt-content’ ) {
// Remove default genesis sidebars
remove_action( ‘genesis_after_content’, ‘genesis_get_sidebar’ );
remove_action( ‘genesis_after_content_sidebar_wrap’, ‘genesis_get_sidebar_alt’);
add_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_get_sidebar_alt’ );
}
}
This post was very helpful: http://genesistutorials.com/understanding-genesis-layout-options/
Seth, awesome! Thank you for sharing your solution!