الخطوة الأولى

أضف الكود التالي لملف الـ Function.php

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 196, 110, true );

تأكد من تغيير القيم 196,110 لما يناسب عرض الصور في مدونتك
احفظ الملف وقم برفعه بعد ذلك ستجد خيار عند إنشاء تدوينة (إضافة الصورة البارزة) أو Featured image حيث يمكنك تحميل أي صورة لتدوينتك وجعلها كصورة رمزية
ملاحظة : إذا كان قالبك يدعم خاصية الصورة الرمزية فتجاوز هذه الخطوة

الخطوة الثانية

افتح ملف single.php لقالبك وأضف هذا الكود في أي مكان تريد عرض المواضيع ذات صلة

<?php
$tags = wp_get_post_tags($post->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($post->ID),
'showposts'=>4,  // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>مواضيع ذات صلة</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>

<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>

<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>

لاحظ العدد 4 في المتغير ‘showposts’=>4 يعني عدد المواضيع التي تريدها الظهور كمواضيع ذات صلة (يمكنك تغييرها كما تريد)

الخطوة الثالثة

الأن يمكنك التوجه لملف style.css وتأطير المواضيع ذات صلة
بإضافة الكود التالي

#relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
#relatedposts ul { list-style: none; }
#relatedposts ul li { float: right; margin-left: 15px; width: 206px; }
#relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }
#relatedposts a:hover { color: #51B1D3; }

وأخيراً النتيجة ستكون كالتالي