Page templates are an excellent tool for creating a customised page layout for your WordPress blog. In this tutorial we create a full width page, without a sidebar, for the popular Revolution Theme (version 3.0) by Brian Gardner. This involves creating a new Page Template then making some changes to the theme’s stylesheet to correctly display the content in your new page.
Update: This theme is no longer available. Check out the latest fabulous themes from Brian Gardner and his team at Studiopress.
A full width layout can be really useful for displaying e-books, image galleries, site maps and many other types of content. Don’t worry if you don’t use Revolution – the principles involved are applicable to any theme, though you will have to adapt the CSS modifications to fit your theme.
As with any kind of theme customisation always make sure that you backup your theme files before you begin!
Overview
In order to make our full width Page Template we need to do the following:
- Create a Page Template.
- Remove the sidebar from our new Page Template.
- Add a new DIV class to the stylesheet to display the content across the full width of the Page template.
- Markup our Page Template with the new DIV class we have created.
As mentioned previously, this is the same methodology regardless of which WordPress theme you are using. If you get stuck, ask a question on the Support Forum and I’ll try to help you out!
Make a Page Template
WordPress gives us a very useful way of creating different Page layouts thanks to Page Templates. Just to be clear: for the rest of this article we shall be discussing WordPress Pages, not Posts.
We will begin by taking your existing page.php file as the starting point.
Step1: Make a copy of page.php and rename the copy page_full.php.
Step2: Open page_full.php in your text editor (or use the Theme Editor in WordPress Admin, if you prefer).
You should see this code at the very top of the file (to save space I’m only displaying the first few lines of code):
< ?php get_header(); ?>
Step 3: Insert this new code above the existing code at the top of the file:
< ?php
/*
Template Name: Full Page
*/
?>
The top of your file should now look like this:
< ?php
/*
Template Name: Full Page
*/
?>
< ?php get_header(); ?>
The new code that we have inserted tells WordPress that this file is a Page Template, and the Template name of “Full Page” will appear in the dropdown list of templates in the Page Template section of the Write/Edit Page screen in WP Admin.
Important! Make sure that the new code is at the very top of your file and that there is no whitespace above the first line.
Step 4: Delete this line of code in page_full.php:
< ?php include(TEMPLATEPATH."/sidebar_page.php");?>
Deleting this code removes the sidebar from our Page Template.
Step 5: Don’t forget to save the file with the name page_full.php when you have finished the above steps.
Creating new CSS styles
Although we have our new Page Template, if you go ahead and create a test page with it you will see that although the sidebar no longer appears, the content does not stretch the full width of the page.
This is, of course, because we haven’t yet changed the stylesheet. Before we do that, let’s look at our new page_full.php file in its entirety:
< ?php
/*
Template Name: Full Page
*/
?>
< ?php get_header(); ?>
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
< ?php the_title(); ?>
< ?php the_content(__('Read more'));?>
< ?php endwhile; else: ?>
< ?php _e('Sorry, no posts matched your criteria.'); ?>
< ?php endif; ?>
< ?php get_footer(); ?>
You will see that we have two DIV tags in our page:
If you are already familiar with the Revolution Theme you will know that content is the container for everything between the header and the footer, including the area in which the sidebar is normally displayed. So, nothing for us to worry about here, and we do not need to make any changes to the style of this DIV.
The other DIV, contentleft, is the crucial one and this is where we need to make changes.
Step 6: Open up the theme’s stylesheet, in our case style.css and find the style for #contentleft. Here it is:
#contentleft {
float: left;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 0px;
}
Step 7: Make a copy of this block of code in style.css and change the name of the copied block to #contentleftfull.
Step 8: For #contentleftfull change the width attribute from 600px to 920px. This is the width of the page, including sidebar area. Don’t forget to save the changes when you are finished.
Mark up the Page Template File
Step 9: Open up page_full.php and change this:
to this:
Save the file, and that’s it! Our job is done.
The final version of the Page Template
Here is what your final version of page_full.php should look like:
< ?php
/*
Template Name: Full Page
*/
?>
< ?php get_header(); ?>
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
< ?php the_title(); ?>
< ?php the_content(__('Read more'));?>
< ?php endwhile; else: ?>
< ?php _e('Sorry, no posts matched your criteria.'); ?>
< ?php endif; ?>
< ?php get_footer(); ?>
I hope you found this tutorial useful and have been able to see how easy it is to make a Page Template.
About this article:
This article is one of an occasional series covering customisations of specific themes. More Revolution based tutorials to follow!
Related articles:
If you found this article useful you may also like these articles from Code Snippets:
Create a different sidebar for a blog page
Complex loop with in_category(): Part 1
Creating author pages
How to widgetise a theme file Coming soon!
Thanks! I can use this.
Thanks Candace! Hope it works fine for you. As ever, your feedback on my posts is much appreciated.
It worked great on two other sites, thank you. I had a few more things to remove like a breadcrumb, post area and an extra div…but it worked finally. Instructions are well written and easy to follow.
Candace,
Thanks for the feedback!
This particular example uses the Revolution Theme template, but each theme template will be slightly different. The important steps are to:
1. Remove the call to the sidebar
2. Create a copy of the existing postarea or content DIV style and make it full width in the stylesheet.
3. Change the DIV markup to reflect the new CSS.
As you have seen, it really is very easy to create page templates once you’ve understood these key steps.
Glad it worked!
Thanks I can use this too. Revolution themes are great to work with. A lot to learn but I am enjoying the education.
How do you define which page the theme will use when you post a new page? I can’t seem to figure that out
@ Daniel Sanchez
When you are in the Write Page screen in Admin, select the template file. If it doesn’t appear in the list of available templates check that you have inserted the correct code at the top of the file, as descibed earlier in thsi article.
Hope this helps.
Ade.
It would be so awesome if themes, especially premium, came with essential templates such as a full width version for a home page or website page. I wonder why they haven’t become standard? Anyway thanks for the thorough tutorial.
@Wordpressie,
Good question! Incidentally the latest Streamline theme from Revolution2 is packaged with a number of different page templates including a full width page. It’s a nice looking theme, too.
Nice share, thanks
Hi – Thanks for posting this. I’m trying to add a full width page template to my Revolution 2 Album theme but am struggling. I tried following the steps here but have problems. As the core of the theme is photo based when i remove it, the whitespace just takes over!
Any ideas or help you can give me (e.g. an example full_page.php) would be awesome
Thanks!
Hi Elliot,
The Revolution 2 Album templates are quite different to more traditional themes, so the method described above would need additional steps to create the same concept in this theme. If you provide some more info as to what you want (and a URL would be useful too) I can give you some pointers.
Ade.
Revolution 2 Album is a thorn in my side. I definitely need a full page solution for this theme.
Don,
Agreed – not so easy with this theme.
Revolution 2 Album uses a background image to “frame” the images. Therefore it’s a bit trickier than with other themes to create a full width page – you need to create a new background image to deal with the wider page.
Using page.php would be starting point. Your best bet is to post a question over at http://www.studiopress/support
Ade.
Thanks, this is what I am looking for… this is also worked with another wordpress themes I used right now.
Hi there. this is really useful post and i am trying to apply the logic to a different theme.
The page.php file of the them i am using has the following code at the top:
I have changed this in my custom template page to:
however, where i am struggling, is how to add this fullwidth class in the right way to my ccs file?
I just know where or how to stick it in?
i imagine it would go somewhere in this area:
/* Deal with content (all styles used in index.php) */ #content {
text-align:left;
width:570px;
padding:5px 10px;
float:left;
margin-top:5px;
min-height:570px;
border-left:1px solid #e1e0e0;
}
html>body #content{width:570px;}
#content h1{
margin: 10px 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow:#999999;
font-size:20px;
}
Desparate for help!
noticed that some of my code was not displayed… will re-write it in a way that it won’t get ‘rejected’.
The page.php file of the them i am using has the following code at the top:
div with the id=content
I have changed this in my custom template page to:
div with the id=content and then class=fullwidth
hope that makes it clearer…
Hi Phillip,
Glad you liked the article.
You will probably have CSS inheritance issues with your method. Although it’s more long-winded, I would change the div id=content to div id=fullwidth.
Then copy all of your #content styles and rename the copies #fullwidth, and change any width settings to suit your page layout.
Hope this helps.
Thanks for the article, but i have followed the steps like it says, and now i cant choose any page template when creating or editing one.
I removed the new one that i had created following the tutorial here and still the page templates wont show in the page options.
@ Niklas,
Check you have followed all the steps, especially the bit about adding the Template Name to the top of the new template file. This name needs to be unique too.