by Dawid Adach,

Final result preview
Live preview

    Our blog seems to be complete now but as you noticed we've just duplicated a lot of code. That's not a 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.

  1. Let's cut the following code from index.php:
    <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>

    And paste it into a new file called content.php.

  3. Now paste following <?php get_template_part('content', get_post_format()); ?> in index.php file in exactly same place from were you just removed bunch of code (between <!--Post--> comments):
    <?php get_template_part('content', get_post_format()); ?>

    New functions

    get_template_part() - function allow to load content dynamicaly depends on 2 arguments.

    If you check your blog you will notice that nothing has changed. Everything looks the same and we still have very simillar code in 2 places ( content.php and single.php), we will fix it now. Place <?php get_template_part('content', get_post_format()); ?> inside single.php file instead of whole content between <!--Post--> comments the same way you did in index.php. You can also just copy paste content of index.php to single.php.

    Once you try to display single post you will notice that it doesn't work properly. Although we are displaying only single post, we can use an excerpt and read more button. That's because both templates (index.php and single.php) are including code from content.php which was originally in index.php. Let's fix it again, but now we will do it in a smarter way.

  5. Inside content.php replace following lines:
      <?php the_excerpt(); ?>
        <!--"Read more" button-->
        <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>


      if (is_single()){
      else {
        <!--"Read more" button-->
        <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>

    New functions

    is_single() - function checks whether the query is for an existing single post.

    Because the most of the content responsible for displaying post was the same in both single.php and index.php we have combined it inside content.php and used conditional logic (if()) to handle differences. Let's have a closer look at our if condition. Whenever we are opening single post is_single() returns true(), condition is matched so server displays content between curly brackets {}, on the other hand, if we open the main page of our blog, function returns false(), condition isn't matched therefore server will execute code between brackets after else statement.

    As you can see in the first case, we are displaying the full content of the post, while in the second one both - excerpt as well as Read more button are displayed.

    MDB footer

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

Previous lesson 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 4

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