How to hide sidebars on a Wordpress theme

I never saw before on any Wordpress blog this feature of hiding sidebars. So I made this tutorial to help interested people to implement it on their own themes.

 

 

Introduction

 

In Wordpress, we are used to a great variety of themes, most of them having 1 of at least 2 sidebars. Sidebars are substantial in Wordpress, because it is in them that we add our beloved widgets. But also they have the drawback of taking horizontal space from our blogs. Always having the same content (in contrast with the main column where the hot stuff are), they often become repetitive and boring, and we start wishing that they could be gone. But they can't be gone for ever, we need our widgets! so they could be gone just for a period of time, when we are reading main content for exemple.

 

My preference for a good theme is clear: flexible/fluid width (my current resolution is 1680x1050), 2 sidebars/3 columns, being a left and a right sidebars. I don't like those themes that have 2 right sidebars, even though we can merge them to 1 sidebar to have a larger horizontal space, I feel that having 2 sidebars side by side pollutes the visual, so they must be right and left sidebars. Although we have thousands of free themes available, almost all of them don't fit my taste, so I always had problems finding a perfect theme. That to not talk about collors!!

Time to time I go search for new themes that could better please me, and this time I was under pressure because I wanted to use Wordpress Threaded Comments plugin and my pervious theme wasn't supporting it.

 

During this search, I saw for the first time a theme that didn't have sidebars, it was Jeremy Clark (http://clarktech NULL.no-ip NULL.com/)'s Web 2.0 Simplified (http://theme NULL.clarktech NULL.no-ip NULL.com/2008/08/26/web-20-simplified-theme/). Going to his website I found an even better one: Khaki Traveler Theme (http://theme NULL.clarktech NULL.no-ip NULL.com/2008/04/28/new-theme-khaki-traveler/). Both themes are the type I like, flexible width with 2 sidebars. Sidebars appear normally in home, page and archive pages, but they are not present when we enter on a post page.

Chosing this theme, I started customizing it. At first I was amused with the rare post page without sidebars and its extra horizontal space, my texts were fitting much better. But little time later I was feeling something was missing, and a little more time later I found what it was: most of my visits come from search engines directly to a specific post, and post pages were better ranked than home, archive and page ones. Removing links and other contents from post pages would remove their visibility. And that was not an option... sidebars needed to come back!

 

Fortunately Jeremy did a great job developing this theme and it was very easy to customize, and with some tweaks I was able to add sidebars to single.php (note that I'm not a web developer specialist, and I have never read any JavaScript or CSS book, neither have experience with PHP [I don't even like PHP, I prefere Servlet+JSP!]).

Bringing sidebars back solved that problem... but I missed the special gone-sidebars look... So, after finishing my customizations and adding a bunch of plugins, I went back to work with sidebars, my goal was to find a way to dinamically hide sidebars and then bring them back later. At the end I managed to make it work, and it worked so fine that I added the feature not only to posts page, but to all pages, it worked on all of them!

 

 

And here's where I wanted to go. In the same way that I never saw a 2-sidebars theme that had no sidebars on one of its pages, I much less never saw a theme that would let us hide and show its sidebars. So I will share here how I made the trick, and I hope it to be useful to anybody else.

 

 

Explaining the original theme behavior

 

Khaki Traveler has 3 columns, being their ID l_sidebar, content and r_sidebar. That's the same for all pages, being that single.php (the post page) only has content column. content is controlled by 2 different style classes: narrowcolumn for pages with sidebars and widecolumn for single.php where there is no sidebar. Their difference is on their wide and some margin and padding sets.

 

To bring sidebars back I removed widecolumn's fields and copied narrowcolumn's ones to it, making both identical. I prefered to not change single.php's content to narrowcolumn class, because single.php has some styling differences that could get broken.

Then I compared single.php to index.php, and found where sidebars were being added, it was just before and after content's div. These are the codes to add left and right sidebars, respectively:

 

<?php include (TEMPLATEPATH . '/l_sidebar.php'); ?>

<?php get_sidebar(); ?>

I just added both statements around content in single.php and the trick was done.

 

 

Hiding sidebars

 

CSS has a property named display (http://www NULL.w3schools NULL.com/css/pr_class_display NULL.asp) that defines how an HTML element should be rendered. One of its values is 'none', which defines that this element will not be rendered at all, it will be hidden.

With JavaScript, we can set and change HTML elements' CSS properties, it is done with the folowing statement:

 

document.getElementById('element ID').style.property='value';

 

Alternating sidebars' display property between 'none' and ' ' makes them hide and reappear, remaining only to change content's properties between narrowcolumn and widecolumn classes to finish the trick.

 

 

To define these properties, you need to do some testings. Khaki Traveler was easy, because it already comes with both classes. They are mainly used to set the main column's size and position. "narrowcolumn" would be the normal config, when we have sidebars appearing.

To define "widecolumn" (main column wider side and position) config, the best way is to install Apache, PHP and MySQL in your PC, install Wordpress and configure a developing version of your blog. Doing so, you won't have to worry about lag, and don't dare to try tweaking your theme directly in your real blog! Always have backups of every change you do, and always test each change reloading your local pages.

 

 

Fist step is exploring your theme, seeing what does what. For that I suggest using FireFox with Firebug (https://addons NULL.mozilla NULL.org/firefox/addon/1843) addon. It shows in real time what's the element that generates each graphic, and which styles are being implemeting on it.

Use Firebug to find the div elements that form your sidebars, and which classes are implemented on them. Go to your styles.css and find these classes, adding "display:none;" to them. Doing so they sould disappear from your blog, and your main column will be out of its place.

 

Then go back to Firebug and find main column's id and class, and go back to style.css and change its properties. Work on the property width, setting it to something like 80%. Using percentages will make sure its width will be flexible, adapting to your visitors' resolution.

 

When you find a good width for it, try to work on the property margin-left. Use percentages too, if you set main column's width to 80%, there sould be 20% space left, being 10% for left side and 10% for right side, so set margin-left to 10%.

Probably you will have margins set on one unique property, with the syntax "0 0 0 0". If so try to change one of them each time, and see if it gets better or worse. Go on this error-success iteration until you have a nice position to your column.

 

Note that you don't have to tweak sidebars' properties. When they are hidden they don't interfere at all with the layout, so just leave their properties alone (unless you want to take the opportunity to custom your layout, in this case just do your work and then don't change them anymore).

 

Working on CSS to customize a theme was a pain for me in the beginning, but with time and patience I got its ways, and I can assure you that customizing our theme is very fun and gives us a good feeling when it is done! Just take your time and don't rush.

Once you are done, take a note of the properties values you liked most, for when you have sidebars shown and when they are hidden. Because now is the time to do some JavaScript coding!

 

 

Making JavaScript do the trick

 

There are a bunch of ways to trigger JavaScript functions on a website, I will not list all of them, I'll let you search for yourself. I used a classic button. This is its code:

 

<input type="button" value="Hide Sidebars" id="hideBtn" style="width:80px;font-size:10px;margin:0px;padding:0px;" onClick="hideSidebars();" />

 

Explaining what's important on it:

• value: it's the button's text, it will be changed to reflect if its action will be to show or hide the sidebars
• id: its id is used to refer to it inside JavaScript
• Style: defines its look; configure it (or not :P) to fit your theme layout, just pay attention to make it have enough width to fit its text
• onClick: it's the event that calls the JavaScript function, here I called the function hideSidebars()

 

You can add this button (or any other element you choose to trigger the JavaScript; if you are good in webdesign you can use a <a hef> hyperlink and style it as a button too) anywhere in your theme, I fit it in my header.

 

 

Now, it's time for the hard work, you must develop the code that will hide and show the sidebars and resize the main column.

It can be done with an if-else clause. For the condition, I chose to test the button's text/value. I think it's more reliable and less bug prone than test sidebars themselves. So I test: if button's text doesn't say sidebars will be hidden (meaning that they are already hidden and will be shown, or there is something strange that needs to be fixed), I run the showing code. Else, they are more probably visible so I run the hidding code.

 

Showing and hiding codes are not that hard. Showing means you will make layout looks like its original form, hiding means you will implement the new no-sidebars layout.

For the hiding event, hide (display 'none') sidebars and set each main column's properties to those you created when you were fitting it in its new place.

For the showing event, just set properties to their original and show sidebars back (display ' ' ).

 

 

That's basically it, here is my JavaScript code that I developed, you can use it as an exemple. I just ask that, if you use this tutorial to tweak your theme, leave a link on its footer pointing back to this tutorial, and maybe also create a post telling your visitors about the new feature added and take the opportunity to tell them where you learned how to do it. Please :)

 

// input to call function:
// < input type="button" value="Hide Sidebars" id="hideBtn" style="width:80px;font-size:10px;margin:0px;padding:0px;" onClick="hideSidebars();" />

var showtext = 'Hide Sidebars';
var hidetext = 'Show Sidebars';


function hideSidebars(){


// alert('Hello World - this is an alert message!');


	//if button has any value other than showtext, that means sidebars are hidden or there is a bug, so it can show them or fix the bug making sure they are visible
	if(document.getElementById('hideBtn').value != showtext) {
	
		//making sidebars  visible
		document.getElementById('l_sidebar').style.display = '';
		document.getElementById('r_sidebar').style.display = '';
		
		//tweaking widecolumn to fit page with sidebars (narrowcolumn style)
		document.getElementById('content').style.padding='0 0 20px 0';
		document.getElementById('content').style.margin='0 1%';
		document.getElementById('content').style.width='52%';
		
//		alert('sidebars should be visible now');
		document.getElementById('hideBtn').value=showtext;
	
	} else  {
	
		//hiding sidebars
		document.getElementById('l_sidebar').style.display = 'none';
		document.getElementById('r_sidebar').style.display = 'none';
	
		//tweaking widecolumn to fit page without sidebars (original style)
		document.getElementById('content').style.padding='10px 0 20px';
		document.getElementById('content').style.margin='5px 9% 0';
		document.getElementById('content').style.width='82%';	
	
//		alert('sidebars should be hidden now');
		document.getElementById('hideBtn').value=hidetext;
	
	}

}

 

Note the alert() function, it opens a window with the text inside it. Very useful for debugging.

Also note that there was a bug related to showtext and hidetext variables that I wasn't able to fix, so I kept them in the place that they worked and just changed their value :P If you manage to find a fix to this bug, plz tell me. The code is working pretty fine on what it must do, but this "bugfix" is very ugly!

 

 

To finally finish the tutorial, I'll remember you that this code must be added to a .js file and referenced by your theme. I gave it the hidesidebars.js name, saved it on theme's root folder, and used the following code ih header.php inside <head></head> structure.

 

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/hidesidebars.js"/>

 

 

Conclusion

 

That's it. As you can see on this blog, doing these steps I was able to make sidebars hide and show again. If you have any question, just throw a comment and I'll reply you. If you find any error or have suggestions to improve it, I'd love to know it too!

 

My work is not done yet. I'm thinking on a way to keep show/hide config permament, maybe creating a PHP flag for it and passing it as a parameter to the JavaScript function and running it everytime a page is loaded, then I could set a cookie on each visitor's browser and make this config persistent. But I still don't know if letting users keep sidebars hidden is a good idea, because it could lead to the original problem again: sidebars not being shown.

I'm not saying it for the banners only, I have 2 blogs for 1 year and I never received 1 cent for any of them! I'm saying it because of info like categories and archives. I don't write my texts trying to bring visitors at all cost, neither matter if they will stay or leave in a few seconds, but I try to be useful to visitors and I want to suggest other contents that may interest them when they visit my site. Maybe later I open a poll asking visitors if they'd like to keep sidebars always hidden and ask for opinions.

 

After finishing tweaking this blog I also plan to implement some stuff I learned in the process on my other site, Consciência Planetáira .com. Including the hiding sidebars feature.

 

 

Thanks

 

To finally finish this long text, I'd like to thank Jeremy for sharing his themes with us. Flexible width themes are damn rare to find and most of them don't have the proper sidebars or I don't like their look. More than that, Khaki Traveler was damn easy to custom and tweak, everything is well organized and code is clean and clear. I learned A LOT about CSS toying with it.

 

If this tutorial is useful to you, please thank me commenting about it and linking to it. Please don't copy it, even referecing the original. If you tweak your theme, please leave a reference on your footer to this tutorial.

After all, this is something very simple to be done but I never saw anything like it anywhere :)

 

And that's it. Thanks everybody, see y'all next time!!

 

homepage