How to remove the sidebar in your WordPress website

How to remove the sidebar in your WordPress website

Would you like to remove the sidebar in your WordPress website for any reason? Read on…

Content – Sidebar, or Sidebar – Content – These are the two common layouts you’d see in most websites.

Not all website have a sidebar though and the reasons are quite varied.

Having a sidebar is definitely useful, I must say.

Depending upon the nature of your business and blog, you shall showcase some of your best content, promote your products, run direct or third party ads and so on.

However, it is quite true that not all websites need a sidebar – in fact most websites don’t make the best use of a sidebar and simply keep one as a result of “convention”.

And that is wasted space. Precious space.

If you don’t really make good use of your sidebar and if you just keep it for the sake of keeping one, it is better to remove it.

That way you could give your content the much needed attention.

Right so let’s dive in to the how to bit.

How to remove the sidebar in WordPress using theme options?

Now, this highly depends on your theme. Most themes have an option to choose the “no sidebar” option on content layout, almost for every post or page.

For instance, in any of the child themes of Genesis framework, you can see the layout options as shown below.

Genesis layout 1

From this I can choose to have the sidebar to the left or right of the content or can have the sidebar turned OFF for that page.

In the screenshot above, the default layout (content-sidebar) is chosen and that particular blog post looks like this:

content sidebar

Now, if I choose the third option in the layout settings, that will remove the sidebar.

 Genesis layout 2

With this option, you can see how the post looks without the sidebar.

Genesis no sidebar

If we take the example of another premium theme like Thrive theme, you don’t have it straight forward.

You have a few options to change the layout, but no options to remove the sidebar.

Thrive layout options

So if your theme doesn’t support easy removal of sidebar you have to do it the other way around.

Remove sidebar in WordPress from the template files

Now you’d want to remove a piece of code from the template file(s) of your site to have the sidebar removed.

Depending upon where you want the sidebar removed, you would have to open that appropriate file.

For instance if you want the sidebar removed from the pages, you need to identify the page.php file in your themes folder.

For this login to your cPanel, go to File Manager.

File Manager

Then depending upon your theme, your page.php file will be located somewhere in your theme folder. In my case (using Thrive theme), I located it here: public_html > wp_content > themes > squared.

page-php file

Now you need to look out for this code:

<?php get_sidebar(); ?>

and remove it.

Get sidebar code

Now depending upon your theme, this might just remove the sidebar and leave the content in its own place. That is, like this:

Contact page

Here the sidebar is removed, but the content stays to the left, leaving the sidebar’s place empty. And that might not look good on all cases.

This happens because your theme has set a specific width for your content and sidebar, so the content stays within that width even if the sidebar is removed.

So you need to change the width of the content wrapper (that’s the ID that’s commonly used).

Use Inspect Element in your browser (Firefox, and Chrome have that option) and find out the exact ID name.

Once you identify that, you need to manually specify the wrapper width.

Before changing the css in your theme file, you can change the width in the Inspect Element frame to do a live preview and check what you are doing is right.

If you are able to identify the ID, you just need to edit the current CSS of your file and change the content width in the appropriate file (depending upon on which pages you want the sidebar removed).

The code will look something like this:

#content-full-width {
float: left;
padding-bottom: 24px;
width: 960px;
}

And you need to change the width to the right number that you found by playing around using Inspect Element.

Using the “Full width” template could be easier

At one point you start to think, if you had the Full Width template available for every page, your life would be easier, right?

If your theme had that option, great! You can find that out by seeing under Page Attributes  as shown below:

Full width template of theme

If such an option is not available, you could simply create a Full Width template yourself.

This way, you can simply choose to have that option in only selected pages/posts rather than changing the code for ALL pages or posts.

How to manually create a Full Width template?

Simply open up a notepad or a plain text editor in your computer. Copy the code below and paste it in the text file that you newly opened, and save it.

<?php

/*

*

Template Name: Full-Width-Template

*/

get_header(); ?>

Now, access your page.php file and find <?php get_header(); ?>. Copy everything you see below this line.

Paste that in your Full Width Template file after what you’ve already got. Before you click save, find and delete <?php get_sidebar(); ?>

Now upload this full-width-template.php file to your theme folder (into the particular folder of the theme that is active right now).

Now if you edit any page/post you will find the Full Width Template option on the right under “Page Attributes”.

Hope this helps!

By the way, if you don’t want to get your hands dirty on editing the code or playing with your theme, no worries! Just contact us so we can do this for you.

About the Author

I'm Jane, the owner of Best Hosting And Design, where I help bloggers and website owners to create and maintain their websites. Check out the services I offer here so you can make use of them. For cutting-edge business tips, please head over to Jane Sheeba.

Leave a Reply 1 comment

Robin Khokhar - October 10, 2017 Reply

Hi Jane,
I think that it’s not a good idea to remove Sidebar in our blogs. But for who doesn’t want it, is a great tutorial for them.
Thanks for sharing.

Leave a Reply: