How to Create Custom Page Template in WordPress

In WordPress, you can easily customize the page by editing the page.php file of the active theme. But the change will affect on all pages where no need of customization.

You can avoid this by creating the custom page template.

Using this you can design different-different layout for the pages and add extra content to it without affecting regular pages on the site.

In this tutorial, I show how you can create and add the custom template to the page.

How to create custom page template in WordPress


Contents

  1. Create Template file
  2. Apply Template
  3. Conclusion

 


1. Create Template file

  • Navigate to your active theme directory e.g. –¬†twentyseventeen.
  • Here, create a new directory page-template to store template files.

How to create custom page template in WordPress

  • Create a new contactpage.php file inside page-template/ directory. You can rename the page to something meaningful name if you want.

How to create custom page template in WordPress

  • Open contactpage.php.

Add code

To tell the WordPress that this file is a template file by adding the following code at the top and save it. Now the following template name visible on the WordPress Dashboard page template section.

<?php

/* Template Name: Contact page Template */

Add some more code and create a contact form.

Completed Code

<?php
/* Template Name: Contact page Template */

get_header(); ?>

<style>

input[type=text], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px; 
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #007eff;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>

<div class="wrap">

  <h3>Contact Us</h3>

  <div class="container">
    <form action="">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="subject">Subject</label>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

      <input type="submit" value="Submit">
    </form>
  </div>

</div><!-- wrap -->

<?php
get_footer();

2. Apply Template

  • Login to Admin Dashboard and navigate to Pages->Add new or Edit an existing page.
  • Template list display in Page¬†Attributes section.
  • Select Contact page Template option from the dropdown.

How to create custom page template in WordPress

  • Save and view the page.

How to create custom page template in WordPress


3. Conclusion

It is better to use custom templates if you only want to customize specific pages. You can create separate page-template for multiple pages.

To apply you need navigate to Pages or create a new from Dashboard and select the template.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *