Genesis Theme Tutorial: Invisible Primary Sidebar

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!

43 thoughts on “Genesis Theme Tutorial: Get Rid of the Primary Sidebar (but Keep the Secondary!)”

  1. 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 ( 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?


    1. 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. 🙂


      1. 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:

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

  3. 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’ );

    1. 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. 🙂

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

    1. 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:

      All GOOD!

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

  6. 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?

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

    1. Hi Jack,

      I’m actually not using CSS to hide the sidebar – I’m killing off the sidebar with a remove_action. The CSS is just hiding the sidebar markup. That said, there may certainly be a better solution out there.

      You can control/force the location of your sidebar(s) throughout your site. If you’re keeping your navigation in your primary sidebar (though I question the logic of that), so long as you always keep that sidebar visible (again, forcing the layout location), you should be fine.

      Check this:


Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.