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.

Press + to interact
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

...