How to create a custom page template in WordPress

How to create a custom page template in WordPress. WordPress out-of-the-box does a great job of making life simple but sometimes life is more complicated than we would like it and so we need a way of spliting our pages into discrete sections, perhaps with custom navigation panels or images that are suited to the content. Customised templates provide an answer to this problem and can be achieved with very little knowledge of code. Creating a new custom template will allow you to have different layout according to your needs.

What is a custom template in WordPress

WP-CustomTemplate1 By now you should realise that from within your new page screen within WordPress you can select the type of page template that suits your needs. For example, a full page layout or a layout with a side bar. The problem is that the side bar will always have the same features (widgets), regardless of the content of your page. You can edit the widgets within this sidebar but of course they will change site-wide which defeats the purpose of your chnages. Sometimes your pages would benefit with their own custom links or custom images within the sidebar, this is where custom templates can help.

WordPress themes control the appearance of your pages by utilizing a template file called page.php. We will need to copy this file and create our own version of it with it’s own unique name to create a custom template. From here we can make simple edits to create a new unique page template.

Creating a Custom Page in WordPress

First, you need to open a plain text editor like Notepad on your computer. In the blank file add this line of code at the top:

<?php /* Template Name: My New Custom Page Template 1 */ ?>

This code simply tells WordPress that this is a template file and it should be recognized as: My New Custom Page Template 1. You can name your template anything you want as long as it makes sense to you. Once you have added the code, save the file to your desktop as: MyNewCustomPageTemplate1.php This file can be saved as any name you like however it needs to be saved with the .php extension.

Copy the code contained in the page.php file

The most straightforward way to get started with a custom page is to copying an existing page template provided by your theme. This example uses the pages.php file which is located in your themes folder (in this example it is in the twentytwelve folder. Use your FTP client again and download pages.php from the server.

Open page.php in a text editor, copy the entire contents and the paste this underneath the line: <?php /* Template Name: My New Custom Page Template 1 */ ?> which you have just created in your file called: MyNewCustomPageTemplate1.php. Your custom page template file should now look something like this:

<?php /* Template Name: My New Custom Page Template 1 */ ?>
<?php
/**
* 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
*/
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(); ?>

Note: You can delete or edit for your own purposes any comments that appear between ‘/**’ …. and ending with ‘*/’. These are just notes that the author used to help with documentation. You may prefer to make your own notes in this header section or simply leave alone until you have built your first successful template.

Upload your newly completed template file to page-templates folder in your current theme. The example provided here is in the theme folder of /wp-content/themes/twentytwelve. You will need to do this through an FTP client, like FileZilla or similar.

Once uploaded login to your WordPress admin area and open an existing page to edit or create a new page. On the selected page scroll down to the Page Attributes section, and locate the template drop down menu. You will notice that your new template has appeared in this list. Click on it and update the page and you will have just created a page with your new template.

Editing Your Custom Page Template

At the moment this file is exactly the same as your page.php template file, except that it has a different file name. You can now make your own html or php edits to this file and any pages that have this template set within their page attribute will display the new custom editing that you make.

Example of edits you may wish to make

  • You can remove the sidebar,
  • add custom HTML,
  • add custom PHP code, or
  • edit the widgets that appear in the template.

You can add any content by editing the page in WordPress page editor screen.

I hope that you have enjoyed this article, please feel happy to leave a comment.

Leave a Reply