Subscribe to
I have often been asked how to make a custom page template that fits the full width of a page and eliminates the sidebar. This can often help with the display, for example, of my forum or gallery plugins. While this information is posted on the WordPress Codex, it can be hard to find and understand so the following article sets out to explain, in detail, the necessary steps. It is really very simple but does require a small amount of coding. For this example I will use the WordPress ‘default’ theme but the basic operations apply to all themes although the names of items may be different.
The object of the exercise is to create a page template with the sidebar removed so that the page content can fill the entire width of the page.
Step 1: Create the Template File
In your theme folder (/wp-content/themes/themename/) there is a file called page.php which is the template that WordPress uses to display ‘pages’. Step 1 is to make a duplicate of this file with a different name. For this example I will assume you are making the new template to display my forum plugin so a good name for the new template might well be forum.php.
Step 2: The New Template Identifier
Step 2 requires that the new template file be opened for editing. Every custom template that is created requires a special identifier at the top. Note that the default templates supplied with the theme do not need this. Open the newly created forum.php template file for editing and add the following lines of code at the very top:
<?php /* Template Name: forum */ ?>
Please note that the opening php tag above (<?php) must be on the very top line of the file. There can be no blank lines before it or it will not work. Replace the name of the template with whatever name you have chosen.
Step 3: Removing the Sidebar
There are generally two methods that theme authors use to include the sidebar. The first - as used in the default theme is:
<?php get_sidebar(); ?>
and the other is:
<?php include (TEMPLATEPATH . "/sidebar.php"); ?>
Whichever method is used, locate the line of code in your new template file and remove it completely. Please note that if the sidebar is not included in the template then the theme author has used a more unique method - for example placing the sidebar call in the header file. This then becomes more complex and is beyond the scope of this article.
Step 4: Formatting The Content
Different themes work in different ways but the following method should work with all themes even though it is sometimes not necessary. The problem is that some themes define the content area of the page very specifically so that even with the removal of the sidebar the content area will still not use the entire width. We can get around this by defining a special ‘class’ for the content to be used just by your new template.
The default WordPress theme is somewhat basic in that it defines width in specific pixels. Others will use percentages and some will simply use ‘auto’ in the CSS to allow the content to flow to the full width. You are going to need to study your theme very carefully to determine which method is used. For this example however, we will start with the default theme.
At the top of the new template file (but below the identifier we entered in step 2) you will find the following HTML:
<div id="content" class="narrowcolumn">
All themes will have something similar although it may have a different name. Some themes will define the ‘id’ (content in the above code) only leaving out the class. if in doubt, ask the theme author for advice. Most themes that I have looked at however, use some form of the term ‘content’ and this defines the textual content area of your page.
Still using the default as our example we need to replace the class name for a special class name of our own. This can be whatever name you choose but it must be unique. Change the code, using your own name, as follows:
<div id="content" class="fullwidth">
Remember both the original class name and the new name you have given the class as you will need both in the next step. When you have done, save this file.
Step 5: Creating the New Class
Your theme will have a file called style.css which contains all the style definitions your theme uses to display your blog. You need to open this file for editing. You need to locate the original CSS entries for the original class name that we have changed in our custom template. Beware that there may be more than one entry - you are looking for the one that specifies a width directive. The default theme CSS for the ‘narrowcolumn’ class is as follows:
.narrowcolumn { float: left; padding: 0 0 20px 45px; margin: 0px 0 0; width: 450px; }
Note that a classname begins with a dot. if your theme uses an ‘id’ instead of a ‘class’ then it will begin instead with a hash (#).
You will see from the above that the width of the content area is defined as 450px. In the case of the default theme this is the width available after the sidebar as been displayed. We need to now create our new class making the full width available for our page. To do this copy the above into a new class block - it can sit immediately below - and give it the new name we set in the previous step. As our example it would look like this:
.narrowcolumn { float: left; padding: 0 0 20px 45px; margin: 0px 0 0; width: 450px; } .fullwidth { float: left; padding: 0 0 20px 45px; margin: 0px 0 0; width: 450px; }
Our final task in this step is to set the new width on our new class. You will find that the default theme has a content width of about 680 pixels so that final width directive should be changed to 680px. if your theme uses percentages then try 100%. if neither seem to work you could also try ‘width: auto;‘. You may have to tweak it to get the desired result. When you are done, save the CSS theme file.
Step 6: Using the New Template
The final step is telling WordPress to use your new template for the page(s) you wish to display full width. To do this go to the Manage > Pages menu option and click on ‘edit’ against the page you wish to set the template to. When in the page editing screen, look over to the right and you will find a drop down box labelled ‘Page Template’. Click on the dropdown and if you have done everything correctly, your new custom template should be listed. Select the template and then save the Page.
Now when you load the page it will be displayed in your new custom template. You may have to go back into the CSS file and massage the width of the content area to make it look right however. Note that you can re-use this new template for as many pages as you wish simply by specifying it page by page.
And after all of that - I hope it worked!
It works! Voila! Thanks for the great plugin and tutorials.
Suchit
Thanks for the plugin. Works great, except for the edit post part. I’ll make a post to your support forum. Thanks again. Looks good.
Thanks for a valuable option. My content width was specified in a table cell, so I set it to 100%, and that did the trick. I did create the new class and added 1 px to the left padding.
Hello all.
Andy, thank you for the information and support you and your wonderful team provide here.
My theme presented another variation.
Like Lane, my content width is specified in a table, which in my case was 100%. So no changes required there.
I also created the fullwidth class.
So, the relevant code in forum.php is:
And from style.css :
Hope this is correct, and helps.
..alex…
doctordeluca@gmail.com
http://doctordeluca.com/wordpress/
Sorry, that got mangled.
correction from the style.css excerpt in previous post:
.content {
vertical-align: top;
background-color: #FFFFFF;
padding: 10px;
margin: 0;
}
Hi, thanks a ton for this plugin, and this tutorial is cool too, although my theme isn’t really that helpful for me, I was just not able to do it. I’ll try and approach the theme authors to lend me a hand if they could. Let’s see, i’ll try working on it some more tonight :).
Thanks for your tutorial, it’s perfect, as usual.To complete this tutorial, I have a 3-columns template (Tiga-06, with 2 sidebars, a center widget and a center footer), and here is what I did to delete only the right sidebar :
- I copied page.php to page2.php to have a new template
- I didn’t remove "php get_sidebar" in this new template, but changed it to "get_sidebar2"
- I copied the file sidebar.php to sidebar2.php
- I deleted all the section "right-sidebar" in sidebar2.php
- I added class, as you said, in style.css (but I had to replace "margin-right:170px" by "margin-right:0px")
- In wp-includes/general-template.php, I copied "function get_sidebar()" to "function get_sidebar2()" and I modified in this copy "templatepath . ‘/sidebar.php" to "templatepath . /’sidebar2.php".
- In wp-includes/general-template.php, I made the same changes for "footer()" and "footer2()", and for "templatepath/footer" and "templatepath/footer2" to have the footer fitting the new width.
…And it works perfectly !
Andy, I’m very grateful to you for your efficient courses about php !
Glad it was helpful
OMG I am so lost, lol, I am sorry but I have no idea what I am doing. I managed to get the file copied and renamed by my hosting company but after that I am lost at what I am looking at.
i’m stuck in step 5.
i don’t have in my theme css file this line:
.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}so i just go ahead and create it in the end of the file?
i got it to work, cool thing nicely done tot…
Andy,
This is one great tutorial. I’m using WP 2.5 and a highly styled version of the contempt_v2 theme. Following your directions to the letter brought me to a new forums page that still had the ‘inherited’ narrow width. To solve the problem, all I did was create another division id in my theme css with the corrected widths, etc. and it worked beautifully.
Thanks for all you do,
Glenn
page.php and forum.php ..
Yes,
Thanks for a lot messages…..
Your tutorial worked fine on my new theme :).
Thanks again for your hard work.
Hi,
That it works great. You won’t believe what stuff I have tried to get it done and in the last yours has worked.
Thank you.
Andy,
First of all let me say how much I like this plugin. The design appears to be very well thought out with quite an attention to detail. Your administration interface is top notch. I’m currently using Phorum, which is too clunky. As soon as I transfer some funds to my PayPal account, I’m going to send in my donation.
Your support instructions are excellent, too. I followed your tutorial to the letter but still had that pesky sidebar to deal with. I thought the fix was beyond my expertise but nonetheless I studied the code a bit and realized that my theme (Pop Blue) had an additional class in the style.css template called “entry.”
So, I duplicated that class, pasted the text under the “entry” class, changed the class name to “entrynosidebar” and modified the width to 800px (and then saved the template). Finally, I returned to the new forum.php template I created and replaced with . Upon reloading the forum, I discovered that the sidebar was gone, and the problem was solved!
ORIGINAL PAGE.PHP
————————————-
<div class=”post” id=”post-”>
NEW FORUM.PHP
————————————-
<div class=”post” id=”post-”>
Thanks for a great Wordpress plugin,
Mike
Somehow, the code example got mangled on my previous post …
I am also stuck on step 5. I don’t have anything with .narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}
There’s a lot that refers to content, but nothing that states column size. I’m new at this, so please be gentle. What should I be looking for? There is a line that looks like this:
/* Main - Content */
#content {
float: left;
width: 570px;
padding: 6px 16px 0 16px;
}
Should I replace this code with the suggested code?
Thanks
Jeffs last blog post..test 2
[...] Creating Custom Page Templates | Stuff at Yellow Swordfish (tags: wordrpess howto tutorial) [...]
@Jeff: The width statements are the ones that control column size