Search⌘ K
AI Features
Home
Courses
WordPress—A Complete Guide

Design Single Blog Post Page

Explore how to create and style single blog post pages in WordPress by customizing single.php. Understand dynamic content display, metadata integration, navigation highlighting, and post navigation links to enhance blog functionality.

We'll cover the following...

The WordPress template file single.php displays a single blog post. If we try to visit a blog post from the blog listing page, we can see that this page is missing style and design.

Single post page
Single post page

The code of single.php is reproduced below:

<?php
get_header();
while(have_posts()){
    the_post();?>
    <h1><?php the_title() ?></h1>
    <p><?php the_content() ?></p>    
<?php 
}
get_footer();
?>
single.php file

Banner area

Below the header, we need to include the banner area <div> which contains the title of the post. We can copy this div from page.php. Paste this code inside the while loop after the the_post() function (after the data for the post has been fetched).

<?php
get_header();
while(have_posts()){
    the_post();?>
    <!-- Banner Section -->
    <div class="image-and-banner">
        <img class="image" src="<?php echo get_theme_file_uri('/assets/images/banner.jpg'); ?>" alt="" />
        <div class="banner-section">
        <div class="banner">
            <h1 class="banner-primary"><?php the_title(); ?></h1>
            <h2 class="banner-description">Page Description Goes Here</h2>
        </div>
        </div>
    </div>
    <p><?php the_content() ?></p>    
<?php 
}
get_footer();
?>
Banner area of single.php

Post content

We will display the ...