WordPress Page Template


WordPress Page Template – WordPress page template is a feature that enable us to create different layout for each page in our website. In this tutorial we are going to create a new Page Template called “Contact”.

This tutorial is using the default Twenty Fourteen theme. However this technique can be applied to other themes, we choose Twenty Fourteen to simplify matters.

WordPress Page Template

If you’re still confused about what we are talking about, please check this two links from our website:

Our License Page:

WordPress Page Template

Our Contact Us Page:

WordPress Page Template

Both links above are WordPress page, using different page template. Resulting in very different looks and feel.

Creating a New Page Template

Before starting this tutorial , please make sure you choose Twenty Fourteen as your theme. Use your file manager to access your website (Filezilla / Cpanel File Manager ) to access your theme folder. If  your website is still offline you can just use Windows Explorer.

  1. Access your theme folder: ” [Wp Install Path]/wp-content/themes/twentyfourteen”.
  2. Create a new file called “contactPage.php”

Copy and paste this code to “contactPage.php”:

< ?php
 * Template Name: Contact

Congratulations ! You’ve just made your first page template. You can now access your page template in any page you created. Open any page in your website, then check the “Page Attributes” box, it is usualy appears on the right side. The “Template Name” that we put in the “contactPage.php” will be the name that we can choose in the “Page Attributes” box.

WordPress Page Template

If you chose “Contact” template and preview the page , you will see nothing. That’s because we dont define our logic for the templates yet. Keep calm and relax , we’ll do that on our next step.

Match Our Page Template Style with the Rest of the Theme

WordPress using templating system called “Template Hierarchy”. When a page is requested from your website, it should go to “page.php” or “single.php”.

Actually it is not as simple as that, if  want to find more about “Template Hierarchy” , open this references:

Now you want to make our new page template match the style with the rest of the theme, right ? We’re going to be little hacky this time.

  1. Find “page.php” in your  “[Wp Install Path]/wp-content/themes/twentyfourteen” folder.
  2. Open the file and copy all the content from “page.php” to “contactPage.php”. You can ommit the comment from page.php if you want

Our “contactPage.php” will look like this:

 * Template Name: Contact

get_header(); ?>

<div id="main-content" class="main-content">

	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

				// Start the Loop.
				while ( have_posts() ) : the_post();

					// Include the page content template.
					get_template_part( 'content', 'page' );

					// If comments are open or we have at least one comment, load up the comment template.
					if ( comments_open() || get_comments_number() ) {

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->


Now if you save “contactPage.php” and reload your page you will get the same result with every other page in Twenty Fourteen theme. If you want to make any modification such as adding google maps or using custom image, feel free to edit the “contactPage.php” file!

Have You Successfully Used WordPress Page Template?

That is the tutorial about WordPress page template. If you want to add features to your website, you can do so by installing WordPress plugins.

Using WordPress, you can also create your own online store by installing WooCommerce and adding the best WooCommerce plugins.

However, if you want to focus on your business and avoid the hassle of website development, you can collaborate with the Tonjoo Team, specialists in website development with over 10 years of experience.

We have worked with governments, corporations, and startups. Some examples of our work include Borobudurpark, Universitas Gadjah Mada, Futureskills, and Hello Health Group. Contact us to collaborate!

how to install wordpress


Read similar posts by Moch. Nasikhun Amin on the Tonjoo’s blog about WordPress, WooCommerce, plugins, and other web development subjects.



Updated on May 16, 2024 by Moch. Nasikhun Amin


No comments entry.


Lets Work Together!

Create your ideal website with us.