Create a Full Width Page for WordPress in 5 Simple Steps

February 16, 2012  | 
Leave a comment


If you don’t have the option of a full width Page template in your theme, it’s easy enough to create your own. You’ll need to be able to access your theme’s folder on your server, and so if you can do that, this should be a fairly easy process.

We’ll go through it in five steps.

Step 1: Create a New Template File

On your server, find your theme’s folder (wp-content/themes/your-theme).

Create a new file and name it something unique and appropriate (e.g. full-width-page.php). Remember to end it with the .php extension.

After that, find the file named page.php. Open that, copy the contents, and then go back to the file you just created (full-width-page.php), and paste those contents into your new file.

Now, at the VERY TOP of your new file (i.e. BEFORE the content you just added into it), put the following:

<?php
 /*
 Template Name: Full Width
 */
 ?>

It should look something like this:

Featured Plugin - Open an Online Store with MarketPress

Out of all the WordPress ecommerce plugins available, this has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

Step 2: Remove the Sidebar

Next you’ll want to remove the sidebar. Search for the following code and take it out.

<?php get_sidebar() ?>

Step 3: Replace the Div ID

Next, you’ll need to find the Div ID for the content and change it, so we can style it the way we like.

More than likely, the div ID for the content will look like this:

<div id="content">

Change the name “content” to something unique and identifiable like “content-fullwidth.”

<div id="content-fullwidth">

Save the file, and you’re done with the template file.

Featured Plugin - Add bottom corner (or anywhere else) chat to your site

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Step 4: Style Your New Template File

Now you’ll need to widen the content area to give you more space.

Go to your style sheet in your admin area (Appearance > Editor > Stylesheet – style.css) and search for the section that controls the content area of your blog.

Typically your content area in your style sheet is named “#content” (easily enough).

Copy this section and then paste it into the style sheet again, renaming #content to the same name you gave your Div ID in Step 3 above (#content-fullwidth).

Then change the width to something wider.

Save your file, and that’s it for the style sheet.

Step 5: Choose Full Width

When you write a Page now, you should see an option on the right hand side for the “Full Width” template that you created.

Featured Plugin - Every great SEO tweak you need, in one snazzy bundle

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

The Original vs the New Full Width Page

Featured Plugin - Start Your Own Powerful Membership Site

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

Photo: Wide Load from BigStock

Click on a tab to select how you'd like to leave your comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting