Post
Ask Question

A Guide to Create Custom Page Templates in WordPress

WordPress leaves a lot of room in terms of design flexibility, without losing its ‘shape’ thanks to the modularity of its templates. Think of these as the ‘bricks’ that are put together, as directed (in query strings) to create a wall (webpage) in a building (website).

That wasn’t so bad as far as analogies go…

For a WordPress theme developer, custom page templates are actually more important than any paint job with CSS. Why? The custom page templates can deviate from default WordPress page structure and contain special features, layout options, etc. Simply put, your WordPress theme gives as much autonomy to its users as directed in its templates.

In this post, I’ll walk you through the process of creating a custom page template in WordPress.

The Basics of creating a page template

Technically (and quite literally too), the process is as simple as creating a new file. Go to your theme folder, create a new code txt file and paste this opening block of PHP in it.

  1. <?php  
  2. /* 
  3. Template Name: Test-Run Custom Page 
  4. */  
  5. ?>  
Make sure to name your file after the ‘Template Name’, you put here.

This step applies to the custom page template creation, regardless of theme: Whether it’s WordPress default, a third-party theme, or your own custom theme. Nonetheless, I would advise you to start with a child theme. Here’s a detailed tutorial on how to create a child theme in WordPress.

Once that’s done, the custom page template will appear in your page attributes menu (in WordPress admin’s “Edit Page” screen). To apply the page template, you simply have to select it and click ‘update’. The page’s live view will immediately change as per the code in this template file.

Here’s a basic custom page template, created from one of the WordPress default themes (Twenty Fourteen).
  1. <?php  
  2. /** 
  3. * Template Name: Test-Run Page 
  4. */  
  5. get_header(); ?>  
  6.   
  7.     <?php  
  8. if ( is_front_page() && twentyfourteen_has_featured_posts() )  
  9. {  
  10. get_template_part( 'featured-content' );  
  11. }  
  12. ?>  
  13.         <div id="primary" class="content-area">  
  14.             <div id="content" class="site-content" role="main">  
  15.   
  16.                 <h1>Hello There</h1>  
  17.   
  18.             </div>  
  19.             <!-- #content -->  
  20.         </div>  
  21.         <!-- #primary -->  
  22.         </div>  
  23.         <!-- #main-content -->  
  24.   
  25.         <?php  
  26. get_sidebar();  
  27. get_footer();  
  28. ?>  
template
                                                               Source: WPMUDEV

It’s given to use the rest of your theme’s template files to code a new custom page template. You can simply go to your theme folder, pick a template file, copy the code and paste it into your custom page template file. Edit it as per your needs. For instance, in the code, depicted above, the author simply copy-pasted the code from another template file in Twenty Fourteen and removed the WordPress Loop.

This saves a lot of time and effort.

So now that you understand the basics, you can practically create whatever you want (as long as it’s written in PHP and HTML). A valuable suggestion is that you shouldn't add CSS within the template files as it only makes it cumbersome.

Room for choice: layout options and settings

As I said before, the options and functionalities make your theme awesome and give better maneuverability over visual presentation of their WordPress website.

Now, this can be done by one of the two ways. You can register individual meta boxes or you can skip the trouble (and unnecessary coding) and use Advanced Custom Fields plugin. The settings can be entirely new (created by you) or you can cut the process in half by importing some built-in settings in XML format. WordPress Import tool can be used from here. The new settings will show up in your plugin screen.

Now, all you have to do is to create a new page, apply your custom template to it and you should be able to see the new settings, grouped in meta boxes beneath the post list options.

You are done.

Endnote

Now, that you know what templates can or can’t do, you can create WordPress themes that go a step further than just colors and fonts. With the templates, you can modify not just appearance, but functionality and a whole group of them will give the users an easy control over their own theme without making many changes in the code.

Make sure to keep any additional options short, simple and on a strictly as-needed basis. Too much of a good thing and all, you know…

Use the templates for good and creative purposes: Maps, Forms, Multimedia players, sidebar navigation, et al….
It is just the beginning of all the amazing things you can now add to your WordPress theme.

 


Similar Articles