fbpx
How to Create a Custom Page Template in WordPress

How to Create a Custom Page Template in WordPress

Do you want to create a custom page template in WordPress? Then you have already known that pages in WordPress are generally used to write permanent and little variable content, but they can also be used to create a custom design to give a particular appearance to each type of page. Thanks to the possibility that WordPress offers to create a custom page template, and that’s what we’re going to see how to do.

It is really cool to redesign your website with your own hands and that is why many of the beginners go further and learn how to make a page truly unique. If you are reading this post, you are one of them.

Well, today we are going to learn how to create a custom page template in WordPress.

1- What is a WordPress Page Template?

In the beginning, there was the word “WordPress Page Template”, so let’s define the term first. The appearance of your WordPress website is determined by templates/ themes. The colors of your buttons, the sidebar placement, the fonts, and the position of the search form – all are set by a theme.

In two words, a web page template is a .php file that describes what your page looks like. All .php files for every WordPress template are stored in the “themes” folder of the “wp-content” directory. You can apply page templates to specific pages, page sections, or a class of pages. Some of the pages always differ from others, for example, an “about us” page. Usually, almost every WP theme already has a set of predesigned pages that are applied automatically.

But how does WordPress understand which .php template to use in each situation? That’s when the template hierarchy arrives on the scene.

2- Importance of the Template Hierarchy

Anarchist-chart

When a user browses one of your website pages, WordPress looks for a .php file that explains what it should show. The CMS always looks for a required file in a specific stable order. This order is called the template hierarchy. Let us show you how it works.

Suppose, a visitor wants to read one of your blog posts. The first thing WordPress will check is if you assign a specific custom page template to this particular page. You are completely free to create any number of custom WordPress page templates and make each part of your website unique.

If there is no file assigned, WP will search for a category page template. It looks like this: category-best.php. This page template determines the appearance of the entire category of pages and allows you to set a specific appearance for a group of posts of the same theme.

If you don’t set your mind for a different appearance for each category and there is no category1.php file, WordPress will check the ID number for that category. Let’s say it’s 15. Then, WP will look for a category-15.php file.

And there won’t be this file because you don’t care about categories (that’s just a guess). So now WordPress will look for the basic page.php file. This file determines how all pages should look if they are not modified in some way.

It may not find a page.php file. It is a very rare situation and will probably never happen if you work with predesigned templates. But if such a problem occurs, WordPress will find the index.php file and display at least something to the user. This is a default website template that defines the basic look of the page.

3- Create a Custom Page Template in WordPress

Finally, let’s start practicing. First, you should create a .php file in a code editor of your choice. We prefer Visual Studio Code, but you can also use Notepad ++, Sublime, or whatever you want.

Two things every web page needs are a header and a footer. To display them in your page template, add the following code to the .php file you created.

<?php / *** Template Name: Custom P age Template * / get_header (); ?>
 
<?php get_footer (); ?>

It will look like this:

explore-code-to-create-a-custom-page-template-in-wordpress

Now save the changes and open them in the Xampp -> htdocs folder or an FTP or cPanel file manager for your website.

Upload the file you created to your domain -> wp-content -> themes-> current theme folder of your website -> file name.
file-path-custom-page-template-in-wordpress

Now click  Pages> Add New in your WP dashboard, fill the new page with content and take a look to the right. There will be a “Page Attributes” panel. Click on the “Template” bar and select the “Custom” and click on the “Publish” button to create a custom template page in your WordPress.
editor-custom-page-template-in-wordpress

After clicking the “Publish” button and reaching the website, you will see a very simple page structure. It will have a header and a footer, but that’s about it. It seems very boring, doesn’t it?
custom-page-template

We are sure you won’t like this basic design, so let’s make it more interesting. It’s easy, you just have to copy and paste a bit. Almost any WordPress theme has predesigned additional pages. For example, our theme (we used TemplateMonster’s FreeBook) has a landing page and a custom page template without a header and footer. The Twenty Twelve theme (one of the free default WP themes) has a 404 page and an archive page. The Twenty Fourteen theme (another free theme) can provide you with a Contributors page. Also, each theme has some pre-coded page parts that are stored in your theme’s wp-content / themes/folder. You can download said page part file to your computer, open it, and just copy and paste it into your new custom WordPress page template. Here’s what our theme’s sidebar template looks like:

template-code-custom-page-template-in-wordpress

For more information, click here

We just copy and paste this code into our .php file. Look, it now has a sidebar!

4- WordPress Custom Page Templates for Different Purposes

As you’ve probably already understood by looking at the WordPress template hierarchy, you can create a .php page template not only for a single page but also for a group of pages. This is a category or type to which a specific page template will be automatically applied.

Universal Custom Page Template

Let’s say you need a WordPress template .php file that will be available to any page you create. First of all, pay attention to its name. If the name of your .php starts with “page”, WordPress will interpret it as a specialized template that must be applied to a specific page. Also, try to choose an understandable name so that you can remember what’s inside the file at any time.

After creating a custom page template, you need to upload it to your theme’s wp-content / themes/folder via FileZilla or cPanel. Now, this option is available to you in the “Page attributes” drop-down menu of the administrative control panel every time you create or edit a new page.

The Custom Page Template for a Single Page

You might want one of your static pages to look different from others. The situation where all your static pages are unique is also possible.

Create a .php page template and name it page- {slug}.php or page- {page ID number}.php, and upload this file to the current theme folder. In this case, WordPress will automatically use this template only for a specific page that matches the ID number or the slug in its name. For example, you want to create a Contacts page and suppose it has ID number 9. Create a custom WordPress page template page-contacts.php or page-9.php, and it will apply only to the Contacts page.

The Custom Page Template for Posts

You’ve already created a custom page template, but you want your post pages to be the same. In this case, changing the name will not help, as you must add an additional line of code to that template. Type ” Template Post Type: post, page ” just below the Template Name row. It will look like this:

<?php

/** * Template Name: Custom Page Template
Template Post Type: post*/

get_header(); ?--&gt;

&lt;!--?php get_footer(); ?>

This way you can also add events and other types of content that you have on your website. We should mention, however, that this method will work only if your WordPress is version 4.7 or newer. Older versions just ignore the Template Post Type row.

5- Why are Conditional Tags Great?

We have previously described how to create completely new page templates, but what if you want to make some changes to an existing template? There are situations where you need something to be displayed only if a condition is met, so you don’t want to create a page that differs from others only in a small detail or is displayed only in a particular situation.

This is why conditional tags are so cool. They are used in a line of code that checks if some condition is met or not. If it is true, the first part of the code continues to execute and if not, the part after “else” is executed. For example, you want a specific type of sidebar to be displayed to users who open Files. The code to do this will be:

if ( is_archive() ) {
get_sidebar ( 'archive' );
} else {
get_sidebar();
}

Here is a list of the most frequently used conditional tags:

  • is_home () Has a “true” condition when the home page is displayed (the one you defined as the home page)
  • is_front_page () Has a “true” condition when the front page of the website is displayed (the one that was configured as the main page)
  • is_single ()  Has a “true” condition when input is displayed and will be “false” when a user is on a page. This conditional tag could be more specific if you put the title or id of the particular entry in brackets. It can be a single particular input ( is_single (`21`) or  is_single (` batman `) ) or a group of inputs ( is_single (` 3, 15, 47`) or  is_single (` batman, superman, ironman`)
  • is_page () Has a “true” condition when a page is displayed. This conditional tag has all the same options as is_single (). You can mention the name or id of some page in brackets, and this code snippet will crawl a single page or a group of pages
  • is_page_template ()  Has a “true” condition when a particular page template is used on that page. You must enclose the name of that custom page template in square brackets in the form of ” template_name.php “ 
  • is_category () Has a “true” condition when displaying a file category page. This condition could be specified the same as is_single () and is_page ()  – by enclosing the specific category name of the file or its ID in brackets
  • is_tag () Has a “true” condition when displaying a tag file page. You could mention a certain tag in brackets or crawl all the tag pages. If you want to know if there are any tags on the particular page, you can use have_tag ()  inside the Loop.
  • is_archive () Has a “true” condition when a user goes to an Archive page
  • is_author () Has a “true” condition when the author page is displayed. It could track a specific author (by name or ID) and a group of authors
  • is_date () Has a “true” condition when displaying an archive page of a given date. There are also more precise conditions: is_year () (when displaying an archive page of the given year), is_month () ( crawling all monthly pages), is_day () (doing the same with the specified day), and is_time () (you can make it crawl a page that was published at the precise moment)
  • is_search () Has a “true” condition when a user reaches a page as a search result
  • is_404 ()  Has a “true” condition when the default (or cleverly designed) “Error 404” page is displayed to the visitor
  • is_attachment () Has a “true” condition when a user goes to the attachment’s “own” page (attachments are images or videos that are added to posts through the media library or editor)
  • comments_open () Has a “true” condition if the page builder marked that comments are allowed on that page

6- Page Template Functions

Copying and pasting the code for a ready-made page template is a quick and easy way to create a unique look, but what does all that code mean? Of course, web developers learn everything about PHP and know exactly what functions to use, how to use them, and when. However, if you are still reading this, you are not a web developer, or at least you do not have much experience. Since we are talking about total control over your website, we cannot forget about template tags.

WordPress uses many different PHP functions and those that are used only for themes are called Template tags. You’ve already seen them when creating your first .php page template: get_header () and get_footer () are template tags. We will not talk about all the existing tags, as there are too many, but we will mention those that you will definitely find while designing your website.

get_header (), get_footer (), get_sidebar ()

These three template tags add a header, footer, or sidebar to your custom WordPress page template. Those parts are taken from the theme you currently use. If you want a specific header, footer, or sidebar to apply to that page, enclose its name in brackets. For example, to use a header-superstar.php file, you will need a get_header (`superstar`) template tag.

get_template_part ()

It also adds a certain part of a ready-made template to your .php theme. The difference is that if the brackets remain empty, nothing will be added. You must define what to add. Typically, this template tag is used to move a piece of code from parent to child theme.

get_search_form ()

You will need this to add a search form to the sidebar. Search widgets also often use this template tag. Locate search_form.php in the theme folder and then add it to a custom page template.

get_page_template ()

This function retrieves the pass to the currently used template according to the template hierarchy.

wp_login_form ()

If there is nothing in the brackets, this feature adds a simple WordPress login form to the custom page template. If you want to use a particular form, you must enclose its name in brackets the same way you do for the get_header () template tag.

get_calendar ()

Show a calendar on the page. It will be designed according to the current theme. You can also add a modified calendar according to your taste; just enclose its name in brackets the same way you do for the sidebar or footer.

That will be enough for you if learning PHP is not your wish. There are over a hundred template tags in WordPress, so we think even web development gurus use cheat sheets. If you are really interested in learning more, visit  WordPress Codex

7- Useful Pages Every WordPress Site Should Have

Now you have the power to customize every part of your website. You can create page templates for each page and make it as unique and complex as possible. However, it may be that you already have another question: what pages would be really useful for my website? So, let us give you some examples.

Cool 404 Page

Nobody likes this page, because it makes you feel like an idiot. However, its design could make a user go away or search again. Every “404” page should contain a link to your home page and a search form that encourages the user to stay on your website.

Page “About us” with Your Team

The “About Us” page is one of the most visited on your website. People love to know who you are communicating with. It is a very important part of your website and a unique custom page template is a must for it. It would be really cool if all the team members showed up at a table. And It is not difficult to create such a function: you can copy it from a similar page of the free WP Twenty Fourteen template.

Custom Archive Page

Your goal is to make every user visit as many pages as possible. This is why your WordPress archive page type should contain links to the most recent posts from different categories and attract the attention of visitors. It shouldn’t just show the available categories and tags, as that’s boring. A good idea would be to show your 5 most popular posts or a few random items. It takes some effort on your part, but it surely affects your website traffic rates well.

Contact Page with Contact Form

It is obvious that a user looking for your contact information wants to communicate with you. Making the fulfillment of that wish easy for the visitor is not only a good idea, but must be mandatory for you, if you want to be successful. Make sure that your contact page not only has your phone number and email address but also integrates a contact form and Google map with your location pointer.

You May Also Read: 5+ Best Form Builder Plugins for your WordPress Website

Alphabetical Sitemap

If there are many articles on your blog, you should create a sitemap. This is a page that lists all the posts you have written and published. It would be really convenient if all these publications are organized in a certain order (for example – alphabetical). In this case, the free WordPress themes will help you once again. Twenty Fourteen has a custom WordPress “alphabetical posts” page template, so you can just replicate it.

Conclusion

Well, hope you can now easily create your custom page template in WordPress. It’s not so difficult to create. You just need to follow the instructions that we have given in this article. If you find any trouble or have any questions, please feel free to ask us by commenting below.

Last Update:

About the Author

One Comment

  • Gitara struny says

    Thank you very much for posting this post. It has benifited me and my dad hundreds and I doubtless browing by way your other posts as I enjoyed this publish very much. Thanks once more and proceed the great work!

Comments are closed.