Create a Full Width Page for WordPress in 5 Simple Steps


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 - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
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 - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
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 - WordPress Membership Site Plugin

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

The Original vs the New Full Width Page

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

Photo: Wide Load from BigStock

Tags

Comments (40)

      • Thanks for the tutorial however it does not seem to be working for me.. I’m using WordPress Twenty Eleven and I made a full-width-page.php file in the theme folder with this:


        }
        #content-fullwidth .indexed.format-image img {
        border: none;
        width: 100%;
        padding: 0;
        }

        I get the “Full Width Template” option when editing but when I select it nothing happens and } #content-fullwidth .indexed.format-image img { border: none; width: 100%; padding: 0; } appears on the bottom left of the page..

        Any idea what i could be doing wrong? Thanks!!!

    • Van,

      I’m no CSS expert, so I’m just guessing at few things here.

      1. Are you copying your theme’s CSS exactly and only changing the width?

      2. A question: The top bracket that you have there (the “}” before the #content) — is that part of your other CSS section, or is that part of the new code? If it’s part of the new code, then remove that so that your code looks like this:

      #content-fullwidth .indexed.format-image img {
      border: none;
      width: 100%;
      padding: 0;
      }

      3. If that doesn’t solve things, try taking out the “.indexed.format-image img” part so that you only have this:

      #content-fullwidth {
      border: none;
      width: 100%;
      padding: 0;
      }

      4. There may be other things in your CSS file that are keeping it from displaying right. If that’s the case, you might take your question to the wordpress.org forums. You might need to paste your entire CSS file so others can see it. It will be too long to paste in the forum (they don’t like long code there), so you’ll need to post it at pastebin.com and then just provide a link in the forum.

      Good luck with it.

  1. I found your instructions incredibly easy to follow. Other articles assumed that the person had some expertise or automatically knew that to do and where to look for certain code/files.

    Unfortunately, there is something else in my CSS that’s preventing the correct display of a full-width page, and I’m not savvy enough to understand what it is.

  2. Kat – I’m no CSS expert either, so it might help to go to the experts.

    You might try asking in the wordpress.org forums in the theme section. You can use http://pastebin.com/ to paste your complete CSS file, and then link to it from your support thread (wordpress doesn’t like extensive code in the forums, so that’s why you’ll need to paste it first into pastebin.com).

    Hope you get it solved.

  3. Awesome tutorial. My congratulation. So clear and understandable that I was able to do these changes in my theme which hasn’t starndard syntax. eg instead of id is using class, instead of .content is using col1 etc.

    Thank you
    Chris

    • Peter – You can remove the sidebar from any template page (like the category.php template) in the same way as described above. You would just need to adjust things as needed. For example, you can take the sidebar out of category.php and then see if you need to adjust the CSS for the category page (maybe you will, maybe you won’t – it depends on how your css is set up).

  4. Thank you SOOO much … I’ve been trying to figure this out for the past ten days!

    Before your fix, the thumbnails were not centering, and the only solution (to change their size) didn’t appeal.

    Thanks again!

  5. I don’t know how to follow the advice for my site. My page file currently has two separate div IDs. Which do I replace? It looks like this (I already cut out the sidebar part):


    • Mike – I would just keep trying different ones till it works. Remember to keep a copy of your original first so that you can easily just paste it back in if something goes wrong and you don’t know how to fix it.

  6. Hi, can someone help me as there’s no

    in my theme. I’m using Road Fighter theme. I’m just copying my page.php file codes over here. if someone knows what i have to do please reply me.

    ” . __(‘Pages:’, ‘rdf’) . ”, ‘after’ => ”)); ?>

    And also if someone can tell me how to create a left sidebar for my Road Fighter. Thanks in Advance

  7. div class=”page_heading_container”

    div class=”container_24″

    div class=”grid_24″

    div class=”page_heading_content”

    ?php roadfighter_breadcrumbs(); ?

    /div

    /div

    div class=”clear”/div

    /div

    /div

    div class=”page-container”

    div class=”container_24″

    div class=”grid_24″

    div class=”page-content”

    div class=”grid_17 alpha”

    div class=”content-bar”

    h1?php the_title(); ?/h1

    ?php if (have_posts()) : the_post(); ?

    ?php the_content(); ?

    div class=”clear”/div

    ?php wp_link_pages(array(‘before’ =’div class=”page-link”span’ . __(‘Pages:’, ‘rdf’) . ‘/span’, ‘after’ => ‘/div’)); ?

    ?php endif; ?

    /div

    !–Start Comment box–

    ?php comments_template(); ?

    !–End Comment box–

    /div

    div class=”grid_7 omega”

    !–Start Sidebar–!

    ?php get_sidebar(); ?

    !–End Sidebar–

    /div

    /div

    /div

    div class=”clear”/div

    /div

    /div

    ?php get_footer(); ?

  8. Thank you for your nice tutorial. I followed it, and I feel I’m close to do what I want: My content got wider, but is still not full width!
    http://www.rhinopiping.com/product-information/

    I’m using the twentyeleven theme, and there is no #content section in page.css. However, i still copied page.php in template-large.php, and added the following code in style.css (in child template):

    #content-fullwidth {
    margin: 1%;
    border: none;
    width: 98%;
    padding: 0;
    }

    (Also the sidebar is not loaded by default for pages in this theme, so I skipped this step)

    Would you have an idea of my issue?

    • Hi,

      I think the CSS is a little more complicated in Twenty-Eleven. It looks like it’s using a class (with a dot .) and not an id (with a #). When I inspect your CSS in Chrome (right click and “Inspect element”), I’m seeing this as your single page CSS:

      .singular .entry-header,
      .singular .entry-content,
      .singular footer.entry-meta,
      .singular #comments-title {
      margin: 0 auto;
      width: 68.9%;
      }

      With I inspect it in Chrome, you can see the 68.9% on the right:

      http://i59.tinypic.com/2w6ditt.jpg

      With Chrome, you can also play with the styles and see them change on the site. (They don’t actually change. They just change in your browser so you can get a look for how they would be if you changed them.)

      When I change that number to 98%, it goes full screen. So it looks like that’s it.

      You can see here how I’ve changed it to 98%.

      http://i59.tinypic.com/23sjgqh.jpg

  9. Thanks for your help, I got it!
    For a twenty-eleven a child theme, this is what I added to my child style.css:

    #content-fullwidth {
    margin: 1%;
    border: none;
    width: 98%;
    padding: 0;
    }

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
    width: 100%;
    }

  10. You can add CSS fragment edits using that edit CSS applet that comes with Jetpack – it just appends your edits onto the main style sheet, works well.
    thanks for the basic procedure-came in handy!

  11. We are using a responsive theme and I’d like to use this example to make a full-width front page. Is there anything I should be aware of in order not to break the “responsiveness”? (I am relatively new to WP, I know HTML/CSS, but am not fluent in CSS3 yet, nor php). Thx!

Participate