How To Add A No Sidebar Page To Your WordPress Theme

A reader, John asked whether it is possible to add an extra page template without any sidebars to the Soothing Theme. Seems like John would like to add a Forum to his site and he would prefer the Forums page page not to have any sidebars. Seems reasonable enough, but in all honesty, I have never found any software that would allow a Forum to be integrated into a WordPress Theme or are there any WordPress plugins that serves this. Most of it will require you to add the Forum Scripts in an individual folder and then point the link to that folder in your blog navigation. The closest thing is bbPress, but it takes some technical know how to get it working. Since I have never tried it, I don’t think I am qualified to talk about it any further.

Anyway, no matter what the uses, a page without sidebars does comes in handy sometimes. You can use it for the About Me page and so on. So without further ado, lets get cracking. Be reminded that, for the convenience of John, I am using the Soothing Theme that I created for this tip. It is a no frills Theme without any complicated codings so it is easier to work with when it comes to customizations.

First of all, we have to add some CSS codes in our stylesheet php to specify how we want the new page template to look. The content area naturally have to be widened to take up the space previously occupied by the Sidebars. So as in any additional stuffs that we want to add into our Theme, we have to create a new div id. For this, I created one called simply, no_sidebar. I set the attributes to these values.

#no_sidebar { width: 800px; padding:10px 10px 0 10px; overflow: visible; float: center; }

The width is decided by how wide is your page. If your page is 1000px you can set your width to 950 px. which will allow some space for paddings on both sides. Then of course you want everything to be centered since there are nothing on both sides.

Next you will have to create a new class id. This wil decide the layout of the page like the fonts, the spacing, the colors and so on. So I created this:

.nosidebar {width: 800px;font-size: 1.4em; line-height: 1.7em; color: #444; float: center; }

Update your stylesheet.

Now we will have to create a new php file. Look for your Page Template php. Copy and paste the all the codes into Notepad. On the top, before anything, add in these codes.

<?php
/*
Template Name: No-Sidebars
*/
?>

This will show WordPress that you have another Template.

Now replace the <div id="content"> with <div id ="no_sidebar">. Replace also the <div class="post" id="post-<?php the_ID(); ?>"> to <div class="nosidebar" id="no_sidebar-<?php the_ID(); ?>"> Lastly, delete the <?php get_sidebar(); ?>

Just to make things less confusing, the whole file will look like this when completed.

<?php
/*
Template Name: No-Sidebars
*/
?>

<?php get_footer(); ?>

Save the file as ‘no-sidebar.php’, without the quotations, of course. Open your FTP client and upload this new php file to your Theme’s root folder where all the other php files are residing.

Go to your WordPress Dashboard. Click Pages – Add New. On your right hand side, under Attributes, Templates, you will see an extra template named no-sidebars in the drop down menu. From now on whenever you want to create a page without any sidebars, just select and use this template before publishing.

Even though the tips above are written based on the Soothing Theme, the steps should be quite similar with most other Themes. You only need to identify the correct codes to replace as other designers have their own preferences.