Wordpress替代邮政专栏

Question

我想在其中添加带有category-name功能的帖子的wordpress post loop。这是我想要实现的图像样本，在图像下方是我已经构建的html，谢谢。

here is the image sample

这是我的代码

<div class="row featured">
   <div class="grid-box  grid-box-1  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/video-post/">
            <div class="caption">
                <div class="cat"><span>News</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;                                                       
                        <i class="fa fa-video-camera"></i> Video
                </div>
                <h2 class="title">Video Post with Featured Image</h2>      </div>

             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div>              
        </a>
    </div>
    <div class="grid-box  grid-box-2  item-featured">  
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-more-tag/">
            <div class="caption">
                <div class="cat"><span>Lifestyle</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                <i class="fa fa-video-camera"></i> Video    
                </div>

                <h2 class="title">Post With More Tag</h2>
            </div>

            <div class="vm-featured"> <img src="/asstes/image1.jpg"/>   </div>                  
        </a>
    </div>
    <div class="grid-box  grid-box-3  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/vimeo-video-post/">
            <div class="caption">
                <div class="cat"><span>What's New</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                </div>
                <h2 class="title">Vimeo Video Post</h2>
            </div>
             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div> 
        </a>
    </div>
    <div class="grid-box  grid-box-4  item-featured">
        <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-image-and-text/">
            <div class="caption">
                <div class="cat"><span>News</span></div>
                <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;
                </div>
                <h2 class="title">Post with Image and text</h2>
            </div>
             <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/>   </div>                  
        </a>
    </div>