Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

get_template_part()

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.

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>
    <br>
    <!--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">
        </div>
    </div>
    <br>
    <!--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>
</div>
                            
And paste it into a new file called content.php.

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):

              
<!--Post-->
<?php get_template_part('content', get_post_format()); ?>
<!--/.Post-->
              

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

with:

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

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 domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 4

  • Ilir

    hi there, thanks for the awsome tutorial but im having a problem. im using this tutorial to convert a normal html site to a wp template but i dont get the post content when i click the "read more" button. even the link dosent change, which means it dosent follow the permalink. it just reloads the same page. any help would be appreciated. thanks!

  • jovi

    hello, I want to ask? How to add a script to show video features, in the script below. 'img-fluid z-depth-2')); ?>

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more