Mar 25

Here’s a Quick Way to Add a Custom Date Graphic to your WordPress Blog

Filed under: Tutorials

Use this calendar image on your custom WordPress blog.You may have noticed the spiffy new calendar icon here at Mesmer Lab. Well I created the graphic purely in Photoshop and have made it available at Graphic River. A future article will explain how I made it, but this article is about how to implement it into your WordPress blog.

The goal is to get rid of the generic-looking display of each article’s date. The visitor to most sites would want to know when the article is written to see how relevant the ideas, data or techniques are. A bold display of the date lets the user quickly scan and find the publish date.

Step One: The Image

For quickness, you can download the png file I’m using here, download the full source file at Graphic River, or build your own. Just make note of the dimensions since we’ll be using it as a background image.

You can use most anything as a date icon. Common metaphors include a calendar like I’m using or the piece of paper that Web Designer Wall uses.

Step Two: The WordPress Code

We have to create a few new elements to house the date code. This will take the place of the stock date implementation so we can put or own spin on the look and feel. The following is how I’ve done it here at Mesmer Lab. I’ve modified the code in the Main Index Template (index.php).

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<div class="post">

<p class="date">
     <?php the_time('M'); ?>
     <span><?php the_time('d'); ?></span>
</p>

{your post code goes here}

</div>

<?php endwhile ?>

I’ve created a DIV with the ‘post’ class inside the loop. There’s a tiny bit of CSS applied to this div and I’ll explain it in a few minutes.

I’ve used a paragraph element for the main container. The paragraph seemed to work better than a typical DIV, in regards to ease of modification and cross-browser compatibility. This is where I put the month for the article.

The span element works perfectly inside the paragraph tag, simply because I added the ‘display:block’ designation. It seemed to play along better instead of a DIV. The numerical date (with leading zero) resides here.

Step Three: The WordPress CSS

.post {
position:relative;
}

The wrapping DIV is set to position relatively. This allows absolute positioning inside for the paragraph element. If you don’t do this, all the dates on the home page will be on top of each other. Don’t just copy and paste this code into your theme files. If you’re not using my specific image, your results will not look right.

.date {
background:transparent url('your-image.png');
position:absolute;
left:-80px;
top:8px;
color:#fff;
width:56px;
height:61px;
padding:14px 0 0 18px;
font:bold 12px Arial;
}

Next you’ll need to link the image to the paragraph and position it absolutely inside the div.post element. The padding and width/height are tied together in the box model. You’ll have to adjust the width and height depending on how much padding you need for the text to show up properly. Typical font styling is present.

.date span {
display:block;
width:100%;
text-align:center;
margin-left:-7px;
margin-top:1px;
line-height:26px;
color:#000;
font: italic bold 24px Georgia,"Times New Roman",Times,serif;
}

To push the numerical date on a second line, I’ve employed ‘display:block’. Span by nature displays its contents inline. The margin code is for simple positioning. The line-height is so IE will display the whole number. And we round it out with typical font styling.

Step Four: Adding to Single Posts

The next step is relatively easy. Open the Single Post (single.php) file and repeat the code you used in Step Two. This goes in the same place, so it should be easy for you to find.

Conclusion

Customization will make your Wordpress site unique. You can add a sense of branding by efficient use of colors, icons or other visual elements. By adding a custom date graphic to your Wordpress site, you are on your way to standing out in the crowd.

I hope you enjoyed this tutorial. Comments, suggestions and how you’ve implemented this on your site are welcome.

[Post to Twitter] [Post to Plurk] [Post to Yahoo Buzz] [Post to Delicious] [Post to Digg] [Post to Ping.fm] [Post to Reddit] [Post to StumbleUpon]

Comments

  1. HeepeendurbNo Gravatar

    Sunday, April 5th, 2009 at 2:20 pm

    Great site this http://www.mesmerlab.com and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

    Reply to This Comment

    JasonNo Gravatar Reply:
    April 9th, 2009 at 12:15 am

    Thanks!
    Work is piling up as usual. But I will be adding more tutorials like this.

    If you have any questions on the code I used, feel free to ask.

    -jason

    Reply to This Comment

  2. MarkNo Gravatar

    Tuesday, September 29th, 2009 at 10:43 pm

    This method doesn’t work at all. Could you please explain what this:

    {your post code goes here}

    means?

    Reply to This Comment

  3. JasonNo Gravatar

    Wednesday, September 30th, 2009 at 12:17 pm

    Hi Mark,

    The {your post code goes here} part is just a placeholder. My full ‘post code’ is as follows:

    <h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a><span class=”title-comments”></span></h2>
    <small>Filed under: <?php the_category(‘, ‘); ?></small>

    <?php the_content(‘<div class=”readmore-img”><img src=”http://www.mesmerlab.com/wp-content/uploads/2009/03/read-more.png” width=”115px” height=”36px” /></div>’); ?>
    <div class=”separator”></div>

    Reply to This Comment

    JasonNo Gravatar Reply:
    September 30th, 2009 at 12:25 pm

    That is a modification of the typical post code. It is within ‘the loop’ and will output each article’s data.

    In essence, ‘post code’ = the layout for each article.

    Reply to This Comment

  4. KahunaNo Gravatar

    Thursday, November 19th, 2009 at 1:39 pm

    Nice tutorial and exactly what I’ve been looking for! I’m wondering if someone has a good plugin with this functionality.

    Also, the design of this site is awesome – great job!

    -Kahuna

    Reply to This Comment

    JasonNo Gravatar Reply:
    November 19th, 2009 at 2:13 pm

    @Kahuna, Hi Kahuna.

    I’m glad you liked the tutorial and the site. I did a quick search for a plugin for custom dates in Wordpress with no luck. The only results I found involved a ‘relative’ date function. I assume this would mean having a Twitter-like display, such as “This article was posted 3 days ago”, etc.

    Let me see what I can do about getting a plugin created.

    Reply to This Comment

  5. AllanNo Gravatar

    Friday, December 4th, 2009 at 4:34 am

    Hi Jason
    Your date is just what I am looking for!!
    I have downloaded you graphic went to the index.php and this is all I get:

    I cant find anything that resembles your code. I am using prophoto template and the latest version of wordpress.
    Not sure where I am going wrong?

    Cheers

    Allan

    Reply to This Comment

    JasonNo Gravatar Reply:
    December 4th, 2009 at 1:28 pm

    @Allan,

    Make sure you’re in the Admin section of your website. Then navigate to Appearance > Editor > index.php.

    Reply to This Comment

  6. AllanNo Gravatar

    Friday, December 4th, 2009 at 5:01 am

    Hi Jason

    This is the code I have in the index.php

    <div id="post-” class=”entry-post self-clear “>

    <a href="” title=”" rel=”bookmark”>

    <!– #post—>

    I am not sure what I should modify?

    Cheers

    Allan

    Reply to This Comment

    JasonNo Gravatar Reply:
    December 4th, 2009 at 1:25 pm

    @Allan,

    Well the specific part of the code you’re looking for is…
    if(have_posts())

    That part is the beginning of what they call ‘the loop’. This part of the code ‘loops’ through your articles and drops the text into the template you build.

    The ‘post’ class I’ve created wraps each article and allows the calendar icon to be positioned inside.

    Search for that piece of the code and see if you can gain any ground. And let me know if you need any more help.

    Reply to This Comment

  7. AllanNo Gravatar

    Saturday, December 5th, 2009 at 3:27 am

    Hi Jason
    Thanks for the help I was able to get the code in but there must be an issue with ProPhoto theme because it does not display correctly and throughs the site out of whack.
    I look forward to a plugin.

    Reply to This Comment

  8. dennisNo Gravatar

    Sunday, January 31st, 2010 at 9:08 am

    When I’m looking at my index.php page I already have two sections that are labeled <div class="post" id="post-”>

    Should I put your code above these OR should I put the inside one or both of these?

    I’m new to php and would like to use this effect. Any help is greatly appreciated!

    Reply to This Comment

    dennisNo Gravatar Reply:
    January 31st, 2010 at 9:28 am

    I took a leap of php faith and it worked. Thank you for the tutorial!

    Reply to This Comment

    JasonNo Gravatar Reply:
    January 31st, 2010 at 4:23 pm

    Hi Dennis,

    I’m glad you got it to work. Editing the php files is not a beginner task. Just remember to always make a backup so you can easily revert to a working state. ;)

    Jason

    Reply to This Comment

  9. JeniferNo Gravatar

    Thursday, March 4th, 2010 at 4:25 am

    I’m going to attempt this tomorrow but was wondering if you ended up making a plugin? Thanks so much for this tutorial though! I’m hoping I can figure it out.

    Reply to This Comment

    JasonNo Gravatar Reply:
    March 4th, 2010 at 2:38 pm

    Hi Jenifer,

    I haven’t finished the plugin. This would be my first one, so I’m learning the whole process.

    But I can answer any questions you have about doing it manually. And actually, most theme designers say that coding it into the theme is better than adding another plugin.

    Just let me know if you get hung up.

    Reply to This Comment

    JeniferNo Gravatar Reply:
    March 5th, 2010 at 3:18 am

    @Jason, ..you might regret offering to help LOL. so I tried tonight and it is giving me an error and my blog wont pull up. So I copied the original code back. I am usually pretty decent at following things but apparently am missing this one totally. Not sure what you need from me to help but feel free to email me if you happen to have the time. thanks so much.

    Reply to This Comment

    JasonNo Gravatar Reply:
    March 5th, 2010 at 3:26 am

    @Jenifer,

    Ah, for a second there I thought your blog was borked. Good to see you restored it. :D

    Please contact me via the form on this site and lets take this conversation private.
    http://www.mesmerlab.com/contact/

    Jason

  10. Stu TanquistNo Gravatar

    Sunday, June 20th, 2010 at 3:59 pm

    Hi, Great tutorial! I’d love to add this functionality. I’m receiving the following error:

    Parse error: syntax error, unexpected T_CLASS in /home1/tanquist/public_html/wgtdblog/wp-content/themes/atahualpa351/index.php on line 21

    Here is line 21 of index.php:

    <?php the_content(‘’); ?>

    Any ideas as to what I might do differently? I’m using Wordpress 2.9.2 and the Atahualpa theme – 3.5.1.

    Reply to This Comment

  11. JasonNo Gravatar

    Monday, June 21st, 2010 at 7:02 am

    Hi Stu,

    The ‘unexpected T_CLASS’ error usually signifies a missing comma or semi-colon at the end of a line. The error might not even be on line 21, but a previous one. It is finding ‘unexpected’ elements after the missing character.

    So look on line 20 for a missing semi-colon. I bet that’s the issue. If not, look on the lines before also.

    Look up ‘unexpected T_CLASS’ on the internet to learn more about this pretty common issue.

    If you still can’t fix it, please let me know!

    Jason

    Reply to This Comment

  12. StuNo Gravatar

    Monday, June 21st, 2010 at 5:33 pm

    Thank you Jason. I do see a missing semi-colon in the .date CSS above. I copied the Wordpress code verbatim (inserting your post code from Comment #3 above).

    The post code seems questionable between the back-to-back instances of “php the_title()”, though it sounds it works for you.

    I haven’t made any other edits to index.php, so it’s just native code from the Atahualpa theme.

    Any other thoughts on what I might do?

    Reply to This Comment

    JasonNo Gravatar Reply:
    June 21st, 2010 at 7:02 pm

    Ah yes, good catch. But that missing semi-colon is in the CSS file, not the PHP stuff. That would just cause the styling to be wonky.

    Check for a missing semi-colon in index.php at or before line 21. I’ve also added semicolons to the first block of php code above, where I’m calling the month and date. Check your version of that code also.

    Not sure what else to suggest. There’s not a lot of custom php coding here.

    Let me know how it turns out.

    Reply to This Comment

  13. StuNo Gravatar

    Tuesday, June 22nd, 2010 at 9:33 pm

    Thanks again Jason. I gave up on the repeating date, but still made good use of the image had intended to use by placing it below the header: http://WGTDblog.com/

    Best wishes.

    Reply to This Comment

    JasonNo Gravatar Reply:
    June 23rd, 2010 at 8:54 pm

    Stu, if you’d like, I can check your code within your site. Send me an email via the form here and lets take this out of the public conversation.

    Jason

    Reply to This Comment

  14. StuNo Gravatar

    Wednesday, June 23rd, 2010 at 11:15 pm

    Thanks for the offer Jason. I’m happy with the look of the blog that I’m developing, though I’d love to add the custom date graphic that you’ve described.

    How do we proceed?

    Stu

    Reply to This Comment

    JasonNo Gravatar Reply:
    June 27th, 2010 at 10:07 am

    Click on the ‘Contact’ link at the top of the site and send me your login information. That will send an email to me directly without posting your credentials online.

    Jason

    Reply to This Comment

Trackbacks and Pingbacks

Leave a Comment