Related posts

Hi,
If you want to display the related posts feature in the single post, you can do as the following:
Open the single.php file, add the following code under line 37:

$tags = wp_get_post_tags( get_the_ID() );

    if ($tags) {
        $tag_ids = array();
        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
        $args=array(
        'tag__in' => $tag_ids,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page'=>3, // Number of related posts to display.
        'ignore_sticky_posts'=>1
        );
        $my_query = new WP_Query( $args );

        if( $my_query->have_posts() ) { ?>
            <div class="related-post">
                <h3><?php _e('Related posts','dw_focus') ?></h3>
                <div class="row-fluid">
                    <div class="content-inner">
                    <?php
                        while( $my_query->have_posts() ) {
                            $my_query->the_post();
                            get_template_part('content', 'related-post'); 
                         }
                    ?>          
                    </div>
                </div>
            </div>
<?php 
        } 
    }
?>  

Open the dw-focus.css file and add the following code:

.single .site-main .related-post h3 {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #dddddd;
  line-height: 38px;
  color: #000000;
  text-shadow: 0 0 0 #000000;
  margin: 20px 0;
  font-size: 11px;
  text-transform: uppercase;
  font-family: "NovecentowideNormalRegular", Georgia, "Times New Roman", Times, serif;
}
.single .site-main .related-post .hentry {
  width: 30%;
  float: left;
  margin-left: 5%;
}
.single .site-main .related-post .hentry:first-child {
  margin-left: 0;
}
.single .site-main .related-post .content-inner {
  position: relative;
  overflow: hidden;
}
.single .site-main .related-post .content-inner:before,
.single .site-main .related-post .content-inner:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background: #dddddd;
}
.single .site-main .related-post .content-inner:before {
  left: 32.5%;
}
.single .site-main .related-post .content-inner:after {
  left: 67.5%;
}
.single .site-main .related-post .entry-thumbnail {
  position: relative;
  margin-bottom: 10px;
}
.single .site-main .related-post .entry-thumbnail > a {
  display: inline-block;
  position: relative;
  width: 100%;
}
.single .site-main .related-post .entry-thumbnail > a:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: absolute;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.single .site-main .related-post .entry-thumbnail > a:hover:before {
  animation: hoverthumb 2s;
  -moz-animation: hoverthumb 2s;
  -webkit-animation: hoverthumb 2s;
  -o-animation: hoverthumb 2s;
}
.ie8 .single .site-main .related-post .entry-thumbnail > a:before {
  display: none;
}
.single .site-main .related-post .entry-thumbnail img {
  width: 100%;
}
.single .site-main .related-post .entry-title {
  font-size: 14px;
  line-height: 22px;
  margin-top: 0;
}
.related-post {
  clear: both;
}

@media (max-width: 599px) {
.single .site-main .related-post .content-inner:before,
  .single .site-main .related-post .content-inner:after {
    display: none;
  }
  .single .site-main .related-post .content-inner .hentry {
    width: 100%;
    margin-left: 0;
    border-top: 1px solid #dddddd;
    padding-top: 20px;
    margin-top: 10px;
  }
  .single .site-main .related-post .content-inner .hentry:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  }

Open the dw-focus.min.css file and add the following code:

.single .site-main .related-post h3 {
    border-top: 1px solid #000;
    border-bottom: 1px solid #ddd;
    line-height: 38px;
    color: #000;
    text-shadow: 0 0 0 #000;
    margin: 20px 0;
    font-size: 11px;
    text-transform: uppercase;
    font-family: "NovecentowideNormalRegular", Georgia, "Times New Roman", Times, serif
}
.single .site-main .related-post .hentry {
    width: 30%;
    float: left;
    margin-left: 5%
}
.single .site-main .related-post .hentry.has-thumbnail {
    padding-left: 0px;
}

.single .site-main .related-post .hentry:first-child {
    margin-left: 0
}
.single .site-main .related-post .content-inner {
    position: relative;
    overflow: hidden
}
.single .site-main .related-post .content-inner:before, .single .site-main .related-post .content-inner:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background: #ddd
}
.single .site-main .related-post .content-inner:before {
    left: 32.5%
}
.single .site-main .related-post .content-inner:after {
    left: 67.5%
}
.single .site-main .related-post .entry-thumbnail {
    position: relative;
    margin-bottom: 10px
}
.single .site-main .related-post .entry-thumbnail>a {
    display: inline-block;
    position: relative;
    width: 100%
}
.single .site-main .related-post .entry-thumbnail>a:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0)
}
.single .site-main .related-post .entry-thumbnail>a:hover:before {
    animation: hoverthumb 2s;
    -moz-animation: hoverthumb 2s;
    -webkit-animation: hoverthumb 2s;
    -o-animation: hoverthumb 2s
}
.ie8 .single .site-main .related-post .entry-thumbnail>a:before {
    display: none
}
.single .site-main .related-post .entry-thumbnail img {
    width: 100%
}
.single .site-main .related-post .entry-title {
    font-size: 14px;
    line-height: 22px;
    margin-top: 0
}

Hope this helps !