A sidebar can be an incredibly useful tool on a web page. It can provide background info about the site a visitor is on, navigation, contact info, related content – the possibilities are endless.
As useful as a sidebar can be, having one isn’t always necessary. There are times when they can serve as more of a distraction than anything else.
Sometimes you’ll find that either an entire site, or just a specific page, is better off with a single column without the addition of a sidebar.
With that in mind, today we’re going to go over modifying your WordPress theme to eliminate the sidebar, should you ever need to.
Where Do You Want To Remove The Sidebar From?
The first thing to consider is where exactly you want to remove the sidebar from – on a specific page template? On the whole site? Static Pages only? It’s really up to you, because WordPress uses different templates (depending on the complexity of your theme) for all of these different page types.
Once you’ve decided where you want to delete the sidebar from, open up the appropriate template(s) from your theme’s folder (if you aren’t familiar with the different templates, or don’t know which one you need, you should familiarize yourself with the basics of the WordPress Template Hierarchy).
Each of these files, usually near the bottom, will contain a line of code that looks like this:
<?php get_sidebar(); ?>
This code is what WordPress uses to add the sidebar to the specific page. Remove that line, and you remove the sidebar. Easy, huh?
If you were expecting this to be harder, don’t worry – the trickier part is still to come!
Altering Your Content’s Width
Your sidebar may be gone, but odds are you still aren’t using the full width of your page – instead, your content is probably the same size as it was, only now it’s sitting next to a empty space where your sidebar used to be.
That’s because the width of your content area is controlled by your theme’s stylesheet. We’re going to have to make some additions to the style sheet – creating a wider version of your content area.
If you are completely eliminating the sidebar from your entire site, you can just edit your existing styles (more on that in a moment), but if some pages will still display a sidebar you’ll want to keep the current styles in place, and just add new ones to increase the width when needed.
Either way, now would be a good time to open up your theme’s stylesheet.
To begin, you’ll need to use a tool like Firebug to identify the styles that need to be adjusted.
First off, you’ll want to find the width of the entire layout, so you need to identify that container. On the layout I am currently using, that container has an ID of
wrapper – which is a pretty common name and might very well be what your theme uses as well.
Using Firebug, I am able to determine that the width of my
wrapper element is 960 pixels, so I want to make my content area fill that space.
The next thing I’m going to do is identify the width of my content column. In my current layout that is contained within an element called
content (also a common practice). The current width is 550pixels, so I need to increase that to 960.
Something to keep in mind here is that my current layout doesn’t require any margins, padding, or borders on it’s content area. Your theme could be different, and if so you need to factor in those values.
Remember, if you select your
content element in the left hand column of Firebug, you’ll be able to see the padding (purple) and margins (yellow) highlighted on the page.
If your content area has padding/margins, you need to know what they are, and subtract the total value (the sum of both sides!) from your final width.
Here’s an example for you. We already know my
wrapper area is 960 pixels across, and my
content is 550 pixels. If my
content had a 10 pixel margin on each side, I’d want to change my width to 940 pixels (960-10(left)-10(right) ).
If parts of that still don’t make sense, I’d definitely recommend reading a little about the CSS Box Model – that will help clarify what you need to allow space for and how margins and padding work.
The best way to verify that you’re using the right numbers is to change the CSS values right in Firebug, by editing the style rules in the right hand section. This allows you to see what things will look like without actually modifying your files. Once you’ve worked out the appropriate width, you can apply it.
Modify Your CSS
Now that you’ve had a chance to work out exactly how wide your
content section needs to be, it’s time to update your stylesheet. As I mentioned before, if you are completely eliminating your sidebar across the entire site, you can just edit the existing styles.
If you want to keep your sidebar intact on certain pages, then we need to create a new style that will be used in this specific template.
For this example, I’m going to create a new style, which will mostly be a duplicate of the existing one. That means in my stylesheet, I’ll be making a copy of this style:
then I’ll change it’s id/class and adjust the width, like so:
Now, there are “cleaner” ways to code this, since the two elements now have some properties in common – but since this article is already long enough, we’ll leave that topic another day.
You can obviously name your new style whatever you want. I chose the ID I did because it’s something that isn’t already used in my template, and it’s easy to identify.
The next thing you have to do is actually call your new style. That means going into the template you are editing and changing the ID or class of the element in question.
In my template, I’m looking at this element:
So I’ll change it to use my new ID:
Now that element will use the new style, with the increased width!
Depending on your theme, there could be more elements that need to be edited. Inside your
content element there are different elements for headers, paragraphs, etc. – everything that makes up the page. Some of those elements might have specifically declared widths that need to be adjusted.
To find these, look at the page for anything that stops short of the full width. You can also use Firebug to highlight the different page elements (skip smaller ones like paragraphs, or you’ll be here all day!) and watch the highlighted borders.
For example, my current layout wraps the actual post in a container called
full-content, which has a width of 510 pixels.
While this element doesn’t have any padding or margins, it is worth noting that it is 40 pixels narrower than it’s container (remember, the orignal
content element was 550 pixels). This was done to provide a little extra space between the text and the sidebar – as well as allowing the title to be wider than the content below it.
Since I want to keep that look, I’m going to expand the width of that section to be 40 pixels smaller than it’s new container, which is means it should be 920pixels.
You may need to factor in any padding or margins again, just like before. Remember, your final width is going to be the width of your container, minus any padding, minus any margins, minus any borders.
Now it’s just a matter of repeating the process! Find the ID/class of the element, copy it and change the width. Then change the element in your template and you’re done!
Modifying Additional Templates
If you were working on a specific template, and now want to remove the sidebar from another part of your site, the good news is that you probably won’t need to mess with the stylesheet any more – assuming the other templates are the same size as the first one.
Just open the next file, replace the CSS IDs/classes and you’re done!
Obviously, there will be some exceptions to this process with certain themes, so if you have any questions, feel free to leave them in the comments below!