← Back to all tutorials

The page.php Template

Create the page.php template for static pages — About, Contact, and any other non-blog pages.

The page.php Template

The page.php template handles static pages — pages like About, Contact, Services, or any page created in the WordPress admin.

Creating page.php

<?php get_header(); ?>

<main id="main-content">
    <div class="container">
        <div class="content-wrapper">
            <div class="primary-content">
                <?php if (have_posts()) : 
                    while (have_posts()) : the_post(); ?>
                        <article class="page-article">
                            <h1 class="page-title"><?php the_title(); ?></h1>
                            
                            <?php if (has_post_thumbnail()) : ?>
                                <div class="page-thumbnail">
                                    <?php the_post_thumbnail('large'); ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="page-content">
                                <?php the_content(); ?>
                            </div>
                        </article>
                <?php endwhile;
                endif; ?>
            </div>
            <?php get_sidebar(); ?>
        </div>
    </div>
</main>

<?php get_footer(); ?>

page.php vs front-page.php

front-page.phppage.php
Only for the homepageFor all other static pages
Usually has a custom layout (hero, featured posts)Standard content layout
May use WP_Query for custom contentUses the default Loop

Page-Specific Templates

You can create templates for specific pages by slug or ID:

page-about.php      → Used only for the "about" page
page-contact.php    → Used only for the "contact" page
page-42.php         → Used only for page with ID 42

Custom Page Templates

You can create reusable templates that users select from the admin:

<?php
/**
 * Template Name: Full Width Page
 */
get_header(); ?>

<main id="main-content">
    <div class="container">
        <!-- No sidebar — full width -->
        <?php if (have_posts()) : 
            while (have_posts()) : the_post(); ?>
                <article class="page-article full-width">
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
                </article>
        <?php endwhile;
        endif; ?>
    </div>
</main>

<?php get_footer(); ?>

The Template Name comment makes this appear as an option in the Page editor under Page Attributes → Template.

Styling Pages

.page-title {
    font-size: 36px;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #3498db;
}

.page-thumbnail {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.page-thumbnail img {
    width: 100%;
    height: auto;
}

.page-content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.page-content h2,
.page-content h3 {
    color: #2c3e50;
    margin-top: 30px;
    margin-bottom: 12px;
}

.page-content p {
    margin-bottom: 16px;
}

Key Takeaways

  • page.php handles all static pages by default
  • Uses the_content() to display the full page content
  • Create page-specific templates with page-{slug}.php
  • Custom page templates use the Template Name comment header
  • Users can select custom templates in the Page editor