Genesis Theme Tutorial: Get Rid of the Primary Sidebar (but Keep the Secondary!)

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!