Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides
  • Henk

    Thanks for sharing; was able to add this to my WordPress page with Awake theme!

    Cheers

  • Lee Elvin

    Great post but now its 2012 people will start to see there is an error in the code for 2012, the px is missing in the position, just add px after the -180.

    .y-2012 { background-position: -150px -180px;}

    • Lee Elvin

      Just noticed day 31 has same problem, no px for position.

  • DmitryRomanovsky

    @dmitry.romanovsky cool -)

  • http://toddsantoro.com Todd Santoro

    Thanks to everyone who made this post one of the most commented post on WPbeginner. It just shows how a group of passionate web developers dedicated to an awesome open source project like WordPress can smash-up ideas. I love how the pros and cons come out in the discussion.

    This methodology can be used with any date display you like; just use your imagination;)

  • http://www.chantdeleau.com/wordpress Bloody

    Thanks a lot Todd for your tutorial.
    I use it now on my coming soon articles page for my members.
    I also use @font-face (Typekit) on the other pages.

  • http://icupcake.org Jordan

    I like the concept but for those that utilize Cufon, Typekit or any other text renderer.. Simplifies it majorly without having to create a PSD then code each day, month and year in CSS.

    Saves a lot more time :)

  • http://mrfloris.com Floris

    What happens with posts from before 2009, will they show normal in posts or broken?

    • http://toddsantoro.com Todd Santoro

      Flores,

      Posts that are before 2009 will show the top left corner of the .png image because there is no CSS to tell it what position to appear in.

      You can expand on the image and the CSS to include 2008, 2007, etc… Just keep everything the same in the tutorial and add the extra years to you graphic. Use the same technique as above to find the top left corner of where the .png should be positioned and create your css. You will only need to adjust the year in the css.

      Cheers!!!

  • http://www.facebook.com/profile.php?id=616629268 Tareq Hasan

    Nice Post, thanks :)

  • http://www.anythinggraphic.net Anything Graphic

    I tried it and it didn’t work :-(

    • http://toddsantoro.com Todd Santoro

      Anything,

      I’m not sure exactly what didn’t work for you, but When I look at the code and how its presented on WPbeginner. The single quotes within the PHP tags appear to be a little weird. I believe this is a result of running the entire post through: http://www.elliotswan.com/postable/ which does not allow real single quotes to be displayed b/c it would actually execute the code. A plug-in should probably be used on the site that would allow for cutting and pasting…

      Conclusion: Check all single quotes in the code. I hope this helps:)

      Update me if that is not the problem.

      • http://www.christine.biz christinebiz

        That did the trick. I replaced all the single quotes with actual single quotes. Thank you!

  • http://www.corebloggers.com/blog/ Nimit Kashyap

    This is a great tutorial.

  • http://www.w-academy.dk Morten

    Hi,

    great post, Thanks for sharing!

  • http://www.anythinggraphic.net Anything Graphic

    Super sweet! Thanks for this. I always wondered how this was accomplished.

    • http://toddsantoro.com Todd Santoro

      Anything,

      You are welcome. As you can see from the comments there are several way to Super Style your post dates or typography in general, but I love CSS Sprites and most people can wrap their heads around the concept pretty easily.

      Thanks for reading!!!

  • http://www.flamescorpion.com FlameScorpion

    Sprites are good for loading time, but i think that the rest, same looking can be done in many ways. But for time load saving, this is good.

  • David

    can I do something like that with the archive? for the wp_get_archives ?

  • http://www.markhedley.co.uk Mark

    Another great idea and good feedback. Thanks

  • http://www.online-blogger.net Indrek

    Great tip!

    I remember when a few years ago one of our programmers solved this situation by generating the date image on the fly. I mean literally every time you’d refresh the page a fresh image would be generated – no cache. And his salary wasn’t that low also :)

    I’d probably prefer Javascript/jQuery to setting the correct background-position coordinates. A bit too much CSS for my taste. Just get the month/day/year number and calculate the position according to the height/width of every value in the sprite.

    But what ever suits you best!
    Still, great tip!

    • http://toddsantoro.com Todd Santoro

      That’s what I love about the internet. There is always more than one way to skin a cat.

      Indrek, It would be nice if you would write a short tutorial on how to accomplish this using jQuery. I do like your idea and it would eliminate the need for math in the css.

      Thanks!!!

      • http://www.wpbeginner.com Editorial Staff

        There is probably a better way using Sifr or Cufon also. You can have fancy text, rotate the text to 90 degrees using a JS. And it can be done dynamically. But CSS Sprites is just another cool way to do it.

        • http://toddsantoro.com Todd Santoro

          I never thought about using sIFR to accomplish this task. You could do so much using the sIFR approach.

          Great idea!!!

          Maybe part 2 is in order???

        • http://recessmobile.com Yury Tsukerman

          Todd, great job.

          I’ve never understood the impulse to reduce markup and styling as though it’s intrinsically evil. If you’re worried about manual labor and seemingly sub-optimal repetition (if it can be automated, it should be, right? I’ll defer to 37 Signals when I say “not always“), just generate your CSS server-side with something like SASS or Compass mixins. I don’t see how adding client-side processing (slowing effective load times) and forcing js on users for simple visual cues is an improvement.

          Cufon has given me more headaches than it was ever worth. Again, I don’t see how the added weight of a font file (which you may or may not legally be allowed to embed, anyway) and the client-side processing required to run whatever fancy font-replacement tool is a net benefit to the user.

          tl;dr: 1. keep the logic server-side 2. you’re not hurting anyone with a sliver of extra CSS

        • http://toddsantoro.com Todd Santoro

          Yury-

          I found a great article on the pros and cons of each approach with respect to advanced text replacement: http://thinkclay.com/technology/cufon-sifr-flir

        • http://www.wpbeginner.com Editorial Staff

          We recommend Cufon if you are just using it for navigation and other stylistic elements because it uses JavaScript and most computers support it unlike sIFR which uses Flash and not all computers have flash. The downside of using Cufon is that users cannot select the font and you cannot use all fonts (there are restrictions).

      • http://www.online-blogger.net Indrek

        Who knows, I might write a little tutorial about doing the second part with jQuery. I’ll let you know.
        Great idea :)

        • http://toddsantoro.com Todd Santoro

          Indrek,

          Lets see it:)

        • http://www.wpbeginner.com Editorial Staff

          You are welcome to submit a guest post at WPBeginner anytime :)

  • http://www.just4freaks.de Markus

    nice solution :)
    but too much code

    • http://toddsantoro.com Todd Santoro

      Markus,

      I love to hear about less code. Do you have a solution? Please share your code; because not only I am chomping at he bit to “work it” but all WPbeginner’s would like to work it/see it.

      Thanks in advance!

  • BlaineSch

    Wow, amazing work, amazing insight on automating something that looks like that! Using this method it would not take long to expand it a few years down the road either! Good job!

  • http://www.webdesigns-rosenheim.de Webdesign Rosenheim

    Haven’t I seen such a tutorial somewhere else already? It was long ago at css-tricks.com http://css-tricks.com/date-display-with-sprites/

    • http://toddsantoro.com Todd Santoro

      Webdesign Rosenheim,

      It is the same technique however I was unaware of the tutorial. I believe that both tutorials serve a purpose because they speak to segmented audiences.

      Thanks for pointing it out!

  • http://www.tammyhartdesigns.com Tammy Hart

    This is a very nifty idea. However, I would probably use rather than is it would be better semantics. (stickler)

    • http://toddsantoro.com Todd Santoro

      Tammy,

      Please clarify you response:

      “This is a very nifty idea. However, I would probably use rather than is it would be better semantics. (stickler)”

      • http://www.tammyhartdesigns.com Tammy Hart

        having each part of the date in a div tag doesn’t make any semantic sense. I would opt to use a span tag since those are overlooked be readers.

  • http://painteddigital.com Matt Reed

    Nice idea! I like how you put the year vertically. I love using sprites wherever possible to cut down on http requests.

  • http://barefoot-webdesign.com Spencer Barfuss

    I’m wondering if this is the same technique used here: http://css-tricks.com/date-display-with-sprites/, posted back in July 2009.

    • http://toddsantoro.com Todd Santoro

      Spencer,

      It appears that it is the same technique. I believe that both tutorials serve a purpose because they speak to segmented audiences.

      Thanks for pointing it out:)