Everything You Need To Know About WordPress Custom Page Templates

WordPress Custom Page Templates

WordPress was launched in May 2003. And then came along are the series of revolutions which 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 as per their liking. This introduction has provided an ease to all the website owner and website designer.

In this post, I am going to give you some rudimentary facets of WordPress Custom Page Template which covers 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 page template is in the context of WordPress. The WordPress choose the most appropriate template file from your theme’s file list. The WordPress identifies the most appropriate file by an internal set of hierarchy. 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 template 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 it like a decision tree which 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 the WordPress is unable to find any more specific template file. In short, if the rank of your template file is higher than the WordPress will be always bound to use that file automatically.

Uses of WordPress Custom Page Template.

Generally the template for pages appropriately named as page.php. WordPress usually use page.php to display the content of all the pages.

However, sometimes a designer needs a change of layout in accordance with the pages, layout or functionality. Whenever these kind 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 template, there can be a lot of complication. Hence, I always recommend it to be built on a child theme. So, I hope you understand why I made such 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 to 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 code. 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 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:

Default WordPress Template

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 in this file. Here I named it as, “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 do 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,

/*
* 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 into 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.

Activate the Page Template

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

Activate the Page Template - 1

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

Different Methods to Use a Page Templates.

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

l Full-Width Page Template

This is a whole lot of advanced version of the demonstration we’ve done above. In the above demonstration what we’ve done is we 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 widths.

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 the things might go rogue in all the other pages. So, in order to 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 new custom class.

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

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

Full-Width Page Template

l For the Custom Post Type.

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 purpose. 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 take one thing into consideration, the slug for the custom post type should be unique. In this demonstration, I am using clients-portfolio as a slug.

For the Custom Post Type

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 as 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,

For the Custom Post Type - 1

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,

For the Custom Post Type - 2

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 which witnessed revolution to 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 to go as one step at a time, and you will see how fast you can actually master the art.

If you like my post please share it and if you guys 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.

Want more WordPress resources?

Visit WPAll.club for the best and curated WordPress resources. It features the best of the free and premium WordPress themes, templates, plugins, add-ons, deals etc.

-