The last tutorial on CSS Calendar Icons was pretty straightforward but lacked directions for integration with other blogging platforms. Here, I’m going to use Wordpress as an example and I’ll work with my calendar book-style css icon.
<?php // begin calendar icon code $year = get_the_time('Y'); list($y1,$y2,$y3,$y4) = str_split($year, 1); ?> <span class="cssCalendar book" title="<?php the_time('F jS, Y') ?>"> <span class="spine"></span> <span class="year"><span><?=$y1?></span> <span><?=$y2?></span> <span><?=$y3?></span><span><?=$y4?></span> </span> <span class="cssCalInner"> <span class="month"><? the_time('M')?></span> <span class="date"><? the_time('j')?></span> </span> </span> <?php // end calendar icon code ?>
Here, we’re using the Wordpress function get_the_time(), which works like the_time()—which means that it uses the same PHP Date and Time formatting characters as the_time(). Unlike the_time(), get_the_time() passes the result to a variable instead of echoing it, which is what we need here. We use get_the_date(‘Y’) to grab just the year-part of the date, then we use str_split() and list() to parse the individual numbers of the year into separate variables.
CSS Code:
/* Default Calendar Styles */ span.cssCalendar { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; background: white; text-align: center; display: block; float: left; } span.cssCalInner { display: block; } span.cssCalendar .day { text-transform: uppercase; display: block; } span.cssCalendar .month { text-transform: uppercase; display: block; } span.cssCalendar .date { display: block; } span.cssCalendar .year { display: block; } /* Book-Style */ .book { width: 57px; font-size: 12px; font-weight: normal; } .book .cssCalInner { width: 36px; margin-left: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #CCC; border-top: 1px solid #CCC; } .book .spine { background: url(images/calendar_book.png) no-repeat scroll left center; display: block; float: left; width: 14px; height: 38px; position: relative; z-index: 1; } .book .year { font-size: 75%; background: purple; color: white; height: 38px; width: 15px; float: left; margin-left: -10px; position: relative; z-index: 0; } .book .year span { display: block; float: right; width: 10px; height: 8px; } .book .month { background: none; color: black; } .book .date { font-weight: bold; font-size: 120%; }
Seems pretty straightforward, right?
Using Wordpress? Go to the next page for a Wordpress add-on to use in your own Wordpress themes.