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

Comments

  1. Henk says:

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

    Cheers

  2. Lee Elvin says:

    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;}

  3. DmitryRomanovsky says:

    @dmitry.romanovsky cool -)

  4. Todd Santoro says:

    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;)

  5. Bloody says:

    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.

  6. Jordan says:

    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 :)

  7. Floris says:

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

    • Todd Santoro says:

      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!!!

  8. Tareq Hasan says:

    Nice Post, thanks :)

  9. Anything Graphic says:

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

    • Todd Santoro says:

      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.

      • christinebiz says:

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

  10. Nimit Kashyap says:

    This is a great tutorial.

  11. Morten says:

    Hi,

    great post, Thanks for sharing!

  12. Anything Graphic says:

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

    • Todd Santoro says:

      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!!!

  13. FlameScorpion says:

    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.

  14. David says:

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

  15. Mark says:

    Another great idea and good feedback. Thanks

  16. Indrek says:

    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!

    • Todd Santoro says:

      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!!!

      • Editorial Staff says:

        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.

        • Todd Santoro says:

          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???

        • Yury Tsukerman says:

          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

        • Todd Santoro says:

          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

        • Editorial Staff says:

          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).

      • Indrek says:

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

  17. Markus says:

    nice solution :)
    but too much code

    • Todd Santoro says:

      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!

  18. BlaineSch says:

    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!

  19. Webdesign Rosenheim says:

    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/

    • Todd Santoro says:

      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!

  20. Tammy Hart says:

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

    • Todd Santoro says:

      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)”

      • Tammy Hart says:

        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.

  21. Matt Reed says:

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

  22. Spencer Barfuss says:

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

    • Todd Santoro says:

      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:)

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.