Episode 21 of 32
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.php | page.php |
|---|---|
| Only for the homepage | For all other static pages |
| Usually has a custom layout (hero, featured posts) | Standard content layout |
| May use WP_Query for custom content | Uses 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.phphandles 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 Namecomment header - Users can select custom templates in the Page editor