<?php
		$post_id = get_the_ID();
		$related_query = new WP_Query(array(
			'post_type'      => 'post',
			'category__in'   => wp_get_post_categories( $post_id ),
			'post__not_in'   => array( $post_id ),
			'posts_per_page' => 8
		));
	?>

	<?php if ($related_query->have_posts()) { ?>

	    <div class="related-posts-grid">
	    	<h2>Bài viết liên quan</h2>
	        <?php while ($related_query->have_posts()) { ?>

	            <?php $related_query->the_post(); ?>

	            <div class="grid-item">

	                <a href="<?php the_permalink(); ?>">
	                    <?php the_post_thumbnail('post-thumb-small'); ?>
	                </a>

	                <h5>
	                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	                </h5>

	            </div>

	        <?php } ?>

	    </div>

	    <?php wp_reset_postdata(); ?>

	<?php } ?>

css

.related-posts-grid h2 {
  font-size: 18px;
  color: #000;
  display: block;
}
.related-posts {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.related-posts .grid-item {
  display: flex;
}
.related-posts .grid-item .thumb {
  width: 90px;
  height: 60px;
  margin-right: 10px;
  float: left;
}
.related-posts .grid-item .title {
  flex: 1;
  margin-top: 0;
}
.related-posts .grid-item .title a {
  font-size: 16px;
  color: #545353;
  font-weight: 600;
}

 

Bài viết liên quan

post-no-image

Chia sẻ một số thư viện loading css đẹp

giai-phap-chinh-css-khong-bi-luu-cache-trinh-duyet

Giải pháp tốt khi chỉnh sửa css mà không sợ bị lưu cache trình duyệt

post-no-image

Một số css tùy biến thẻ input type: select, number

post-no-image

Tắt lazyload cho một số hình ảnh

post-no-image

Tuỳ biến layout YITH WooCommerce Wishlist

post-no-image

Một số hook hoặc filter thường sử dụng trong plugin WPML