Create a Full Width Page for WordPress in a Few Simple Steps

WordPress.org has so many themes you’re bound to find the perfect one for you.

But what if you don’t?

What if you find a theme that’s almost perfect but doesn’t have the kind of full width page template you need for your landing or about page – or maybe doesn’t have one at all?

Not to worry, you can easily edit any theme to create a new template that’s perfect for your needs. It just takes a few simple edits and you’re ready to go.

In today’s post I’ll walk you through how to keep your new template mobile-friendly with columns, CSS3 and the Twitter Bootstrap framework if you have a responsive theme. Even if you don’t, I’ve got you covered.

• Getting Started
• Creating a New Template
• Edit Your New Template
• Editing Bootstrap Templates
• Editing CSS3 Templates
• Non-Responsive Themes

Getting Started

Make sure you do a full backup of your site before continuing to ensure your site is safe in case anything goes wrong.

This way, you’ll be able to do a restore and get everything back to the way it was to try again.

There are many tools that can help you do this such as our Snapshot plugin, JetPack (which includes the formerly stand-alone product, VaultPress), or manually via FTP. Once you have everything backed up, you can continue to the next step.

Creating a New Template

To create a new page layout you need to access your theme files and open up and edit page.php.

If you’re using cPanel, click the “Edit” button at the top of the page, then the “Edit” button in the pop up that appears – if you haven’t already disabled it previously.

Select and copy the entire contents of the file, then close it.

Back in the File Manager, select the “New File” button at the very top-left corner and enter a file name in the pop-up that appears, then click the “Create New File” button.

It’s best to type a name that relates to what you’re wanting to create. In this case, I entered full-width.php, but you can enter what suits you best. Just be sure not to forget the .php suffix and make sure the name you enter has no spaces or your template won’t work.

Find your new file in the list and click on it, followed by the “Edit” button at the top of the page. Again, if you haven’t disabled the pop up that follows, click the “Edit” button that appears.

In the editing page, paste the code from the page.php file and save the file.

Edit Your New Template

At the top of your full-width.php file before all the code you need to name your template so WordPress recognizes it properly. Add the following code to make it happen:

I took out all the other comments mentioning that it’s the default page in the theme I’m using since it’s now unnecessary, but left the header intact. Here’s what the top of the full-width.php file looks like now:

Don’t worry if your file looks a bit different depending on the theme you’re using.

Now you need to find the following code, which will be either at the beginning or end of your new template. Go ahead and remove it.

I’m using Base WP made from the masterful Underscores theme to show you what to edit since it makes for a great example.

Since this is a responsive theme that uses columns in its framework we just need to adjust the column width to our desired length. In the original code, there were 12 columns, which I changed to 16 as shown below on the first line of this code snippet:

Save the file and activate the theme for your site. Go to the editing screen of one of your pages and select the “Full Width” template that’s now listed and update the post.

When you visit the page, you’ll see a great-looking full width content area. If it doesn’t look like the right length to you, go ahead and change the number of columns until it’s to your liking.

Here’s what it looks like:

Testing it out shows that it’s still fully responsive and everything looks great. If it’s not to your liking, change the values until it’s right.

What if your theme doesn’t include this kind of code? There are similar structures for different types of frameworks. I’ll show you how to navigate them.

Editing Bootstrap Templates

With the Bootstrap framework, you’ll notice lines like <div class="col-sm-4"> and similar ones in the page template file. In the div container, the columns are referenced as col- followed by a value. Below is a quick reference to the column sizes.

• col-xs- — Extra small devices less than 768 px wide
• col-sm- — Small devices and tablets around 768 px wide
• col-md- — Medium devices and desktops around 922 px wide
• col-lg- — Large devices and desktops around 1200 px wide

When you see a div container with something similar to the code below, you’re looking at more specific sizing options where the numbers represent how many columns are defined for each size:

The total number of columns you use per size and page need to add up to 12 – no more, no less. Keep that in mind when you edit these values.

Increasing the number and deleting similar lines right after it will create a one column, full width page. Then all you need to do is just increase the size to make the main content area larger.

You may also need to search your style.css file for these same classes to change some extra options, though since the column sizes are predefined this may not be necessary.

Playing around with these values will help you achieve the sizing you prefer. Just be sure to run some tests on multiple devices or by resizing your browser window to make sure it looks great across the board.

If you’d like more detailed information on Bootstrap coding, you can take a look at W3School’s article Bootstrap Grid System.

Editing CSS3 Templates

Your style.css file will end up having similar content as the code below if the column options brought on with CSS version 3 are present in your theme:

This code shows that there are four columns to the content ID in the template file across all browsers. Toward the bottom it also shows that each column is 300px in width for a total of 1200px.

Changing these values will help you achieve the full width page you desire, but you should change the IDs to something else to avoid styling conflicts with other templates. The div containers in your new template file will need to be edited to reflect the same changes as well.

You also need to pay attention to the margins and floating attributes. In responsive themes, you’ll notice the margin is set to “auto” which allows the browser decide which size of the area around the content box is most appropriate for optimal viewing.

If you see any CSS like the example below, your content area is set to be pushed to the far left and it’s not centered. If this is the case, replace “left” with “none.”

If this happens a couple times in the file, you’ll need to clear the floats with the following code. Just be sure to make sure #content is replaced with whatever your template calls for the main content area.

It will likely take a few tries to get right so don’t be discouraged. Be sure to test your template for responsiveness once you’re done.

If you run into troubles along the way, you can find many detailed articles on CSS3 at w3Schools.

Non-Responsive Themes

If you have decided your site isn’t going to be viewed on phones and tablets and you have chosen a theme that’s not responsive you can still make a full width template.

Once you have created your new template file as we covered in the first segment, a few adjustment need to be made to the template and style.css file.

Find the main content area in your template file. This is where things get a bit tricky since not all themes name them the same. It may be displayed as <div class="content">. Some themes call it “container” or something similar.

Change the name to something else – just make sure there’s no spaces. I renamed it to “full-width” to make it easily recognizable.

It doesn’t matter if it’s an ID or a class as long as it’s not used elsewhere on the page or in other page templates, unless you want all the areas its repeated to look the same.

Once you’re done, your new container should look like the code snippet below.

At the moment, your sidebar will be gone from this template, but you’ll still be left with blank space where it used to be. In the next step we’re going to fix it.

Save your full width template file, close it and head back to the file manager in the same folder we went to in the beginning. Find the style.css file and click on it, then on “Edit” at the top of the page in cPanel. Click the “Edit” button in the pop up if one appears.

Now we need to find all the instances where the old content area is mentioned in this file. Using your browser’s page search feature comes in handy here.

Copy each snippet of code where it appears, paste into the file then change its name to be the same as the template file. You want to pay close attention to code that mentions width such as in this example:

Just change .content to .full-width for each set you copy and pasted then save the file. Don’t forget, your original content area may be named differently and may be an ID instead of a class.

Change the width to your desired length and if there is a float, change it to “none.” If that doesn’t seem to look pretty, then clear the float as we covered earlier.

Finally, save your file and take your template for a test run. If you find you’re having difficulties, check out W3School’s articles on CSS.

Conclusion

Creating the perfect full page template shouldn’t be so difficult now, even if you have a responsive theme. It may take some time to get right so be patient. Once you get the hang of it it’s not too difficult.

If you’re interested in even more information on creating mobile-friendly sites, check out our post: How To Build A Mobile WordPress Theme, And Why You Should.

How did you fair creating your own full width template? Let me know in the comments below.

Tags:

• full page
• templates