WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Themes» Use CSS Sprites to Beautify your WordPress Post Dates

Use CSS Sprites to Beautify your WordPress Post Dates

Last updated on June 21st, 2012 by Editorial Staff
16 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
Use CSS Sprites to Beautify your WordPress Post Dates

Ever wonder how to super style your blog’s post date?  I am going to show you how to do this using CSS sprites in about 18 minutes.

Editorial Note: This post is geared toward theme designers. Prior knowledge of CSS and WordPress is recommended.

What you will need:

  • A graphics program (I use Adobe Photoshop CS4)
  • A simple text editor

What you will accomplish in this tutorial:

  • The dates on your blog’s posts will be super styled using CSS Sprites

Let’s get started…

Step #1

Fire up your graphics program.  You can download a PSD or PNG template to help with the layout of all of the dates in our Sprite.

Step #2

Basically you want to create a grid using months, days, and years.  As you can see, my grid has the months in one column then the days in two columns and finally the years vertically in a column. Once you get your dates on the “grid” you can save the file. Hint: Make sure your text is equally spaced from top to bottom and from left to right.  This makes the math easier when each date has the same white space.

Step #3

On to the coding… Don’t worry it’s really easy, especially if you are using my PNG or have used the PSD file (It includes guidelines to keep your “grid” nice and neat plus you can then cut and paste the CSS code in this step directly into your themes’ stylesheet without any math.)

The CSS is as follows:

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

Explanation:

.postdate – Sets the width and height of the entire date.  In this case we are going to make our date fit into a box 66px by 60px.

.month, .day, .year – Sets the width and height of the individual elements that make up our whole date Sprite. Our months and days are 33px wide by 30px high. The years are 33px wide by 60px high. When you put these elements together they make a box 66px wide by 60px high.  It also attaches the graphic we made in step #1 so we can position it for each individual element in the Sprite.

.m-01 through .m-12 – You guessed it!  These are our months.  This part of the CSS positions our graphic to display the months.  As you can see I set  the image to move on an X Y axis based on where it appears on the image. The easiest way to figure out where the top left corner (0,0) of each month, day, or year is on the larger image is to open up Photoshop and select the Marquee tool.  Select from the top left down and over to the right to just above the top left corner of you month, day or year and note where your pointer is using the info panel’s stats.

.d-01 through .d-31 – Is used for exactly the same thing as .m-01 – .m-12 except their used for the days rather than the months.

.y-2009 through .y-2014 – Same as above only we use them for the years.

Step #4

Open up the loop in WordPress.  The loop in WordPress is the page(s) that display(s) your blog posts. This is usually the index.php page. Dates show up on other pages too but this tutorial only replaces the dates in the main loop.  If you got to this section of the tutorial you are intelligent enough to seek and replace the other instances of dates in your theme in other files such as single.php, page.php, archives.php etc.

Search for something along this line in your loop:

<?php the_time('F jS, Y') ?>

Replace with these lines:

<div class="postdate">
<div class="month m-<?php the_time(‘m’) ?>"><?php the_time(‘M’) ?></div>
<div class="day d-<?php the_time(‘d’) ?>"><?php the_time(‘d’) ?></div>
<div class="year y-<?php the_time(‘Y’) ?>"><?php the_time(‘Y’) ?></div>
</div>

Step #5

Upload your image, CSS, and your themes’ loop (index.php). Hit refresh on your blog (make sure you are on the page that posts are shown on) and Voila! You just super styled your dates using CSS sprites.

Beautify Your WordPress Dates with CSS Sprites

Todd SantoroTodd Santoro is the Principal and Sr. Designer at his company ToddSantoro.com Designs. Todd has been working on the web for 11 years and excels in UI and graphic design. He loves paying attention to details and developing on the WordPress framework. You can follow him on Twitter.
16 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

42 Comments

Leave a Reply
  1. Gabrielle says:
    Sep 4, 2015 at 12:14 pm

    Hi, how can i change this code to show:
    last updated on time?

    Reply
  2. Henk says:
    Oct 11, 2012 at 10:03 am

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

    Cheers

    Reply
  3. Lee Elvin says:
    Jan 1, 2012 at 8:20 am

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

    Reply
    • Lee Elvin says:
      Jan 1, 2012 at 8:22 am

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

      Reply
  4. DmitryRomanovsky says:
    Jul 9, 2011 at 5:47 am

    @dmitry.romanovsky cool -)

    Reply
  5. Todd Santoro says:
    Feb 17, 2010 at 12:34 am

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

    Reply
  6. Bloody says:
    Feb 13, 2010 at 4:53 pm

    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.

    Reply
  7. Jordan says:
    Feb 3, 2010 at 4:24 pm

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

    Reply
  8. Floris says:
    Feb 3, 2010 at 4:21 pm

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

    Reply
    • Todd Santoro says:
      Feb 3, 2010 at 9:27 pm

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

      Reply
  9. Tareq Hasan says:
    Feb 1, 2010 at 10:42 am

    Nice Post, thanks :)

    Reply
  10. Anything Graphic says:
    Jan 31, 2010 at 1:24 pm

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

    Reply
    • Todd Santoro says:
      Jan 31, 2010 at 2:05 pm

      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.

      Reply
      • christinebiz says:
        Nov 16, 2011 at 4:29 pm

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

        Reply
  11. Nimit Kashyap says:
    Jan 31, 2010 at 8:14 am

    This is a great tutorial.

    Reply
  12. Morten says:
    Jan 31, 2010 at 6:26 am

    Hi,

    great post, Thanks for sharing!

    Reply
  13. Anything Graphic says:
    Jan 30, 2010 at 6:10 pm

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

    Reply
    • Todd Santoro says:
      Jan 31, 2010 at 12:31 pm

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

      Reply
  14. FlameScorpion says:
    Jan 30, 2010 at 1:16 pm

    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.

    Reply
  15. David says:
    Jan 30, 2010 at 4:23 am

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

    Reply
  16. Mark says:
    Jan 30, 2010 at 4:13 am

    Another great idea and good feedback. Thanks

    Reply
  17. Indrek says:
    Jan 28, 2010 at 2:08 pm

    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!

    Reply
    • Todd Santoro says:
      Jan 28, 2010 at 3:43 pm

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

      Reply
      • Editorial Staff says:
        Jan 28, 2010 at 4:55 pm

        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.

        Reply
        • Todd Santoro says:
          Jan 28, 2010 at 5:04 pm

          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:
          Jan 29, 2010 at 2:41 am

          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:
          Feb 3, 2010 at 9:42 pm

          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:
          Feb 5, 2010 at 6:34 am

          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:
        Jan 29, 2010 at 1:35 am

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

        Reply
        • Todd Santoro says:
          Jan 29, 2010 at 1:38 am

          Indrek,

          Lets see it:)

        • Editorial Staff says:
          Jan 30, 2010 at 3:09 am

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

  18. Markus says:
    Jan 28, 2010 at 11:16 am

    nice solution :)
    but too much code

    Reply
    • Todd Santoro says:
      Jan 29, 2010 at 2:31 am

      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!

      Reply
  19. BlaineSch says:
    Jan 28, 2010 at 9:42 am

    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!

    Reply
  20. Webdesign Rosenheim says:
    Jan 28, 2010 at 9:35 am

    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/

    Reply
    • Todd Santoro says:
      Jan 28, 2010 at 5:01 pm

      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!

      Reply
  21. Tammy Hart says:
    Jan 28, 2010 at 9:33 am

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

    Reply
    • Todd Santoro says:
      Jan 29, 2010 at 2:21 am

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

      Reply
      • Tammy Hart says:
        Jan 29, 2010 at 8:53 am

        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.

        Reply
  22. Matt Reed says:
    Jan 28, 2010 at 9:17 am

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

    Reply
  23. Spencer Barfuss says:
    Jan 28, 2010 at 8:03 am

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

    Reply
    • Todd Santoro says:
      Jan 28, 2010 at 5:05 pm

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

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
All in One SEO logo
All in One SEO
Improve website SEO rankings with AIOSEO plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
AdSanity
AdSanity Coupon
Get 20% OFF on AdSanity WordPress ad management plugin.
Drip Coupon Code
Drip Coupon
Get an exclusive 14-day FREE trial of this powerful marketing automation tool.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.