Creating page templates from scratch

We use templates to keep the site design separate from the logic and reuse it on multiple pages without duplicating the code. WordPress page templates is a feature that allows us to create custom templates and reuse them across multiple pages of the site. These page templates are used effectively in most premium themes to provide designs for common pages that are needed for a site. The knowledge of creating templates is useful for making even minor changes to the default template.

In this recipe, we are going to create a basic page template from scratch using custom coding.

Getting ready

Open the code editor and make sure you have access to the theme files in your local or external WordPress installation.

How to do it...

We can create a page template to use products in a site. Usually, a product landing page is different to a normal page and has different headers and footers. Let's create the product page template. Follow these steps:

1. Log in to the WordPress Dashboard as an administrator.
2. Click the Pages menu.
3. Click the Add New button.
4. Go to Page Attributes section on the right hand column.
5. Click dropdown field for Template setting to get a screen similar to following:

6. Open the wp-content/themes/twentytwentychild folder using a file manager.
7. Create a new template called product.php.
8. Add the following code to the product.php file to define the template as a WordPress Page Template:

<?php /* Template Name: Product Landing Page */ ?>

9. Save the changes.
10. Add the following code to the product.php file to display product information:

<?php get_header(); ?>
 <section id="primary" class="content-area">
 <h2>Product Page</h2>
 <main id="main" class="site-main">
 <?php
 while ( have_posts() ) :
 the_post();
 get_template_part( 'template-parts/content', get_post_type() );
 endwhile;
 ?>
 </main><!-- #main -->
 </section><!-- #primary -->
<?php get_footer();

11. Click the Pages menu.
12. Click the Add New button. You will be taken to the following screen:

As you can see, the settings section now contains a new setting called Template, under Page Attributes.

13. Add a title and content for the page and select Product Landing Page as the Template.
14. Click the Publish button to create the page.

Now, we can view this page on the frontend. We will see that the custom page template is used instead of the default template.

How it works...

We don't have any page templates by default in our child theme. This means that the Template setting on the pages screen is not enabled until we create a template. WordPress uses the Template Name value in the comments section to identify the page templates:

<?php /* Template Name: Product Landing Page */ ?>

Once a comment with Template Name is added, WordPress will consider that file as a page template. The name of the template is the value we define after the Template Name key.

In step 7, we added the elements for the product template. Here, we used a copy of the default page.php template with minor modifications. We removed the comments section and added a new header called Product Page.

Next, we used this template while creating pages using the Template field on the post edit screen. Once the page is saved, the page template name will be stored in the wp_postmeta table with a key called _wp_page_template. The value of this key will be product.php in this case. Once the user requests this page, WordPress will look for the settings to check if the page template is enabled and load the custom template instead of the default one.