How to Easily Add a Custom Page Template to Your WordPress Theme
We’ve all been there… sometimes your existing WordPress theme just doesn’t cut it. Maybe you want a full-width page for a sales letter or maybe you don’t want the navigation bar to display on a certain page. Whatever the case, a custom page template is most likely your easiest solution.
Create Your Custom Template File
The first step is to create your custom template file. So, open your favorite text editing program (I use Sublime Text 2). Create a new file and save it as a PHP file. Your filename can be whatever you like but it has to be a PHP file.
Add your template name
Next, you need to name your template. This tells WordPress that this page is a custom template and labels it with your chosen name. Here’s the code you need to add to the top of your PHP template file…
<?php //* Template Name: My Custom Template ?>
You can also call your template whatever you want, just as long as it’s unique to the other templates in your theme directory. If you were to save your template and upload it to your theme directory, it should be available under the Template drop-down box in your page edit screen, like in the image below…
If we tried to use this template right now, we’d end up with a blank screen since our template is empty. It’s time to add some code. If you’re gonna keep your template close to the rest of your site, it’ll save you a lot of time by just copying and pasting another file.
For example, lets say I want to create a full-width template to use for certain pages. All I really need to do is remove the sidebar and adjust the size of the content area so it’s wider. Lets do it!
Copy An Existing File As a Jumpstart
In this example, I can copy my existing page template. The WordPress page template is typically named page.php. So, I’ll open that file up in my text editor, copy it and paste it right into my custom template file like so…
<?php //* Template Name: My Custom Template get_header(); ?> <div id="mainwrapper"> <div id="content"> <div class="postwrapper"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> <?php else: ?> <h2>Woops...</h2> <p>Sorry, our fault... this page is no longer available.</p> <?php endif; ?> </div><!-- /POSTWRAPPER --> <?php get_sidebar(); ?> </div><!-- /CONTENT --> <div class="clear"></div> </div><!-- /MAINWRAPPER --> <?php get_footer(); ?> ?>
This is a very basic page template I took from one of my old themes just to use as an example. You can clearly see where the code for the sidebar is above. Just delete this line entirely, including the PHP tags… <?php get_sidebar(); ?>.
Now all that’s left is to adjust the width of my content area, which in this case is the DIV with a class of postwrapper. I have a few options to accomplish this. One, I could just rename the DIV something unique and create a new set of styles for it or two, I could just add an inline style element right inside the DIV adjusting the width.
Inline style elements will override any CSS stylesheet (unless importance is set in the stylesheet). So, I’ll just add an inline element using the code below…
<div class="postwrapper" style="width:800px;">
And that’s that. I’ll save my template, upload it to my theme directory and create a new page using my custom template. Not too painful, right?
There are a lot of ways to get pretty creative with custom templates. You can create custom archive pages, category pages, author pages, custom post type pages and more.
After you’ve created your first custom template, you’ll be addicted.