How to Use Date Icons to Spice Up Your WordPress Theme & Make it Unique

Unless you’re a designer, there’s a good chance you didn’t make your WordPress theme. Because of this, yours is going to look like thousands of others. But a few small changes here and there can really make your theme look much more unique.

Probably one of the biggest things you can do, of course, is to get a unique header. And so that’s a given. But there’s another smaller element you can change on every single page that will also make your theme seem different: the way your date is displayed.

 

Date Icons

In this tutorial, we’re going to go over how you can add date icons to your site to spice up your theme. We’re going to be setting up a theme to show a date icon that looks like this …

 

Upload Your Date Icon Background

The way this trick works is that it prints the month and the date on top of an image that’s set as a background, and so the first thing you’ll want to do is to upload your date icon background. You will want to make sure that the image is the size you want it to be on your page. (We’ll go over where to find background images at the end of the post.)

This is what my date icon background looks like without the month and date printed on it …

 

Get the URL for the Image

Once your background image is uploaded to your site, you’ll need to find the URL for it. You’ll need this for later.

You can find the URL by clicking on the “Edit” link that appears when you hover over the icon in your media library.

 

 

Add Date Code to Your Theme

Next you’ll need to add some code to the files in your theme where you want the icon to show up. If you want it to show up on the homepage (index.php), on single pages (single.php), on category pages (category.php or achives.php), etc., you will need to add this code to each of those templates.

There are a number of different ways to write the code to make this work, but we’ll just use this one way. There are also a lot of different places you could put the code depending on where you want the icon to show up on your pages. So you may want to play around with this in a few different spots on your particular theme to get it the way you want it.

For example, you may want to put the icon just to the left of the title of the post. You may want to put it under the title and to the left of your other meta data (author, category, etc.).

(Note: In this tutorial, we will NOT be including the year on the icon. Of course many people will want to have the year on their posts, so you may want to just add this date icon IN ADDITION to the original date that your theme already uses if it includes the year. In this way, a user can quickly glance at the icon and see the date and month clearly, but then if they have questions about what year it is, they can look at the “fine print” to also find the year.)

Here’s the code we’ll be adding to our theme files:

 

<div class="icon-date">
                 <h3><?php the_time('M'); ?></h3>
                 <h4><?php the_time('j'); ?></h4>
</div>

 

Again, you may need to play around with this. In this tutorial, because of the way my theme is already set up, I am choosing to put it under the title and beside the meta data. I have also decided to leave the original date stamp from my theme in the file because it contains the year in it.

 

Add Styling to Your Stylesheet

Next you will need to add CSS code to your stylesheet to bring it all together. (Appearance > Stylesheet – style.css)

Here’s our styling:

 

.icon-date {
               background: #FFFFFF url(http://example.com/wp-content/uploads/date2.gif);
               float: left;
               width: 45px;
               height: 50px;
               margin: 0px;
               padding: 0px;
               }

.icon-date h3 {
              font-family: Times New Roman, Helvetica, Sans-Serif;
              color: #FFFFFF;
              font-size: 10px;
              font-weight: bold;
              padding: 1px 0px 0px 7px;
              margin: 0px;
              text-transform: uppercase;
              }

.icon-date h4 {
               font-family: Arial, Times New Roman, Helvetica, Sans-Serif;
               color: #173774;
               font-size: 22px;
               font-weight: bold;
               padding: 7px 4px 0px 0px;
               margin: 0px;
               text-align: center;
               }

 

Get the URL for Your Background Icon

You’ll notice in the first section of the CSS code above, there is a spot for the URL of your background image. In the example above, it’s this line:

background: #FFFFFF url(http://example.com/wp-content/uploads/date2.gif);

Of course you will need to put the URL for your own background image in that space.

 

Adjust Your CSS

The CSS above works for me in my particular case, but there’s a good chance this exact code will not work for you; therefore, you will most likely need to adjust things here and there to get it looking right. Unfortunately, there’s no real way around this. How your date prints out on your background image will depend on your image itself – the colors, the style, the size, exactly where you want the date to print, etc.

So just start playing around with things. Move things left or right, up or down by playing with the padding, for example. Get the font size and color the way you like them. Change the fonts altogether if you like, etc.

Think of this code as more of a rough guide. If you look at it and play with it, you should be able to pick up the basic ideas behind it. From there you can make it your own.

 

The Result

So here’s a before and after picture of the posts on my site. As mentioned before, you’ll notice that I left the original date in meta data section.

 

 

Where to Get Calendar Background Icons

Of course you’ll need an icon to upload in the first place, so the question is where to get them. Of course you could make your own if you have some graphic skills. And in this way you could really get something unique and themed to your site’s content.

But barring that, you can search for something along the lines of “calendar background icon” on design sites that have downloadable icons or look for “icon search engines” and search there. You might also take a look at this post from Smashing Magazine to help you get a start.

 

Photo: New Year’s Day Calendar from BigStock

Tags:

• backgrounds