Make a Full Width Page For Your WordPress Theme

By Arun Basil Lal | Published: March 10, 2010

A Full Width Page is one that has no sidebars and all the width of the page is just content. Such a page has many applications. You might not wish to show sidebars on your contact page for instance. Well, lets see some better applications of Full-Width Pages.

Full Width Page in WordPress

Making a Sales Page – Traditional sales pages don’t have sidebars (haven’t you seen those pages with lots of customer feedback and that pages where you have to scroll miles and miles to see the end?). Removing Sidebar makes it look better.

Search Result Pages for Google Custom Search Engine – If you choose to display results of Google CSE on your own pages; the script they give you can insert ads on the right of the searches just as we see on Google. A full width page can make way for the ads.

Enough, lets do it.

Going Full Width on any WordPress Theme

As an example, I will use this Theme – This Just In!. It’s a simple and elegant Free Theme and comes with an image gallery just below the header.

Step 1 – Make a Page Template

Pages in WordPress are defined by page.php in the theme. Make a copy of page.php and rename it as fullwidth.php. It doesn’t matter what you name it, it can be yourname.php instead.

Now add the following to the start of the code in fullwidth.php :
<?php /* Template Name: Full Width */ ?>

Save and lo! we just defined a custom page template.

Step 2 – Rip Off the Sidebars

Sidebars are included in the page template using this :

<?php get_sidebar(); ?>

Delete it from fullwidth.php. In most themes it should be towards the end of the code. Sidebars are gone.

Step 3 – Define a Full Width Style

Open up style.css and find where the style of the content area is defined. Usually its called #content. In our example theme, the style is defined as:

#content
{
margin: 5px 35px 0;
font-size: 1.2em;
width: 575px;
float: left;
display: inline;
}

You can see that in line three the width of the content area is defined as 575 px. Copy paste all the above said code and define a new ID #contentwide as:

#contentwide
{
margin: 5px 35px 0;
font-size: 1.2em;
width: 850px;
float: left;
display: inline;
}

The only change being the width in line three as 850px. The value 850 px was found by trial and error.

Step 4 – Add the style to the Page

If you try making a full width page after step 3, you will get a page with no sidebar, but the sidebar area is blank. Why? The page still uses the style in the content ID. Open up fullwidth.php again and change the id content to contentwide in the code.

<div id="contentwide">

That’s it, upload fullwidth.php and style.css to the theme folder.

How to Actually Create a Full Width Page?

Open a New Page Editor. Write in some content. From the right sidebar of the page editor, from the section called Attributes, select Template as Full Width.

Select Full Width Template in Editor

Publish the page. Congrats!

If you have any queries or if I missed anything, use the comments. Hope you enjoyed it and found it useful. What are you using that full width page for?

P.S: If you need help with your theme to make a full width page, contact me with your details.