Thesis Theme – Remove Sidebar and Get Full Width content page

Thesis Theme is an awesome theme and its framework makes it easy for you to customize your site. In normal WordPress theme, the entire page layout has the same structure. If you are writing a killer article or want to differentiate the page to your visitors, then keep reading my post.

In this post, I will not only tell you how to remove default widget in sidebar but I will also show you how you can differentiate the WordPress page and remove the sidebar on specific pages.

It’s very easy and only takes simple steps. No extra PHP coding; only few CSS.

See the real examples on my site, Thesis Theme Review page, Thesis Theme Tutorial Page, Thesis Theme Video Tutorials page.

Before we proceed…

I’m sure all those who are using our free Thesis theme Customization Guide will find it very useful and easy to do.

But we missed some of the things like CSS Basics, PHP Basics and creating Custom template in our free guide. So we prepared a Premium Thesis Designer Guide to cover up all those things. It works with the latest version of Thesis Theme 1.8.2.  You can grab our Thesis Designer Guide eBook and make use of it. It’s a one-time fee and lifetime upgrade to eBook; even an upgrade latest version of Thesis.

Nowere’s the tutorial, as promised.

Remove sidebar on Specific pages

  1. Go to WordPress admin, navigate to Pages and choose the Page which you want the sidebar removed.
  2.  Edit the Page and choose your default template as No sidebars and Publish Your page.
  3. Now, you will see the white space. Even though you remove the sidebar, it still shows the white spaces, which are quite a hassle to see.

Don’t worry, I will help you. To remove the white spaces, follow these steps:

1. To remove the sidebar and make the content full width, we are going to call a CSS class only for Specific page. Go to the page, under SEO and Additional style section, give CSS class name however you want to call to it. See the screenshot below.

Thesis Theme Full page width

2. In the above screenshot, thesisrock is the CSS class name. you can give any CSS class name instead of theisisrock.  Now we are going to write the code in custom.css

body.thesisrock #content_area .page {width:85.5em;}

body.thesisrock #content_box #content {width:85em;float:none;}

If you want any background, you can add the CSS property to the above code. That’s all! See how easy it is in Thesis Theme?  You can use this procedure on as many pages as you want.  However, there are disadvantages.

If you want this same look on important pages like reviews or articles, then it’s very difficult to call Specific Css in Specific post and it takes more time to publish a single page.

Advantages:

  • For single page, it looks nice.
  • Differentiate from other pages.
  • Increase more conversion rate.

Disadvantages:

  • Takes more time to publish a page.
  • Css code will increase if you use this on several pages.

So the question is,

what is the best way to achieve the same style for several pages?

The only solution is to use Custom Template in Thesis Theme. Once you create a custom template, you can use it for as many pages as you can. It has more things to explain about custom template.

Our Thesis Designer Guide will teach you how to create custom template and you can use this same style in different pages.

Check out our Thesis Skins

Thanks for reading this post. If you are a new visitor to this page, please subscribe to our blog. We will send useful information to your inbox.

Did you enjoy reading this post and found it useful? Share it with your friends and social bookmarking sites.

{ 1 comment… add one }

Leave a Comment

  • phoenixstar9 December 3, 2011, 11:10 PM

    how do i remove a full width page? do i just delete it from the rest or go backwards in the steps?

    Reply