How to remove the sidebars from Wordpress theme
by MattI don't know why most themes don't have page templates included, but they should. Many times you will create a new Wordpress page, then go view it and the page is all funky because of the sidebar. The easiest solution is to save the page.php file as another filename, preferably, page_no_sidebar.php to keep it simple, and then remove the sidebar from the new file. Here are the steps to do this.
Before we go any further, you will have to be able to access your wordpress theme files, so basically this cannot be done on a shared wordpress site, such as wordpress.com or propblogs.com (I edit most of the themes on propblogs so you can choose page templates, so you do not need this tutorial if you use propblogs)
This is for a basic theme, some themes can get pretty tricky...if you can't figure it out, let me know. I can figure it out for you.
You are most likely going to edit 2 files. The style.css and the page.php file. You do not need to know any PHP for this, and you can do all the edits with notepad. Do not use microsoft word, it will just mess everything up for you. If you plan to do more customization to the themes, I suggest getting a professional editor. I use Dreamweaver, but there are many others.
first, let's edit the page.php file and make a template so you can use it over and over.
This is the default page.php file
-
<?php get_header(); ?>
-
<div id="primary-content">
-
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
-
<div class="entry" id="post-<?php the_ID(); ?>">
-
<h2 class="pagetitle">
-
<?php the_title(); ?>
-
</h2>
-
<?php the_content('<p>Read the rest of this page »</p>'); ?>
-
<?php edit_post_link(__('Edit Link','unnamed'), '<span class="metaedit">','</span>'); ?>
-
</div>
-
<?php endwhile; endif; ?>
-
</div>
-
<?php get_sidebar(); ?>
-
<?php get_footer(); ?>
Pretty simple...remove all the code in the middle, and you just have get_header, get_sidebar, and get_footer. The content in the middle display your page content. Save page.php as page_no_sidebar.php and then update it to look like this
-
<?php
-
/*
-
Template Name: Page No Sidebar
-
*/
-
?>
-
-
<?php get_header(); ?>
-
-
<div id="primary-content">
-
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
-
<div class="entry" id="post-<?php the_ID(); ?>">
-
<h2 class="pagetitle">
-
<?php the_title(); ?>
-
</h2>
-
<?php the_content('<p>Read the rest of this page »</p>'); ?>
-
<?php edit_post_link(__('Edit Link','unnamed'), '<span class="metaedit">','</span>'); ?>
-
</div>
-
<?php endwhile; endif; ?>
-
</div>
-
-
<?php get_footer(); ?>
Notice I removed get_sidebar, and I added a comment to the top of the file. Wordpress scans all files in the theme folders and when it comes across a keyword like "Template Name" it knows what to do with it. Wordpress will add this file to the template dropdown box.
Now you will not see the sidebar, but in most cases the main body of content will still not extend all the way across the page. you now need to edit the style.css file to make the main body fill the page. Open style.css and look for this: #primary-content. You see primary content in the main div tag in the above code. When you find it, look to see if there is a width attribute. If there is and it is 100%, you might not need to edit anything. If it is something like 500px, it is probably too narrow to fill the entire page. copy the entire section
-
#primary-content
-
{
-
...
-
}
then paste it right below the section and rename it to:
-
#primary-content-full-page
-
{
-
...
-
}
Make the width around 900px-1000px...you will have to play with this to get it right. Of course there are ways to make it perfect, but the majority of themes will all be different and this is just a basic tutorial.
Another attribute to look for is a margin, or padding attribute. If you see margin-right:200px...you will probably also need to change that to 0px. Again, you will probably have to play with it.
now go back to page_no_sidebar.php and change the div tag with id='primary-content' to id='primary-content-full-page'
now upload all files to the server and you should be golden.
BTW, I hold no responsibility if you take my advice and it ruins your website 
Popularity: 12% [?]
Thanks for the great tutorial. I’ll try it out in the morning, hopefully, I’ll be able to use your IDX plugin too.
March 7th, 2007 at 11:23 pm[…] So here is what I did and this is for specifically for the K2 theme. I followed these instructions from Matt at Realivent here but instead of modifying ‘page.php’ I had to modify ’single.php’ (thanks Matt). […]
April 5th, 2007 at 2:23 pm[…] 3)Login to your blog and “Write” a new page and select your “Page with no sidebars” Here’s a quick tutorial on how to create a full width page with no sidebars. […]
October 16th, 2007 at 7:56 pmmy theme does not offer the ability to choose a template when creating a new page, how do i create a new page without sidebars when i cant dictate which template to use?
October 28th, 2007 at 5:20 pm[…] 7. Page layout - at the time of install, you may want to create special page layouts with 1-sidebar, 2-sidebars, or no-sidbars, just follow this tutorial to change the page layouts. […]
January 1st, 2008 at 3:46 pmThanks for the great tutorial. I’m using the Modernpaper theme, which has two sidebars and I managed to remove the sidebars. But, in the stylesheet I could not find #primary-content. Any suggestions for where the page width might be hidden. With two sidebars missing, there is plenty of white space to fill up.
Thanks
June 23rd, 2008 at 1:02 am