Add a date stamp with an icon on your post

Check out the little icon with the date of the post in the top right corner. Here’s how I made it…

The first thing to do is gather the php code that will generate the time of the post…

the_time(’M') gets the month of the date
the_time(’j') gets the day of the date
the_time(’Y') gets the year of the date

For more info on the date code check out this

Next, I made the little icon in photoshop. You can make your own or find free icons by doing a search. I uploaded the image to my custom/images file

Next, I created a function, added the image, wrapped it in div tags, and gave it a class name…

function calendar (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images /calendar.png" />’; ?>
</div>
<?
}

Next, I added the date code, and gave each one a class name so I could style each one separately in my css

function calendar (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>

Finally, I added the whole thing with a hook…

function calendar (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>
<?
}
add_action(’thesis_hook_before_headline’, ‘calendar’);

Now in my custom.css I can style each part of the date stamp including the day, month, year, and the image…

.custom .calendaricon {float: right;
margin-top: -1em;}
.custom .month {text-transform: uppercase;
font-family: arial;
margin-top: -5.5em;
margin-left: 2.2em;}
.custom .day {font-family: arial;
margin-left: 2.99em;
padding-top: .3em;
padding-bottom: 2.2em;}
.custom .year {font-family: arial;
margin-left: 2.1999em;
margin-top: -2.2em;}

Tagged as: add date stamp, date, date icon, date stamp