How to create Custom Page Template in WordPress
1 like238 views
The document outlines how to create a custom page template in WordPress to design unique layouts and content for specific pages without affecting others. It includes steps for creating a template file, applying the template to a page in the admin dashboard, and provides code examples for a contact form. Using custom templates is recommended for specific page customizations.
![<?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>
FULL CODE -](https://image.slidesharecdn.com/howtocreatecustompagetemplateinwordpress-180804183853/85/How-to-create-Custom-Page-Template-in-WordPress-8-320.jpg)
How to create Custom Page Template in WordPress
- 1. How to Create Custom Page Template in WordPress By Makitweb
- 2. 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.
- 3. Contents - 1. Create Template file 2. Apply Template 3. Conclusion
- 4. 1. Create Template file ● Navigate to your active theme directory e.g. – twentyseventeen. ● Here, create a new directory page-template to store template files.
- 6. â—Ź Open contactpage.php. â—Ź Create a new contactpage.php file inside page-template/ directory. You can rename the page to something meaningful name if you want.
- 7. 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.
- 8. <?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> FULL CODE -
- 9. <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();
- 10. 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.
- 12. â—Ź Save and View the page.
- 13. 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.
- 14. Share For More WordPress related tutorial as well as other programming tutorials visit : Makitweb.com