Everything You Need To Know About WordPress Custom Page Templates

WordPress was launched in May 2003. And then came along the series of revolutions that changes website development forever. WordPress Custom Page Template is one of them. Before the launch, it was awkwardly typical to develop and maintain a website theme.

With the launch of WordPress, website development and maintenance became easy to handle. This page template allows users to change their website’s design and layout to their liking. This introduction has provided ease to all website owners and website designers.

In this post, I am going to give you some rudimentary facets of WordPress Custom Page Template which cover everything including its usage, hierarchy of template, naming your page template, advantages of using a page template, and how to create a custom page template.

But before jumping onto that, I would like to first cover what a custom page template is. Let’s begin.

What is a Page Template?

When we talk about the template in WordPress, “Templates are those files which provide WordPress the information about how it can display a different kind of content.”

This is exactly what a page template is in the context of WordPress. WordPress chooses the most appropriate template file from your theme’s file list. WordPress identifies the most appropriate file by an internal set of hierarchies. This is known as Template hierarchy.

Let’s unfold some facts about Template hierarchy.

The Template Hierarchy

Let us understand this term like this, all the pages of a WordPress website are interconnected to each other. Every template of that WordPress represents a page. And together they all form the entire content of the website. The selection of these templates by a file is entirely based on a solid hierarchy, based on the name convention. This hierarchy is the “Template Hierarchy”.

This Template Hierarchy decides which PHP template file will be chosen to construct a given web page on your WordPress website.

How Template Hierarchy Works?

You can think of it like a decision tree that works its way down to the roots. Let’s illustrate this to have a better understanding of the hierarchy. Suppose you want to access a website http://xyz.com/category/events, the WordPress will start looking for the template in this order.

→ category-[slug].php:- category-events.php
→ category-[ID].php:- if here the category is 7, then category-7.php
→ category.php
→ archive.php
→ index.php

The last one index.php will be most often used because if WordPress is unable to find any more specific template files. In short, if the rank of your template file is higher than that WordPress will be always bound to use that file automatically.

Uses of WordPress Custom Page Template.

Generally, the template for pages is appropriately named page.php. WordPress usually uses page.php to display the content of all the pages.

However, sometimes a designer needs a change of layout by the pages, layout, or functionality. Whenever these kinds of situations arise, a page template is the best solution. This enables you to customize those selected parts of the website which you want to individualize in your website.

Now, let’s move on to the next part. Now, we will be making a custom page template in WordPress. However, I want you to take special attention. Because when you make changes in one of the templates, there can be a lot of complications. Hence, I always recommend it to be built on a child theme. So, I hope you understand why I made such a request. So, let’s create a child theme and then add a custom WordPress page template.

Step by Step Building a Custom Page Template

These steps are not very hard to follow, however, I still recommend my readers pay attention to some of the details. So, let’s go through the process one step at a time.

Let’s Find a default template

Now, it is considered to be wiser, if you just copy the default page template and use those codes. Writing from scratch can be a good thing, but it is too lengthy. Most of the time, the default page template is page.php.

For a demo, Let me choose the Twenty Twelve WordPress theme for this illustration.

/**
* The template for displaying all pages
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site will use a
* different template.
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/

<?php get_header(); ?>

<div id=”primary” class=”site-content”>

<div id=”content” role=”main”>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!– #content –>

</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As it is visible, there is nothing fancy all the elements are normal. It will look like this:

Now, Let’s copy and rename the template file.

Now, you’ve identified the default template file. Now, it’s time to copy that file and rename it. Now, you’re going to make changes to this file. Here I named it, “My Custom Template”.

The Template file header Customization.

Now, we have to inform WordPress about this new custom page template. So, for this purpose, you have to make the following adjustments,

/*
* Template Name: My Custom Template
* Description: Page template without sidebar
*/
// Additional code goes here…

As you can see, the name under “Template Name” is the name you had given to your template in step one. Please make sure that you change the template name.

Code Customization

Now, it is the time when you will have to get the main ingredients of your page template: The Code. Here, I just want to remove the sidebar of the template so that it can become a full-width template.

This part is easy, all I have to do is remove the “<?php get_sidebar(); ?>” part from the template file. So, now the template will end up looking like this,

/*
* Template Name: Custom Full Width
* Description: Page template without sidebar
*/
get_header(); ?>
<div id=”primary” class=”site-content”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_footer(); ?>

Uploading the Template file.

Now, you have to activate the theme on your website. A custom page template can be saved in many places such as:
In the folder of the Main Theme.
A subfolder of the Main Theme.
In the folder as your active child theme.
In a subfolder of your active child theme’s folder.

So, upload the theme in such a folder where you can easily differentiate it from others.

Activate the Page Template

Just go to the Page attribute→ Templates in the WordPress editor.

After activating the theme you’re done, now just visit your page and see it yourself,

As I said it’s not as hard as it seems. Now, Let me mention some other important ways to Use a Page Template. Here we go,

Different Methods to Use Page Templates.

As I mentioned above, you can use a Page Template in every tangible way, Let’s have a look at these ways,

l Full-Width Page Template

This is a whole lot of advanced versions of the demonstration we’ve done above. In the above demonstration what we’ve done is just remove the sidebar. You can see there (In the screenshot), that we just remove the sidebar however the text is all of the same width.

So, to address this problem, we have to go to CSS,

.site-content {
float: left;
width: 65.1042%;
}

Here, the width of the text element is limited to 65.1042%, and this is the element we want to change or rather I say increase.

Looks like we can change the number, aye? If we do that, then things might go rogue on all the other pages. So, to do this let’s first change the primary div’s class in our page template to class=”site-content-fullwidth”.Then the result will be like,

<?php
/*
* Template Name: Custom Full Width
* Description: Page template without sidebar
*/
get_header(); ?>
<div id=”primary” class=”site-content-fullwidth”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_footer(); ?>

Now, All we need to do is adjust the CSS for the new custom class.

.site-content-fullwidth {
float: left;
width: 100%;
}

Now, the webpage’s text will be fully stretched to 100%, here are the final looks of the web page.

l For the Custom Post Type.

The custom post type is a unique way to present content as it has its own sets of data points and designs. It is Ideal for reviewing purposes. In this demonstration, I’ll show you how to use custom post types to build a portfolio platform for items.

To create a custom post type, you’ll have to ask for help from a plugin that facilitates you to build a CPT (custom post type). Now, install and activate that plugin after which you can add a custom post type. P.S. make sure for the slug, it must be ‘Portfolio’.

Now, you have a portfolio custom post type, Just consider one thing, the slug for the custom post type should be unique. In this demonstration, I am using clients-portfolio as a slug.

Portfolio page without custom page template.

Now, add some items to the Portfolio page. Now, I want to show these items underneath the page content. For this purpose, we’ve to again use a copy of page.php. Name it portfolio-template.php. We will change the header to this,

<?php
/*
* Template Name: Portfolio Template
* Description: Page template to display portfolio custom post types
* underneath the page content
*/

Now, there’s a twist, we’ve to make some changes to the original one as well. If you observe the coding of page.php you’ll see that in the middle it is calling another template file content-page.php. In that particular file, we’ve to look for the following codes,

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<header class=”entry-header”>
<?php if ( ! is_page_template( ‘page-templates/front-page.php’ ) ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
</header>
<div class=”entry-content”>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘twentytwelve’ ), ‘after’ => ‘</div>’ ) ); ?>
</div><!– .entry-content –>
<footer class=”entry-meta”>
<?php edit_post_link( __( ‘Edit’, ‘twentytwelve’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</footer><!– .entry-meta –>
</article><!– #post –>

Once, you find it, You’ll have to make changes to our page.php file. The changes will look like this,

<?php get_header(); ?>
<div id=”primary” class=”site-content”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<header class=”entry-header”>
<?php the_post_thumbnail(); ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
</header>
<div class=”entry-content”>
<?php the_content(); ?>
</div><!– .entry-content –>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now add the following code just below the_content() call

<?php
$args = array(
‘post_type’ => ‘portfolio’, // enter custom post type
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
);
$loop = new WP_Query( $args );
if( $loop->have_posts() ):
while( $loop->have_posts() ): $loop->the_post(); global $post;
echo ‘<div class=”portfolio”>’;
echo ‘<h3>’ . get_the_title() . ‘</h3>’;
echo ‘<div class=”portfolio-image”>’. get_the_post_thumbnail( $id ).'</div>’;
echo ‘<div class=”portfolio-work”>’. get_the_content().'</div>’;
echo ‘</div>’;
endwhile;
endif;
?>

This will make the Custom Post type as,

Now, if you want to add some more designs you can copy-paste the following codes,

/* Portfolio posts */
.portfolio {
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.75);
margin: 0 0 20px;
padding: 30px;
}

.portfolio-image {
display: block;
float: left;
margin: 0 10px 0 0;
max-width: 20%;
}

.portfolio-image img {
border-radius: 0;
}

.portfolio-work {
display: inline-block;
max-width: 80%;
}

.portfolio h3{
border-bottom: 1px solid #999;
font-size: 1.57143rem;
font-weight: normal;
margin: 0 0 15px;
padding-bottom: 15px;
}

This change will look like this,

Isn’t that great?

So, these are some cool ways you can use custom post types, once done, they can make your website not just stylish but also unique.

Wrapping Up

In this entire journey from 2003 till now, there are many things we learned and to be honest, we all have evolved. And WordPress is the platform that witnessed a revolution in the evolution of technology. HTML to a user-friendly CMS. Complex to easy.

Learning WordPress and its page templates can be complex. I will recommend you go one step at a time, and you will see how fast you can master the art.

If you like my post please share it and if you guys are stuck somewhere over the steps, remember one thing, “I am just a comment away”.

Author Bio

Kiara Marsh is a WordPress developer and a passionate blogger. She works for Wordsuccor Ltd., a leading WordPress theme customization company. Kiara has 5+ years of experience in the industry, and she likes to share her development experience and knowledge with insightful posts.