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.

Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}

/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.

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.

Sobre todo en el caso de los permalinks y los títulos en WordPress, puesto que son las 2 cosas que visualizan primero las arañas de los buscadores.

SEO fácil para WordPress

He de decir que aunque he encontrado ya algunas soluciones en la cuestión de los títulos (las descripciones que el navegador muestra por cada página de tu sitio) ninguna me convenció del todo y por eso me puse a buscar una solución propia para esto, misma que comparto a continuación:

Basta con encontrar este código en el archivo header.php de su theme, el cual es la estructura de título que trae la mayoría de themes por default:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Luego lo sustituiremos por este:

<title>
<?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?><?php /* Contador de Resultados */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $count = $allsearch->post_count; _e('');
echo $count . ' '; _e('resultados'); wp_reset_query(); ?> para la búsqueda: <?php $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1);
echo $key; _e(); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if ( is_author() ) { ?>Archivos del Autor&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?>&nbsp;en&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?>Archivo de&nbsp;<?php the_time('F'); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php  single_tag_title("", true); } } ?>
</title>

¿Que acabamos de hacer?, vamos con la explicación de cada código les parece:

Primeramente he de decir que el snippet se basa en las funciones condicionales, indicadas en PHP por el caracter if, es así que:

<?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php } ?>

Le indica a WordPress que si el lector se encuentra en la Portada o Index del blog muestre una estructura como esta: Nombre del Blog | Descripción del blog, agarrando estos de la configuración en la sección Opciones Generales de su Dashboard de WP.

<?php if ( is_search() ) { ?><?php /* Contador de Resultados */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $count = $allsearch->post_count; _e('');
echo $count . ' '; _e('resultados'); wp_reset_query(); ?> para la búsqueda: <?php $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1);
echo $key; _e(); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>

Bueno acá tal vez se me paso un poco la mano con el código, pero quise que quedará los más natural posible, si el usurio está observando la página de resultados después de una búsqueda, la forma del título quedará así: 2 resultados para la búsqueda: PHP | Nombre del Blog.

<?php if ( is_author() ) { ?>Archivos del Autor&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>

Para los archivos de un autor, el título a mostrar será: Archivos del Autor | Nombre del Blog.

<?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>

La estructura del título de cada post será algo como: Títulos SEO para WordPress sin usar plugin | Kernel Web.

<?php if ( is_page() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>

Para una página se visualizará: Nombre de la Página | Título de tu Blog.

<?php if ( is_category() ) { ?><?php single_cat_title(); ?>&nbsp;en&nbsp;<?php bloginfo('name'); ?><?php } ?>

Si son las entradas agrupadas en una categoría se verá como un ejemplo: WordPress en Kernel Web.

<?php if ( is_month() ) { ?>Archivo de&nbsp;<?php the_time('F'); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>

Archivo de un mes en especial: Archivo de Marzo | Tu Blog.

Y por último para las etiquetas se mostrar sólo el nombre: Nombre de la Tag.

<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php  single_tag_title("", true); } } ?>

Es todo, pueden modificarlo más si gustan, aunque así como esta ya es una buena configuración y forma de prescindir de plugins como el All in One SEO Pack para tener títulos SEO  en tu bitácora.

Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.

1.  Sigue las reglas y los estandares

Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la W3C ayuda bastante a cumplir el objetivo.

Usable y Accesible

2.  No uses hacks, mejor usa Fixes

Lo puedes hacer manualmente o usando IE6 CSS Fixer.

3.  Optimiza tus imágenes

No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún software para optimizar imágenes o herramientas web como Smush.it.

4. No te olvides del iPhone

Furor que causo el 3G y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, checa como se ve tu sitio en el iPhone y si tienes un blog corriendo con WordPress optimizalo para el juguete favorito de Apple.

5. No uses tanto Flash y JavaScript

Dado que son lenguajes que para su interpretación y lectura son necesarios algunos reproductores y habilitación de opciones es recomendado usarlos sólo cuando es necesario, así se evita la falta de elementos en tu sitio web si el usuario no cuenta con tales cosas y se aligera un poco más el peso final de la página.

Kernel Web en el iPhone

6. Describe tus elementos

Imágenes con el atributo ALT, enlaces con title y buen anchor text, descripciones de videos y multimedia.

7. Genera contenido legible, usable y escaneable

El contenido lo es todo, más alla de si el diseño es bueno, el contenido es el rey, hacer contenido usable y de calidad es una directriz no escrita, pero que es bueno seguir para hacer de la web una herramienta optima y completa.

8. Prueba y Comprueba

Nada más sabio que el arreglar y romper, tanto para aprender, como para mantener una website en optimo estado, usa los recursos que la web de brinda para asegurarte de que tu trabajo esta bien hecho:

• Hera, completa y muy buena herramienta que rescate de las entrañas de Webmaster Libre una suerte haberla visto.
• CrossBrowserTesting, visualiza tu website en tiempo real en todo navegador.
• IE Collection, todos los enemigos de los estandares (IE6,7 y 8 ) en uno sólo , para comprobar si se ve bien tu sitio y nada más.

Comentarios Personalizados de Kernel Web

Si usas un theme diseñado para WordPress 2.7 esto es sumamente fácil, puesto que todo se hace con CSS usando algunas clases, tomaré de referencia las de este blog para mostrarlo de forma práctica:

ol.commentlist li.bypostauthor {  background: #D4EDFE; border: 3px solid #FFF;  }

Esto es si tenemos sólo un autor activo en nuestro blog, en caso de tener 2, 3 o más podemos recurrir a usar el siguiente tipo de estilo:

ol.commentlist li.comment-author-esteban-rojas { background:#333; border: 2px ridge #ff8800; }

ol.commentlist li.comment-author-tu-nombre-de-usuario { background: #333; border: 1px solid black; }

Esto para que cada autor tenga su propio estilo CSS a la hora que comente, el nombre de usuario vendría a ser el nombre que usamos para loguearnos en nuestro blog , si aún conservas el que  por defecto te asigna WordPress al instalarlo en tu server, el cual es admin, basta con asignar lo siguiente a tu hoja de estilos:

ol.commentlist li.comment-author-admin { Acá irian tus estilos }

Si en cambio usas una plantilla antigua, y por ende sin comentarios adaptados a WordPress 2.7, la forma de conseguir que tus comentarios resalten de entre los de tus lectores es la siguiente:

Abrimos nuestro comments.php y localizamos el siguiente código:

<?php foreach ($comments as $comment) : ?>

Y debajo añadimos lo siguiente:

<?php
   $isByAdmin = false;
   if($comment->comment_author_email == "tucorreo@demo.com"){
   $isByAdmin = true;
   };
?>

Esto no es más que una función condicional enfocada a verificar si el correo del comentarista es igual al correo del admin "tucorreo@demo.com" , por lo que tendrán que cambiar este último por el suyo y debajo añadir lo siguiente :

<li class="<?php if ($isByAdmin) echo 'admin-comment'; else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Que indica que si el correo coincide con el que pusieron se formatee ese comentario con la clase que establezcan, en este caso: admin-comment. Luego de esto bastara con ir al archivo style.css de nuestro theme y establecer los estilos CSS para la clase, generalmente tienen esta forma:

.commentlist li.admin-comment { background: #D4EDFE; border: 3px solid #FFF; }

Si su bitácora tiene 2 o más administradores bastará con añadir una sentencia elseif o las que sean necesarias, puesto que estas se ejecutan en orden al devolver un valor cierto o falso, para 2 admins o autores quedaria así:

<?php
        $isByAuthor = false;
        $isByAdmin = false;
        if($comment->comment_author_email == "correoadmin1@demo.com"){
            $isByAdmin = true;
        } elseif($comment->comment_author_email == "correoadmin2@demo.com"){
            $isByAuthor = true;
        };
        ?>

Se añadiria la clase: author-comment al CSS y abajo del código anterior se colocaria:

<li class="<?php if ($isByAdmin) echo 'admin-comment'; elseif ($isByAuthor) echo 'author-comment';
else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Tal vez por ser blanco y gris, colores medio apagados a mi parecer, seguro que a muchos de ustedes tampoco les ha de agradar mucho (?) , entonces ¿porque no cambiarlo y poner tu propio avatar personalizado?.

¿Cómo?, a continuación un pequeño tutorial cortesia de Build Internet más algún bonus agregado por mi, manos a la obra.

Avatares Personalizados

Primero abrimos el archivo functions.php de nuestro theme, si no tienen uno, pueden crearlo desde el Notepad o su editor de código favorito y subirlo por FTP a la carpeta de su template.

Hecho esto no situamos en él, preferiblemente al final, antes de que se cierre el archivo con el simbolo ?> y agregamos este snippet:

add_filter( 'avatar_defaults', 'newgravatar' );

function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/customavatar.png';
    $avatar_defaults[$myavatar] = "Avatar Redux";
    return $avatar_defaults;
}

Donde:

1. Add Filter es la función que le dice a WP que vamos a editar la sección de los avatar por default, agregando uno nuevo.
2. La función “newgravatar” es la responsable de proporcionar la ubicación y el título del nuevo Gravatar que vamos a añadir.
3. La primera linea de la función corresponde a la ubicación de la imagen que se va a usar para añadir el nuevo gravatar, es importante señalar que además del nombre se debe especificar el tipo de archivo correcto (JPG,PNG).
4. La segunda línea es la que define el nombre de este, en mi caso: “Avatar Redux”.
5. La última parte devuelve los resultados que deben incluirse en el theme a la matriz avatar_defaults.

En caso de que se quieran agregar 2 o más avatars, basta con repetir las 2 líneas que componen la función, sólo que numerandolas para tener un ID o clave diferente:

 $myavatar = get_bloginfo('template_directory') . '/images/customavatar.png';
    $avatar_defaults[$myavatar] = "Avatar Redux";

 $myavatar2 = get_bloginfo('template_directory') . '/images/blogavatar.jpg';
    $avatar_defaults[$myavatar2] = "My Avatar";

    return $avatar_defaults;
}

Y eso es todo, adios al señor misterioso , espero les sirva, un pequeño truco o hack que tiene un buen impacto visual, pueden ver el de este blog hecho por mi amigo y gran diseñador Teo Atienza en los comentarios, así mismo quiero darle las gracias a Andrés Nieto por ayudarme con el CSS para mostrar código en los posts de WordPress.