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

Hướng dẫn tạo email template để gửi mail qua: Outlook App, Outlook website, Gmail, Apple Mail…

post-no-image

Hướng dẫn tắt tính năng mua hàng nhưng vẫn hiển thị giá trong Woocomerce

post-no-image

Hướng dẫn tạo mã QR code và Barcode trong php

post-no-image

Hướng dẫn cấu hình chuyển hướng từ tên miền cũ sang tên miền mới

post-no-image

Thêm field trong phần thiết lập Woocommerce

post-no-image

Hướng dẫn fix lỗi không rớt hàng trong đoạn văn