WordPress | como mostrar el primer post con un estilo diferente

A veces cuando creamos un tema en wordpress, queremos darle un toque diferente al último articulo creado para destacarlo sobre el resto. Con unas funciones de wordpress y algo de php podremos lograr nuestro objetivo.

Primero lo que deben hacer es abrir el archivo index.php en Apariencia > Editor en el backend de WordPress, si están trabajándolo offline lo abrirán directamente con dreamweaver, textmate o el editor de html que esten usando.

Luego, cuidadosamente colocaremos nuestro html dentro del código a continuación:

<?php $postnum = 0; if (have_posts()) : ?>
<?php while (have_posts()) : $postnum = $postnum + 1; the_post(); ?>
<?php if ($postnum == 1 ) { ?>
<!-- HTML del post destacado -->
<?php } ?>

<?php if ($postnum >= 2 ) { ?>
<!-- HTML de los siguientes post -->
<?php } ?>
<?php endwhile; ?>

Como ven, en la primera porción de código, colocaremos nuestro html para el post destacado.

Ejemplo:

<div id="content">
<?php $postnum = 0; if (have_posts()) : ?>
<?php while (have_posts()) : $postnum = $postnum + 1; the_post(); ?>
<?php if ($postnum == 1 ) { ?>

<!-- Empieza código html del post destacado -->
<div id="feature">

<li>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<?php the_time('l, j');?> de <?php the_time('F');?> de <?php the_time('Y');?>,
 escrito por <?php the_author_link();?>
<?php the_content('Leer más'); ?>

 </li>
</div>

<!-- Termina código html del post destacado -->
<?php } ?>

En la segunda porción de código es donde colocaremos el html de los siguientes post, que serán los que se muestren normalmente.

Ejemplo:

<div id="entry">
<?php if ($postnum >= 2 ) { ?>
 <h2><a href="<?php the_permalink() ?>" rel="bookmark"
title="Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_time('l, j F Y H:i'); ?> | Escrito por <?php the_author() ?>
<?php edit_post_link('Editar', ' | ', ''); ?>

<?php the_content('',FALSE,''); ?>

 <div><?php wp_link_pages(); ?></div>

 <?php } ?>
 </div> <!-- end div entry -->

 <?php endwhile;?>

Si tienen alguna duda o quieren dejarnos algun comentario lo pueden hacer aquí.