iBlognet

Replace Post Date With Calendar Icon in WordPress Thesis

by Editor

CalendarA custom made WordPress theme helps you to stand out from other blogs, which makes your blog unique. And Thesis Framework makes it too easier to build your own branded WordPress theme. In my previous thesis  tutorial I showed you how to add a custom author box  below post with social media profiles which will also help to verify your blog Google Authorship. In this Thesis tutorial I will show you how to replace, normal text-based, post date in Thesis with a Calendar icon, which looks more like an image based date.

Step 1: Disable Default Thesis Dates

Go to Thesis Design options and in the “Display section” disable the two options for date as shown in the image below:

Thesis-design-option-date

Step 2: Get a Calendar Icon.

Search for a calendar icon that matches with your blog theme or create a custom one using Photoshop or GIMP. Check out the sources below:

…or create your own calendar icon:

…or do a simple Google Image search for blank calendar icons. For the purpose of this tutorial I will be using an icon as seen below. You can use it freely!

blank-calendar-icon

If you have found a matching icon for your theme upload to your media library or most probably your Thesis Theme custom image directory [thesis_184 > custom > images].

Step 3: Adding the Codes.

First add the following CSS code to custom.css file.

[css]
.custom .calendaricon {float: left;text-align: center;margin-left: -2em;margin-right: 0.5em;margin-top: -1.5em;}
.custom .month {color: #FFFFFF;font-family: Georgia;font-size: 10px;font-weight: bold;margin-top: -6.1em;text-transform: uppercase;}
.custom .day {color: #000;font-family: Impact;font-size: 22px;}
[/css]

The margins and fonts in above CSS code is adjusted as per the icon size. I have used icon size of 70×73 px. If your icon size is smaller or larger than mine, use Firebug to adjust the CSS styles and copy paste the code in custom.css

Now copy paste the following code if you want to display date icons in all pages.

[php]
/* CALENDAR DATE ICON */
function calendar (){ ?>
<div class=”calendaricon”>
<? echo ‘<img src=”http://YOURDOMAIN.COM/wp-content/themes/thesis_184/custom/images/date-icon-plain.png” />’; ?>
<div class=”month”><? the_time(‘M y’) ?></div>
<div class=”day”><? the_time(‘j’) ?></div>
</div>
<?
}
add_action(‘thesis_hook_before_headline’, ‘calendar’);
[/php]

Copy paste the following code if you want to display date icon on home page and Gravtar on post pages

[php]
/* CALENDAR DATE ICON */
function calendar() {
if(is_home()) { ?>
<div class=”calendaricon”>
<? echo ‘<img src=”http://YOURDOMAIN.COM/wp-content/themes/thesis_184/custom/images/date-icon-plain.png” />’; ?>
<div class=”month”><? the_modified_date(‘M y’) ?></div>
<div class=”day”><? the_modified_date(‘j’) ?></div>
</div>
<?php }
}
add_action(‘thesis_hook_before_headline’, ‘calendar’);

/* TITLE AVATAR */
function myavatar_post_title() {
if(is_single()) { ?>
<?php echo get_avatar( get_the_author_id() , 48 ); ?>
<?php }
}
add_action(‘thesis_hook_before_headline’, ‘myavatar_post_title’);
[/php]

Make sure you change image location with your domain name.

If you want to add superscript [like – 1st, 2nd, 3rd…] to the day, replace the following code:

<div class=”day”><? the_modified_date(‘j’) ?></div>

…with

<div class=”day”><? the_modified_date(‘j\<\s\u\p\>S\<\/\s\u\p\>‘) ?></div>

That’s it! You’re done. Your normal text-based date will now be replaced like in the image below:

iblognet-sample-1

…or…

iblognet-sample-2

If you got stuck in any of the steps above, leave a comment below and I will get back you soon. And if you don’t have a Thesis Theme, you should buy Thesis Theme right now!

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 Vanessa

I also have used thesis theme in the past. But now I used Genesis theme. I think it is easier compared to thesis but quite expensive.

Comments on this entry are closed.

Previous post:

Next post: