Introduction to WordPress Page Templates

WordPress page templates are a powerful feature that allows you to customize the layout and design of individual pages on your website. In this guide, we'll provide an introduction to WordPress page templates, explaining what they are, how they work, and offering sample HTML code for creating and using them effectively.

1. What Are Page Templates?

Page templates in WordPress are pre-designed layouts for specific pages on your website. They allow you to control the structure and appearance of a page independently of your theme's global design. Common use cases for page templates include:

• Custom Landing Pages: Create unique landing pages with tailored content and design.
• Portfolio Pages: Display your work or projects with a customized layout.
• Specialty Pages: Design pages for contact forms, archives, or sitemaps.

2. How Page Templates Work

WordPress page templates work by associating a specific template file with a particular page. Here's how it's done:

Step 1: Create a Template File

Start by creating a new PHP file in your theme directory. This file will serve as the page template. You can name it anything you like, but a typical convention is to prefix it with "page-". For example, "page-custom.php".

<!-- Sample HTML code for creating a WordPress page template -->
<code>
<?php
/*
Template Name: Custom Page Template
*/
// Your custom template content here
?>
</code>
    

Step 2: Define the Template Name

In the template file, define the template name within a comment block as shown in the code above. This name will be visible when you select the template for a page in the WordPress editor.

Step 3: Edit a Page

Now, go to the WordPress page you want to use the template for or create a new one. In the page editor, you'll find a "Template" dropdown in the Page Attributes meta box. Select your custom template from the list.

3. Sample Use Cases for Page Templates

Let's explore a couple of sample use cases for WordPress page templates with HTML code snippets:

Custom Landing Page

You can create a custom landing page with a unique layout and design. For example, to create a full-width landing page, use the following code:

<!-- Sample HTML code for a custom landing page template -->
<code>
<?php
/*
Template Name: Custom Landing Page
*/
get_header(); // Include the header
?>
<div class="landing-content">
    <h1>Welcome to Our Website</h1>
    <p>This is a custom landing page.</p>
</div>
<?php
get_footer(); // Include the footer
?>
</code>
    

Portfolio Page

Create a portfolio page with a grid layout to showcase your work. Here's a code snippet for a portfolio page template:

<!-- Sample HTML code for a portfolio page template -->
<code>
<?php
/*
Template Name: Portfolio Page
*/
get_header(); // Include the header
?>
<div class="portfolio-grid">
    <div class="portfolio-item">
<img src="portfolio-image-1.jpg" alt="Portfolio Item 1">
<h2>Project 1</h2>
<p>Description of the project.</p>
    </div>
    <div class="portfolio-item">
<img src="portfolio-image-2.jpg" alt="Portfolio Item 2">
<h2>Project 2</h2>
<p>Description of the project.</p>
    </div>
    <!-- More portfolio items -->
</div>
<?php
get_footer(); // Include the footer
?>
</code>
    

4. Applying Your Page Template

After creating a page template, you can apply it to any page you want. Here's how:

Step 1: Edit or Create a Page

Go to the WordPress page editor. You can either edit an existing page or create a new one.

Step 2: Select Your Template

In the Page Attributes meta box, find the "Template" dropdown. Select your custom template from the list.

Step 3: Update or Publish

After selecting the template, click "Update" (for existing pages) or "Publish" (for new pages) to apply the custom layout to your page.

Conclusion

WordPress page templates are a valuable tool for customizing the layout and design of individual pages on your website. By following the steps and sample HTML code provided in this guide, you can create and use page templates to create unique and visually appealing pages that match your site's content and design goals.