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 Pop-Up Chat Plugin
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 Infinite SEO Plugin
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 Ecommerce Shopping Cart Plugin
The Original vs the New Full Width Page
Featured Plugin - WordPress Q&A Site Plugin
Photo: Wide Load from BigStock
Hello Joseph,
How do I create a new file using Filezilla? Am a beginner here so please bear with me.
Thanks,
Anita
I got it… i used text file on desktop and then transfered to my remote site with .txt replaced with .php.
Anita – Glad you got it sorted out.
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!!!
didnt post completely… This is the full code:
}
#content-fullwidth .indexed.format-image img {
border: none;
width: 100%;
padding: 0;
}
}
#content-fullwidth .indexed.format-image img {
border: none;
width: 100%;
padding: 0;
}
The HTML doesn’t post on here..
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.
Thanks a lot the last suggestion worked!
Glad it worked.
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.
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.
Just finished using your incredibly easy to follow instructions, thanks for putting this together.
Glad it helped.
I had the same issue as Van Ce with the twenty eleven theme and your suggestion worked for me too. Thanks very much, very easy to follow tutorial!
Glad it worked.
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
Thanks, Chris. Glad it worked out for you.
How do i remove the sidebar just from category pages? Basically i just want the sidebar on the homepage. Thanks, Peter
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).
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!