Para ello primero, basado en los estilos CSS de Chris Harrison, procederé a explicar cada una de las clases CSS de los nuevos comentarios de WordPress, para que tengan una noción básica de que hace cada uno.

ol.commentlist {} /* Estilos para la lista de comentarios */
ol.commentlist li {} /* CSS para cada elemento individual de la lista de comentarios */
ol.commentlist li.alt {} /* Alterna estilo de los elementos de lista */
ol.commentlist li.bypostauthor {} /* CSS para el comentario hecho por el autor de un post */
ol.commentlist li.byuser {} /* Estilos para cuando comenta un usuario registrado */
ol.commentlist li.comment {} /* Elementos individuales, el comentario en sí */
ol.commentlist li.comment div.vcard {} /* DIV que agrupa el avatar, nick y URL de cada comentario */
ol.commentlist li.comment div.vcard cite.fn {} /* Nombre del comentarista cuando este no deja URL */
ol.commentlist li.comment div.vcard cite.fn a.url {} /* Aplica cuando el comentarista deja la dirección de un sitio web */
ol.commentlist li.comment div.vcard img.avatar {} /* Para el avatar que se muestra en cada comentario */
ol.commentlist li.comment div.vcard span.says {} /* Da estilo a la frase "says" ó "dijo" en los comentarios */
ol.commentlist li.comment div.commentmetadata {} /* DIV donde se muestra la hora y fecha en la que se realizó la opinión */
ol.commentlist li.comment div.comment-meta {} /* Fecha del comentario */
ol.commentlist li.comment div.comment-meta a {} /* Lo mismo que arriba pero aplica si se muestra como enlace */
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.) /* Listas, blockquotes y más en los comentarios */
ol.commentlist li.comment div.reply {} /* DIV del botón de respuesta a un comentarios especifico */
ol.commentlist li.comment div.reply a {} /* Estiliza los enlaces dentro del DIV Reply */
ol.commentlist li.comment ul.children {} /* Define la posición y otras cosas de la lista de comentarios anidados */
ol.commentlist li.comment ul.children li {} /* Para cada elemento de la lista de Child Comments */
ol.commentlist li.comment ul.children li.depth-2 {} /* Para cada nivel de anidación de comentarios */
ol.commentlist li.comment ul.children li.depth-3 {} /* Idem a arriba, tan sólo cambia el número */
ol.commentlist li.even {} /* Establece valores de las propiedades CSS de los comentarios pares */
ol.commentlist li.odd {} /* Establece valores de las propiedades CSS de los comentarios inpares  */
ol.commentlist li.parent {} /* Comentario padre de los Child Comments */
ol.commentlist li.pingback {} /* Estilo para elementos con trackbacks ó pingbacks */

Ok ya tenemos orientación, de igual forma faltan estilos para Pingbacks, no lo explico todo porque sería muy largo el post, pero siempre podrán consultar el enlace de arriba y tomar referencia de lo que ya tenemos.

No obstante la teoría no es nada si no hay un ejemplo práctico.

Por lo que este es el CSS que utilizaremos para darle una fachada vistoza a nuestra armazón lograda previamente, los estilos están probados para llegar a los 6 niveles de anidación sin problema, además de ser crossbrowser… y claro que pueden modificarlos a su conveniencia.

div#respond { margin: 20px 0 10px 0; background: #F7F7F7; border: 1px solid #CCC; padding: 10px 10px; overflow: hidden; }
div#respond textarea { background: #FFF; width: 90%!important; height: 75px; padding: 7px; color: #464646; font-family: arial; font-size: 14px; border: 1px solid #CCC; }
div.allowed-tags { width: 90%!important; font-style: italic; background: #F9F9F9; padding: 7px; font-size: 0.75em; }
div.navigation { clear: both; overflow: hidden; margin-bottom: 15px; }
p#comment-notes { padding-right: 20px; }
div.navigation a { color: #5190CE; }
div.navigation a:hover { color: #464646; }
div.navigation .alignleft { float: left; width: 50%; }
div.navigation .alignright { float: right; text-align: right; width: 50%;}
div.cancel-comment-reply { margin: 10px 0 10px 0; text-transform: capitalize;}
ol.commentlist { font-size: 1.1em; list-style:none; text-indent:0; margin:0 0 0em; padding:0; text-indent:0; }
ol.commentlist li { margin: 12px 0; background : #FFF url('images/comment_white_bg.png') repeat-x bottom; border: 1px solid #ddd; color: #B3B3B3; }
ol.commentlist li.comment { border: 1px solid #dfdfdf; background: #FDFDFD; padding: 1em; }
ol.commentlist li div.vcard cite.fn a.url { text-decoration: none; }
ol.commentlist li div.vcard img.avatar { border: 2px solid #ccc; width: 54px; height: 54px; float:left; padding: 5px; background: #fff; margin-right: 12px; }
ol.commentlist li div.comment-meta a { color: #8c8c8c; text-decoration: none;}
ol.commentlist li div.comment-meta a:hover { text-decoration: underline; }
ol.commentlist li div.vcard cite.fn a.url:hover { }
ol.commentlist li p { color: #606060; clear:both; margin: 10px 0;  text-align: justify; }
ol.commentlist li ul { list-style:square;  margin: 0 0 1em 2em; }
ol.commentlist li div.reply { text-align: right; margin: 5px; }
ol.commentlist li div.reply a { font-size: 0.815em; background: #609d1e; color: #f9f9f9; padding: 3px 7px; text-decoration: none; text-transform: capitalize;  }
ol.commentlist li div.reply a:hover { background: #464646; color: #f8f8f8; padding: 4px 7px; text-decoration: none; }
ol.commentlist li ul.children { list-style: none; margin: 1em 0 0; text-indent:0; }
ol.commentlist li ul.children li.depth-2 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-3 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-4 { background: #e4e4e4; border: 1px solid #d4d4d4; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-5 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-6 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }

Si se me pasó algo no duden en aclararmelo, en el siguiente post de la serie veremos como realizar unos cuantos trucos para mejorar la interactividad del usuario.

Una caracteristica que ya es casi un estandar en los themes premium, pero que pasa si tú no tienes un theme de este tipo y quieres hacer lo mismo, a continuación la forma de insertar una Author Box en tu theme WordPress:

Creando la Author Box

Sinceramente tengo que decir que aquí varia de acuerdo a la versión de WordPress que uses, debido a las Template Tags que van añadiendo con cada actualización, si usas una versión vieja de WP (2.7 para abajo) esta es la forma de hacerlo:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class="authortext">
<h4>Escrito por <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>

Si en cambio estas al dia con tu instalación, vamos, tienes instalada la versión 2.8 para arriba, puedes utilizar el código que yo uso, de esta forma:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class=authortext">
<h4>Escrito por <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('display_name'); ?></a></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
</div>

Veran que sólo cambian las Template Tags, pero si no usas el método de acuerdo a tu instalación esto hará que desaparezca parte de tu blog al cortarse la ejecución de código en tu template.

Estilizando la Caja de Autor con CSS

Bueno ya esta puesto el armazón vamos a ponerle una bonita fachada d esta forma, el CSS que pondré es el que yo uso con Renovatio, pero ustedes pueden modificarlo a sus necesidades:

/* Estilos CSS para su Caja de Autor */
#authorbox{ background: #EFEFEF; border: 1px solid #CECFD0; width: 560px; margin: 0 auto; margin: 10px 0 10px 0; overflow:hidden; min-height: 115px; height: auto !important; height: 115px; }
#authorbox h4{ font-size: 16px; color: #191919; margin:0; padding: 10px 10px 5px 10px; }
.authortext{ padding: 0 20px 0 100px; }
#authorbox img{ margin: 10px; padding: 0px; float: left; border: 5px solid #ccc; }
#authorbox p{ color: #191919; margin: 0; padding: 0px 10px 10px 10px; }
#authorbox p a { color: #191919; }

Listo eso es todo, no obstante si quieres algo más completo echale un vistazo a la  Author Meta Tag de WP, y puedes implementar más información mediante parrafos dandoles una clase y luego alinearlos con CSS o separando los datos mediante la etiqueta &nbsb, por cierto el demo del resultado de este tutorial pueden verlo abajo de este post.

Veamos como se hace:

1. Descargamos Page-Navi.
2. Buscamos y cortamos los archivos: wp-pagenavi.php  y wp-pagenavi.css, abrimos el primero y editamos las siguientes líneas de código:

function wp_pagenavi($before = '', $after = '') {
        global $wpdb, $wp_query;

Reemplazandolas por estas:

function wp_pagenavi($before = '', $after = '') {
	global $wpdb, $wp_query;
pagenavi_init(); //Llamamos a que inicie la función

Guardamos y después de eso pegamos los 2 archivos en la carpeta de nuestro theme. Después deberemos insertar el siguiente snippet en donde queramos se despliegue la páginación, siendo común en el index.php, search.php a archives.php si lo tenemos:

<?php include('wp-pagenavi.php'); if (function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Pero un momento, aún no se despliega la paginación, ¿por qué?, falta agregar el enlace a la hoja de estilos CSS, lo haremos de esta forma:

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url');?>/pagenavi-css.css" />

Abajo del enlace al CSS de nuestro theme, el cual tiene la siguiente estructura:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Listo paginación embebida sin instalar ningún plugin, resulta muy útil sobre todo al desarrollar un theme para descarga ya que es una función bastante esencial en cualquier blog, el theme de Kernel Web tiene este hack aplicado.

Sin más que decir allí les va el primero

Listar los posts más recientes del blog en WordPress

Para hacerlo hay varias formas, podemos poner:

<ul>
<?php $lastposts = get_posts('numberposts=5');
foreach($lastposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

O recurrir a usar la función wp_get_archives un poco personalizada de esta forma:

<?php wp_get_archives('type=postbypost&limit=20'); ?>

Incluso podemos usar la función query_posts() para mostrarlos de esta forma:

<ul>
<?php query_posts('showposts=7'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

En todo caso cualquiera desplegará un resultado igual, despues sólo queda jugar con el CSS y hacer que luzca como deseemos, aunque en lo personal siempre prefiero el primero sobre los demás.

Para todos aquellos que manejamos la licencia de copyright en nuestro blog de WordPress por muchos factores, como el de evitarnos conflictos innecesarios por derechos de autor con otros bloggers , aquí les traigo un tip para que la fecha de su licencia copyright se actualize cada año automaticamente:

<?php echo date('Y'); ?>

Así es, con sólo agregar este código PHP al footer o donde este la indicación, la fecha se pondra al día conforme pase cada año, algo que a muchos amigos bloggers se les esta pasando, pues creen que todavía andamos en el 2008