How to Create a Full Width Page Template for WordPress
Although WordPress is first and foremost a blogging platform, many people use it as a Content Management System (CMS). When using WordPress to build a full website, creating page templates makes the site more flexible, allowing multiple layouts for content. To create a full-width page template, you need to create a new template file with a special line of comment code at the top. You can get a quick start creating the template by using code already present in your "page.php" page template file, and then you should edit that file by taking out the sidebars.
Other People Are Reading
Instructions
-
-
1
Create a new, blank file in the plain-text or code editor of your choice. Open up your "page.php" file from the following location:
/yoursite/wp-content/themes/name-of-theme/
"Yoursite" is the directory where you installed WordPress, and "name-of-theme" is the name of the theme you want to edit. Copy the contents of "page.php," and paste it into the blank file. Save the blank file as "your-template-name.php," where "your-template-name" is whatever name you want to give the file.
-
2
Add the following line of code to the very top of your new template file:
<?php /* Template Name: Your Name Here */ ?>
WordPress reads this code, and when it sees "Template Name," it knows that "Your Name Here" is a template it should offer when you create pages in the dashboard. Give it a descriptive name, such as "Full-Width Page." Save your file.
-
-
3
Read through the PHP file you just created, and look for this code entry:
<?php get_sidebar(); ?>
In the case of multiple sidebars, you might see code for the other sidebars similar to the following:
<?php include TEMPLATEPATH . '/sidebar2.php'; ?>
Remove codes for sidebars wherever you see them. Save your file again.
-
4
Open up your "header.php" file, and check that the <body> tag includes the following line of code:
<?php body_class(); ?>
If you do not see it there, add that tag within the <body> tag. Save the "header.php" file. Now go back to your full-width template file, and make sure the <div> or <section> tag that wraps around your page content has its class set to <?php post_class(); ?> like so:
<div class="<?php post_class(); ?>">
-
5
Open up your "style.css" file, and add the following:
.page-template-layout-full-width-php .page {
width: 100%;
}
Change ".page-template-layout-full-width-php" to reflect the name you gave your template's file. A file named "my-new-page.php" will be ".page-template-my-new-page-php". This CSS code ensures that any page set to use the full-width template will display its contents across the full width of the screen.
-
6
Log in to the WordPress dashboard, and create a new page. After adding your content to the editor, find the drop-down under Template in the Page Attributes box on the right of the screen. Click the drop-down and select your new template. Click the blue Update button in the box above to publish the page.
-
1
Tips & Warnings
When coding your own WordPress theme, use a CSS framework such as 960.gs or Blueprint CSS. Then instead of editing the width of a column in CSS, you can add column classes to your HTML tags to define width.
Do not name your template file "home.php" or "front-page.php," because WordPress treats these files as alternatives for "index.php."
References
- Photo Credit Thinkstock Images/Comstock/Getty Images
