the codes listed here is part of the following article : https://www.mwordpress.net/how-to-display-related-posts-with-thumbnail-in-wordpress/

related-post.css

/*
	تنسيقات الهاك
	يحب عليك تعديلها على حسب الشكل الذي تريد عررض المواضيع بها
*/
.custom-related {
	margin:0;
	padding:2%;
	width:96%;
}
.custom-related h2{

}
.custom-related ol {
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
}
.custom-related ol li{
	margin:0;
	padding:0 0 0 1%;
	width:24%;
}
.custom-related .thumbnail{

}
.custom-related h3{

}

related-post.php

<?php
/*
 * Security : blocking direct access
 * Source: http://codex.wordpress.org/Theme_Development#Template_Files
*/
defined('ABSPATH') or die("No script kiddies please!");

	global $post;
	$posts_number 	= '4';
	$queried_object = get_queried_object();

	$posts_array = wp_get_post_tags($post->ID);

	echo '<h2>مقالات ذات صلة</h2>';
	echo '<div class="custom-related">';
	if ($posts_array) {

		$posts_ids = array();
		foreach($posts_array as $individual_posts)
			$posts_ids[] = $individual_posts->term_id;
			$param = array(
				'post_status' 		  => 'publish',
				'tag__in' 			  => $posts_ids,
				'post__not_in' 		  => array($post->ID),
				'posts_per_page' 	  => $posts_number,
				'ignore_sticky_posts' => 1
			);
			$related_query = new wp_query($param);

			echo '<ol>';

			if( $related_query->have_posts() ) {
				?>
				<li>
					<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
						<div class="thumbnail">
							<?php
							if ( function_exists('show_thumb') ) {
								show_thumb(300, 150, 'img-responsive', $post->ID, 100);
							} else {
								the_post_thumbnail('thumbnail');
							}
							?>
						</div>
						<h3><?php the_title(); ?></h3>
					</a>
				</li>
				<?php
			}
			echo '</ol>';

	} else {
		echo '<p>لا توجد مقالات ذات صلة</p>';
	}
	echo '</div>';
	$backup = 0;
	$post = $backup;
	wp_reset_query();
?>

single.php

<?php the_content(''); ?>
<?php include (TEMPLATEPATH . '/custom-related-posts.php'); ?>

yarpp-template-thumbnail.php

<?php
/*
YARPP Template: Thumbnails
Description: Requires a theme which supports post thumbnails
Author: mitcho (Michael Yoshitaka Erlewine)
*/ 
?>
<h2>مقالات ذات صلة</h2>
<?php if (have_posts()):?>
<ol>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<li>
			<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
				<div class="thumbnail">
					<?php
					if ( function_exists('show_thumb') ) {
						show_thumb(300, 150, 'img-responsive', $post->ID, 100);
					} else {
						the_post_thumbnail(‘thumbnail’);
					}
					?>
				</div>
				<h3><?php the_title(); ?></h3>
			</a>
		</li>
		<?php endif; ?>
	<?php endwhile; ?>
</ol>

<?php else: ?>
<p>لا توجد مقالات ذات صلة</p>
<?php endif; ?>

yarpp.css

/*
    تنسيقات الاضافة : Yet Another Related Posts
    يحب عليك تعديلها على حسب الشكل الذي تريد عرض المقالات به
*/
.yarpp-related {
    margin:0;
    padding:2%;
    width:96%;
}
.yarpp-related h2{

}
.yarpp-related ol {
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
}
.yarpp-related ol li{
    margin:0;
    padding:0 0 0 1%;
    width:24%;
}
.yarpp-related .thumbnail{
    
}
.yarpp-related h3{

}