Single post

by Dawid Adach,

Final result preview
Live preview

    Our blog is almost ready, however, there is still one important part missing. We can display all our posts in a loop, but when someone tries to read the entire post it doesn't work. In order to let users read entire content, we have to create a new file which will be responsible for displaying single posts. This file is called single.php.

  1. Let's create it and paste same content which we currently use in our index.php file inside.
    <?php  get_header(); ?>
    <!--Main layout-->
    <div class="container">
        <div class="row">
            <!--Main column-->
            <div class="col-md-8">
                if ( have_posts() ) {
                while ( have_posts() ) {
                <div class="post-wrapper">
                    <!--Post data-->
                    <a href="<?php echo get_permalink() ?>"><h1 class="h1-responsive"><?php the_title(); ?></h1></a>
                    <h5>Written by <a href=""><?php the_author(); ?></a>, <?php echo get_the_date(); ?></h5>
                    <!--Featured image -->
                    <div class="view overlay hm-white-light z-depth-1-half">
                        <?php the_post_thumbnail( 'full', array( 'class'=> 'img-fluid z-depth-2')); ?>
                        <div class="mask">
                    <!--Post excerpt-->
                    <p><?php the_excerpt(); ?></p>
                    <!--"Read more" button-->
                    <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>
                } // end while
                } // end if
            <div class="col-md-4">
                <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
                <?php dynamic_sidebar( 'sidebar' ); ?>
                <?php endif; ?>
    <!--/.Main layout-->
    <?php  get_footer(); ?>
  3. Replace the following code:
    <!--Post excerpt-->
    <p><?php the_excerpt(); ?></p>
    <!--"Read more" button-->
    <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>               


    <p><?php the_content(); ?></p>

    New functions

    the_content() - displays entire post content (unlike the_excerpt() which returns only first few words.

    single.php - file responsible for displaying single post/page.If present, WP loads it instead of index.php.

    Now from our main page click on any article title, image, or "Read more" button. You will get redirected to the single post page. Almost everything looks the same, except for the main part where instead of a list of posts you can see only a single post with full text . Before, the_excerpt() function was displaying only limited number of characters , if you didn't notice a difference probably text of your post was too short. Try to add some extra, lazy-bones can use text below:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste eligendi dolorum, at inventore molestiae corporis quam a libero eos optio, autem cumque consectetur nemo consequatur nostrum beatae, totam numquam voluptatum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur accusantium repellat fuga, necessitatibus libero vel hic consequuntur tenetur quo dignissimos, voluptatem debitis! Provident velit fugit at porro eum asperiores iure? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum vel nobis nam id maxime vitae nesciunt asperiores velit a tenetur quos aspernatur sint eveniet hic, quisquam placeat provident tempore consectetur?

    Our blog seems to be complete now but as you noticed we've just duplicated a lot of code. That's definitely not good practice. If tomorrow we will decide to change the way we want to display our posts (i.e. change heading from <h1> to <h2> we will have to edit both - single.php and index.php. We will fix it in the next lesson.

If something doesn’t work as expected, you can download a final code for this lesson here:

Previous Tutorial Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author

Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of & is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 7

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us