Como agregar icono de fecha en el título de tus post

Si algo me gusta de algunos themes, son los iconos con la fecha de publicación del artículo al lado del título. Seguramente a vos te pase lo mismo, pero justo diste con un theme que te gustó mucho, pero no cuenta con este icono que muestre la fecha de tus post como a vos te gustaría.

Como lograr insertar éste icono en tu theme?

Primero subís la imágen que utilizarás de fondo en al mostrar la fecha. Esta imágen la deberás subir al theme que utilizás actualmente dentro de la carpeta “Images”.

Luego pegás el siguiente código en la hoja de estilo (style.css)

CSS:

.the_date {

display:block;

text-align: center;

float:left;

font-family: Arial, Helvetica, sans-serif;

background: url(images/pink.png) no-repeat;

width:60px;

}

.date_m {

display:block;

font-size: .9em;

margin:0;

padding:0;

font-weight: bold;

text-align:center;

}

.date_d {

display:block;

font-size:1.4em;

margin:0;

padding:0.7em 0 1.3em 0;

text-align: center

}

Si observás el código en ésta parte “images/pink.png” ahí deberás modificarlo y poner el nombre que lleve tu imágen, en mi caso, guarde la imagen en la carpeta “images” de mi theme, y la imagen se llama “pink.png”.
Una vez pegado el código anterior en nuestra hoja de estilo, te dirigís Plantilla de la página principal (index.php), y pegamos este siguiente cádigo:

PHP:

<div class=“the_date”><span class=“date_m”></span> <span class=“date_d”></span></div>

Si querés que el icono de fecha aparezca al lado izquierdo del tíitulo de tus post tenés que  buscar la propiedad

PHP:

 <?php the_permalink(); ?>

y pegarlo justo antes de todo eso. Para que te quede claro, te dejo esta imágen, lo resaltado en AZUL es el código que yo pegue.

Como ves lo pegué antes de todo lo subrayado en color rojo, que es el Link permanente que mostrara el título del post.

PACK DE IMAGENES PARA LAS FECHAS

Ahora creo que lo único que te falta es bajar iconos para utilizarlos en tus diferentes diseños, Entonces te dejo este PACK de 26 iconos para las fechas de tus post, todos de diferente color y en formato PNG. Puede que sean más grandes de lo normal, pero eso no es una complicación, le reducís el tamaño con cualquier editor de imágenes.

Descargar Pack de Imágenes

Si te gusto el post podes suscribirte a mi FEED!