WordPress—A Complete Guide/

...

/

Design Single Blog Post Page

Design Single Blog Post Page

Learn to design a page to display a single blog post.

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 ...