How to Add a Full Width Page WordPress Template

How to Add a Full Width Page Wordpress Template

One thing that can really help you to customize your WordPress design is page templates. Having a few different options means that regardless of what you are putting on a page, you can always find a layout that suits your content. While some themes come pre-set with different page template options, not all of them do. In this tutorial I’ll show you how to make a full width wordpress template, as I find that is the one most often left out from basic WordPress themes, but can be the most helpful when showing your content.

You can see that on my About page I’m using the default page template, which has a sidebar, while on my Work With Me page I’m using a full width template to showcase the content. You can even create a template for one single page, like your home page, if you want to have more customizable options. Having options like this is important, and not difficult if you follow these easy steps.

How to Add a Full Width Page WordPress Template

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost. Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial. Once you have created your child theme you go to Appearance > Editor to find the style.css file and that is where you put all your code in.

Step 2

Next you can open the folder of your parent theme to look at what page templates there already are. You can do this on a FTP client like Cyberduck, or you can access it by going to Appearance > Editor, then select your parent theme from the dropdown. Then, within your parent theme, look for the file called ‘Page‘ or something of that sort. My parent theme is Twenty Thirteen, and in there is a page.php file called Page Template.

Twenty Thirteen Page Template

Step 3

Next click on that file to open it up. You are now looking at the file that determines how each page on your website looks. If your theme is like Twenty Thirteen and only has one page template, this template is determining every page on the site. Now copy all the content of this file.

Twenty Thirteen Page Template File

Step 4

Next, navigate back to your child theme folder. Create a new file and name it something descriptive. If you are making a full width template you can name it something like Page-FullWidth.php I named mine fullwidth-page.php, but the name doesn’t matter as long as you know what the file is. Open up this file, and paste all the content you just copied from the default page template file into this one.

Step 5

Now you have created a new page template file. But, right now, it is exactly the same as the default page file, so we need to change things up a bit. First, delete all the ‘informational text’ at the top of the file. That is all the text between the /* */. (Those marks hide the text from the computer’s markup, so that it doesn’t effect the code, but you can still see it for informational purposes. So delete that text and replace it with this :

/*
Template Name: Full Width Page
*/

This is the name that WordPress will register, so name it something descriptive so you know what the template is, especially if you’re going to create more than one.

Full Width Page Template

Step 6

Now we’ve got two files that are registered as two separate templates, but the templates themselves are still the same since we copied over the code exactly. To make the template full width, all you need to do is delete the sidebar. Though it might look different depending on what theme you’re using it should be fairly easy to spot. In my case it’s .

Deleting that short line of code will make it so that the page does not look for or retrieve the sidebar. Then, your page will show up without a sidebar.

Step 7

To see if you’ve done everything right, go to your WordPress site and create a new page. If you now see an option that says Template and the template you just created is there, then success, it worked.

Wordpress Full Width Page Template

Step 8

Now create this page using that template so you can see what it looks like. You shouldn’t see the sidebar on the page, though the regular content likely only still extends over to where the sidebar would be. This is because the CSS styling is still telling the content to take up 65% of the page (or however much your theme specifies). Using firebug you can now style this area of the content so that it extends across the whole page. Make sure you are including the full width page template id in the string so that the code you add only effects pages using the full width template.

Below is my full width page template on the right, and my default page template on the left after I have gone through this exact process.

Wordpress Full Width Page Template vs Default Page Template

Let me know if you have any questions in the comments below!

6 thoughts on “How to Add a Full Width Page WordPress Template”

  1. Sadly didn’t get it to work, I’m on Auberge theme.It’s free . Do you want to check if you do manage to create a single post page full width??? I feel so dumb right now :-)

      1. Hi Anil, this tutorial is for a single page. So it might be working but it is to create a full width template for pages and not blog posts. Let me know if it’s working for you!

  2. I think I must be close. Followed your advice alongside a recent wpbeginner post http://www.wpbeginner.com/wp-themes/how-to-create-a-full-width-page-in-wordpress/ and all is looking promising until the CSS stage. I’m using a twenty thirteen child theme and I’ve added the following to my style.css

    .page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    .page-template-full-width .site {
    margin:0px;
    }

    I think I’m missing something. The page I’m using to test is: https://www.elvet-striders.uk/about/tablesfw/

    1. Hey Dougie, you’re close! I took a look at your page. Looks like there is some padding and max width affecting your design. Try adding:

      .page-template-full-width .entry-content,
      .page-template-full-width .entry-header,
      .page-template-full-width .entry-summary,
      .page-template-full-width .entry-meta{
      max-width: 2200px;
      padding: 0 10%;
      }

Leave a Reply

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