Las entradas relacionadas son un modo estupendo de mantener a los lectores navegando en tu página web. Ellos encuentran otras publicaciones de temática similar. De esta manera aumentas la fidelidad y permanencia en tu web de los visitantes, algo ya y casi obligatorio en cualquier sitio.
Pues bien, como ya hemos visto en otras ocasiones cómo mostrar entradas relacionadas con código, o uno de los mejores plugins para mostrar entradas relacionadas con miniatura, hoy rizamos el rizo y unimos ambas posibilidades. 
¿Por qué evitar los plugins?
Hay varias razones por las que siempre prefiero utilizar el código integrados en WordPress, en lugar de un plugin. El principal beneficio es que no tiene que depender de un tercero (el desarrollador del plugin) para que el blog funcione.
Hay muchos casos en que los desarrolladores abandonan plugins, lo que nos deja en un dilema al momento de querer actualizar WordPress o la versión de PHP del servidor. Ya que tenemos que elegir entre software obsoleto y potencialmente vulnerable o desechar la funcionalidad.
Otra razón es que no corres el riesgo de usar un complemento lleno de funcionalidades innecesarias que puede ralentizar tu página web.
Publicaciones relacionadas con miniaturas
Esta función de «publicaciones relacionadas», como la mayoría de las demás, está diseñada para colocarse en la página principal del post (single.php), pero puedes usarla en casi cualquier lugar, siempre que se mantenga dentro del ciclo de WordPress. Para obtener las publicaciones relacionadas, usaremos las etiquetas de publicación que se asignan a los artículos individuales.
1. Añadir soporte de miniaturas al tema
Esto ya lo hemos visto varias veces pero lo repasamos por si no lo has añadido ya. Para ello añade al fichero functions.php de tu tema la siguiente línea, con la que le añadimos soporte de miniaturas de entrada:
add_theme_support( \'post-thumbnails\' );
Y además, siempre es conveniente definir los tamaños de miniatura adaptados lo mejor posible al diseño:
add_theme_support( \'post-thumbnails\' ); set_post_thumbnail_size( 100, 50, true );
A partir de ahí solo tienes que acordarte de que en cada entrada definas una “Imagen destacada” desde la “meta box” del editor así denominada. 
2. Añadir el código al loop
En el loop del archivo single.php debemos añadir el código que mostrará las entradas relacionadas.
El sitio ideal sería antes de la llamada a los comentarios, que identificarás por el siguiente código:
<div class="relatedposts">
<h3>Related posts</h3>
<?php
$orig_post = $post;
global $post;
$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),
'posts_per_page'=>4, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="relatedthumb">
<a rel="nofollow" target="_blank" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>El código sería algo así:
Básicamente, lo que hace el código anterior es identificar las tags en que está etiquetada la entrada actual para, a continuación, mostrar otras entradas etiquetadas con las mismas tags, excluyendo la entrada actual, que identifica por su ID único. en la línea 14 definimos el número de entradas a mostrar (en el ejemplo 4), que puedes cambiar a tu gusto.
3. Añadir estilos mediante CSS
Ahora bien, lo anterior no quedaría bonito ni atrayente si no creamos unas clases CSS adecuadas, que atraigan atención y coloquen las entradas relacionadas de manera ordenada. Por tanto, y usando las mismas denominaciones de clases CSS de ejemplo usadas en el código previo, habría que crearlas en la hoja de estilos de tu tema activo, habitualmente el archivo style.css. Lógicamente, es solo un ejemplo, y debes adaptarlo a los estilos generales de tu tema o tus gustos personales …
.relacionadas
{width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relacionadas h3 {font-size: 20px; margin: 0 0 5px 0; }
.miniaturarelacionada {margin: 0 1px 0 1px; float: left; }
.miniaturarelacionada img {margin: 0 0 3px 0; padding: 0;}
.miniaturarelacionada a {color :#333; text-decoration: none; display:block;
padding: 4px; width: 150px;}
.miniaturarelacionada a:hover {background-color: #ddd; color: #000;}Lo que hace este CSS de ejemplo es mostrar las miniaturas con un ancho de 150 pixels, lo que significa que para un ancho del bloque principal de 640 pixels mostraría 4 entradas, márgenes incluidos. Por descontado que debes ajustar esto a tus necesidades, reduciendo el valor .miniaturarelacionada a 125 pixels si quieres 5 miniaturas, por poner un ejemplo.
No digamos si el ancho del bloque de la entrada de tu tema WordPress es menor de 640 pixels. También, y para terminar, es importante que definas el ancho de las miniaturas en los ajustes multimedia de WordPress al mismo tamaño especificado en el CSS que, además, debe coincidir con el tamaño definido en el código php en the_post_thumbnail(array(150,100).
