Custom Page Templates – Make Your Pages Fancy 🏗️

What Are Custom Page Templates?

Imagine this: you have a standard blog layout, but you want a completely different look for, say, a landing page or a portfolio page. That’s where Custom Page Templates come to the rescue.

Instead of every single page looking the same (boooring 😴), you can create unique layouts for different pages on your site.

Step 1: Creating a Basic Custom Page Template

Let’s get our hands dirty and create our very first custom page template. Start by creating a new file in your theme folder. Let’s call it custom-template.php.

Here’s a basic template to get you started:

<?php
/* Template Name: Fancy Custom Template */
get_header(); ?>

<main class="custom-template-main">
    <section>
        <h1>Welcome to My Custom Page!</h1>
        <p>This is a custom page template. You can make this page look however you like!</p>
    </section>
</main>

<?php get_footer(); ?>

This is the simplest custom template you can create. But wait…what’s with the comment block at the top?

Step 2: Understanding the Magic of Template Headers

The line:

/* Template Name: Fancy Custom Template */

This is the magic sauce 🧙‍♂️. By adding this comment at the top, you’re telling WordPress, “Hey, this file is a custom page template.” WordPress will now show “Fancy Custom Template” as an option when creating or editing pages in the admin dashboard.

Step 3: Using Your Custom Page Template

1. Go to your WordPress admin dashboard.
2. Create a new page or edit an existing one.
3. On the right-hand side, you’ll see a Page Attributes box.
4. In the Template dropdown, you should see the template name you created (“Fancy Custom Template”).
5. Select it, publish or update your page, and voilà – your page is now using the custom template!

Pretty sweet, right?

Step 4: Adding More Awesomeness – Custom Layout

A blank page is not so fun, though. Let’s give our custom page a little more structure. Here’s a more fleshed-out example of custom-template.php:

<?php
/* Template Name: Fancy Custom Template */
get_header(); ?>

<main class="custom-template-main">
    <section class="hero-section">
        <h1><?php the_title(); ?></h1>
        <p><?php the_excerpt(); ?></p>
    </section>

    <section class="features">
        <div class="feature">
            <h2>Feature 1</h2>
            <p>Amazing description of feature 1.</p>
        </div>
        <div class="feature">
            <h2>Feature 2</h2>
            <p>Mind-blowing description of feature 2.</p>
        </div>
        <div class="feature">
            <h2>Feature 3</h2>
            <p>Unbelievable description of feature 3.</p>
        </div>
    </section>
</main>

<?php get_footer(); ?>

Step 5: Customizing the Template with CSS

Now let’s add some snazzy styles to your new custom page. Open style.css and add the following:

/* Custom Template Styles */
.custom-template-main {
  padding: 40px;
  background-color: #f4f4f4;
  text-align: center;
}

.hero-section {
  margin-bottom: 40px;
}

.hero-section h1 {
  font-size: 3rem;
  color: #333;
}

.features {
  display: flex;
  justify-content: space-around;
}

.feature {
  width: 30%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feature h2 {
  color: #0073aa;
  margin-bottom: 10px;
}

.feature p {
  color: #555;
}

This CSS will give your page a modern look with a hero section and three “feature” boxes arranged in a row. You can go wild here and customize the page however you like.

Step 6: Using Dynamic Content

Static content is okay, but let’s spice things up by adding dynamic content from WordPress. You’ve already seen some dynamic tags like the_title() and the_excerpt(). Here are a few more:

1. the_content() – Pulls in the page’s main content.
2. the_post_thumbnail() – Displays the featured image of the page (you’ll need to enable thumbnails in functions.php like we did earlier).
3. Custom Fields – If you want to get REALLY fancy, you can add custom fields to the page (more on that in another chapter).

Let’s update custom-template.php to make use of the_content() and the_post_thumbnail():

<?php
/* Template Name: Fancy Custom Template */
get_header(); ?>

<main class="custom-template-main">
    <section class="hero-section">
        <?php if (has_post_thumbnail()) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail('large'); ?>
            </div>
        <?php endif; ?>
        <h1><?php the_title(); ?></h1>
        <div><?php the_content(); ?></div>
    </section>
</main>

<?php get_footer(); ?>

Now your custom page template will display the featured image (if set) and the page’s main content.

Step 7: Custom Page Templates for Specific Pages

What if you want a custom template for just one specific page (e.g., your About page)?

You can create a page-specific template by naming the file in this format: page-{slug}.php or page-{ID}.php.

• If your About page’s slug is about, you can create a template file named page-about.php.
• If the page ID is 42, you can create a template file named page-42.php.

WordPress will automatically use this template for that specific page. Handy, right?

Step 8: Advanced Page Templates – Conditional Logic

Let’s say you want certain content to show up only on specific pages, or you want to change the layout based on certain conditions.

You can use conditional tags in your template, like this:

if (is_page('about')) {
    // Show something special on the About page
    echo '<p>Welcome to the About page! Here’s some exclusive content.</p>';
} elseif (is_page('contact')) {
    // Show something else on the Contact page
    echo '<p>Get in touch with us!</p>';
} else {
    // Default content for other pages
    echo '<p>This is a general page template.</p>';
}

Conditional tags are your best friend when creating flexible, dynamic templates.

Up Next: Widgetizing Your Theme – Let’s Get Flexible 🛠️

In the next chapter, we’ll explore widgets and how to make your theme even more customizable for end-users. Because who doesn’t love drag-and-drop widgets?