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.

Genesis Primary Sidebar ExampleGenesis Primary Sidebar Example

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.

Genesis Primary Sidebar Gone

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:

Genesis Layout Settings

If you don’t see Layout Settings on your Genesis post or page, scroll up to the tip top of your page and look for the Screen Options tab on the right. Make sure Layout Settings is checked!

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:

Custom Body Class

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:

Full Width Content

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!

Comments

  1. says

    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”

    • Carrie Dils says

      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…

      • says

        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.

  2. says

    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

  3. Dorian Speed says

    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.

  4. says

    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.

  5. says

    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.

  6. says

    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!

  7. says

    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…

    • says

      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

      • says

        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/

  8. says

    Thanks. I too used the remove hook function to remove the sidebar and was pissed off when it did not go. But after reading this post i slapped myself hard for not doing this myself :p

  9. says

    I used an action. 1 line of code in the functions.php that accomplished the same thing. No CSS adjusting necessary for my genesis theme “education”.

    /** Remove default sidebar */
    remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ );

    • says

      That works, too! In my case I was only wanting to get rid of it on select pages and not across the board. But I suppose you could use an add_action, with a custom function & conditionals to do the same thing. Many ways to skin the cat, so to speak. :)

  10. says

    Hi Carrie,

    Found your page via the Studio Press community. I had been looking for a way to hide the primary sidebar on the home page of the Education Theme. I couldn’t find a way to impliment your solution on the Home page as there is no place to add a custom body class for the home page in Education.

    As an alternative I implemented the code (like Heather) inside my home.php page. It worked….

    BUT I have one question. How do I widen the content frame? In your example, since you identified the body class, you were able to identify the content frame only for that page. Since there doesn’t seem to be a way to identify a custom body class for the home page, I don’t know how to widen the content frame.

    I suppose there may be a way to do this in home.php (name the body class that is) but I don’t know how. Alternatly if I had a CSS select that limited the change to home page, that would work too. I feel like I’m 90% of the way there. Can you help me close the loop?

    Thanks very much. This page has been quite a help.

    ps. I tried adding the Genesis Layout Extra’s plugin like Charlie Livingston suggested but none of the options resulted in widening only the content frame… the slider got wonky etc.

    John C

    • says

      I GOT IT!!!!

      #home-featured ~ #content {width: 90%;} This worked.

      In summary, I added this to my home.php:

      /** Remove default sidebar */
      remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ );

      And added this to my style.css

      #home-featured ~ #content {width: 90%;}

      I always have to pop over to Chris Coyier’s fine CSS website to this page on CSS Selectors:

      http://css-tricks.com/child-and-sibling-selectors/

      All GOOD!

  11. wdbmagic says

    Hi Carrie – found your article and found it very helpful in customising the decor theme in the same way as you were using the education theme from Studio Press. I wanted to use the sidebar / content / sidebar option as default but on selected pages remove the primary sidebar on the right and replacing it with a wider content section. Worked a treat. Many thanks.

  12. says

    Carrie – Help! This post was the answer to my prayers….until i decided i needed to have a custom widget box on this exact page where I (display:none)’d the primary sidebar?! Yikes! How can i create a custom widget box to display in the sidebar when I have the primary sidebar CSS’d out? Any thoughts, oh Genesis goddess?

  13. says

    Looks like a good solution, but somehow it makes me unhappy about the logic. I mean, it’s good, but sidebars should be present on a page not by using css, but by the genesis system itself. For instance, I have this problem right now:

    A sidebar-content-sidebar layout. Somehow this means that Genesis places the primary sidebar on the right and the secondary sidebar on the left (that’s illogical captain!). Then, when on a page I choose to have only one sidebar and this sidebar is on the left, the primary sidebar suddenly will be used on the left. That leaves me with the problem that when I have my navigation on the left, it’s gone when choosing the sidebar-content layout.

    Any idea about handling this?

  14. Rainier says

    Where in the CSS should I put this code?
    .special-page #sidebar {display: none;}
    .special-page #content {width: 85%;}

  15. says

    Hi, I’m trying to do this. I’ve got the custom body class on the post, and have put the code as shown into the child theme css style sheet at the bottom. I’m not seeing any change. Am I putting the code in the wrong place? Thanks!