El thumbnail es la imagen en miniatura que acompaña a cada entrada en WordPress, el problema es que esta disponible no viene por defecto, para activarla se tienen que hacer ciertas modificaciones en el theme, en este tutorial aprenderemos a activarla e implementarla de la forma rápida y sencilla posible.

Paso 1. Activar los thumbnails

Lo primero que tenemos que hacer es activar los thumbnails, para ello basta con agregar una sola linea en el archivo functions.php:

<?php
 add_theme_support( 'post-thumbnails' );
?>

Luego si vamos al Dashboard y editamos o creamos una Entrada o Pagina nueva deberiamos ver en la esquina inferior derecha algo como esto:

 

Aqui simplemente subimos y definimos(“Usar como imagen destacada”) la imagen que acompañara a esta Entrada.

Paso 2. Implementar los thumbnails

Una vez hayamos definido los thumbnail a las entradas, lo que queda es llamar a estos thumbnails dentro del Loop* de WordPress, esto normalmente deberia estar en el archivo index.php con un codigo similar a este:

		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                // El Loop
		<?php endwhile; ?>
		<?php endif; ?>

*El Loop o Bucle en español, es el código que se encarga de obtener las entradas/paginas y mostrarlas donde se le ponga, en la mayoría de los themes se encuentra en el index.php, dentro de el Loop se pueden llamar a etiquetas como the_title();(titulo de la entrada) y en este caso llamaremos a the_post_thumbnail(); para mostrar la “Imagen destacada”.

Dentro del Loop buscamos un espacio para ubicar <?php the_post_thumbnail(); ?>:

		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<div class="post">
				<?php the_post_thumbnail(); ?>
				<div class="content"><?php the_content(); ?></div>
			</div>
		<?php endwhile; ?>
		<?php endif; ?>

Esto nos resultaria en una etiqueta HTML como esta:

<img width="200" height="200" src="URL-de-la-imagen" class="wp-post-image">

Es importante notar que WordPress le asigna la clase .wp-post-image a la Imagen destacada, facilitándonos la estilización de la misma:

.wp-post-image{
	float: left;
	margin-right: 30px;
}

Y si queremos que la imagen sea un enlace a la entrada solo la tendriamos que envolverla en un <a href=’ ‘> que apunte al permalink:

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

Esta función tambien soporta parametros, por ejemplo si hemos subido una imagen demasiado grande podemos llamar a los diferentes tamaños que WordPress genera de la imagen:

the_post_thumbnail();                  // por defecto

the_post_thumbnail('thumbnail');       // 150px x 150px
the_post_thumbnail('medium');          // 300px x 300px
the_post_thumbnail('large');           // 640px x 640px

Puedes descargarte el theme desde aquí, para que lo puedas probar y ver con mas detalle.