{"id":77151,"date":"2012-05-01T11:00:33","date_gmt":"2012-05-01T15:00:33","guid":{"rendered":"http:\/\/wpmu.org\/?p=77151"},"modified":"2013-09-08T18:28:38","modified_gmt":"2013-09-08T22:28:38","slug":"how-to-use-date-icons-to-spice-up-your-wordpress-theme-make-it-unique","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-use-date-icons-to-spice-up-your-wordpress-theme-make-it-unique\/","title":{"rendered":"How to Use Date Icons to Spice Up Your WordPress Theme & Make it Unique"},"content":{"rendered":"

\"Post<\/a>
\nUnless you\u2019re a designer, there\u2019s a good chance you didn\u2019t 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.<\/p>\n

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

 <\/p>\n

Date Icons<\/strong><\/h2>\n

In this tutorial, we\u2019re going to go over how you can add date icons to your site to spice up your theme. We\u2019re going to be setting up a theme to show a date icon that looks like this \u2026<\/p>\n

\"Post<\/a><\/p>\n

 <\/p>\n

Upload Your Date Icon Background<\/strong><\/h2>\n

The way this trick works is that it prints the month and the date on top of an image that\u2019s set as a background, and so the first thing you\u2019ll 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\u2019ll go over where to find background images at the end of the post.)<\/p>\n

This is what my date icon background looks like without the month and date printed on it \u2026<\/p>\n

\"Post<\/a> <\/p>\n

 <\/p>\n

Get the URL for the Image<\/strong><\/h2>\n

Once your background image is uploaded to your site, you\u2019ll need to find the URL for it. You\u2019ll need this for later.<\/p>\n

You can find the URL by clicking on the \u201cEdit\u201d link that appears when you hover over the icon in your media library.<\/p>\n

\"Post<\/a><\/p>\n

 <\/p>\n

\"Post<\/a><\/p>\n\n

 <\/p>\n

Add Date Code to Your Theme<\/strong><\/h2>\n

Next you\u2019ll 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.<\/p>\n

There are a number of different ways to write the code to make this work, but we\u2019ll 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.<\/p>\n

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.).<\/p>\n

(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 \u201cfine print\u201d to also find the year.)<\/p>\n

Here\u2019s the code we\u2019ll be adding to our theme files:<\/p>\n

 <\/p>\n

<div class=\"icon-date\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h3><?php the_time('M'); ?><\/h3>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h4><?php the_time('j'); ?><\/h4>\r\n<\/div><\/pre>\n
 <\/p>\n
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.<\/p>\n
 <\/p>\n
Add Styling to Your Stylesheet<\/strong><\/h2>\n
Next you will need to add CSS code to your stylesheet to bring it all together. (Appearance > Stylesheet \u2013 style.css)<\/p>\n
Here\u2019s our styling:<\/p>\n
 <\/p>\n
.icon-date {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: #FFFFFF url(http:\/\/example.com\/wp-content\/uploads\/date2.gif);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 45px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 50px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin: 0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/pre>\n
.icon-date h3 {\r\n      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: Times New Roman, Helvetica, Sans-Serif;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: #FFFFFF;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size: 10px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-weight: bold;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 1px 0px 0px 7px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin: 0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text-transform: uppercase;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/pre>\n
.icon-date h4 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: Arial, Times New Roman, Helvetica, Sans-Serif;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: #173774;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size: 22px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-weight: bold;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 7px 4px 0px 0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin: 0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/pre>\n
 <\/p>\n\n
Get the URL for Your Background Icon<\/strong><\/h2>\n
You\u2019ll 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\u2019s this line:<\/p>\n
background: #FFFFFF url(http:\/\/example.com\/wp-content\/uploads\/date2.gif);<\/pre>\n
Of course you will need to put the URL for your own background image in that space.<\/p>\n
 <\/p>\n
Adjust Your CSS<\/strong><\/h2>\n
The CSS above works for me in my particular case, but there\u2019s 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\u2019s no real way around this. How your date prints out on your background image will depend on your image itself \u2013 the colors, the style, the size, exactly where you want the date to print, etc.<\/p>\n
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.<\/p>\n
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.<\/p>\n
 <\/p>\n
The Result<\/strong><\/h2>\n
So here\u2019s a before and after picture of the posts on my site. As mentioned before, you\u2019ll notice that I left the original date in meta data section.<\/p>\n
\"Post<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
Where to Get Calendar Background Icons<\/strong><\/h2>\n
\"Post<\/a>Of course you\u2019ll 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\u2019s content.<\/p>\n
But barring that, you can search for something along the lines of \u201ccalendar background icon\u201d on design sites that have downloadable icons or look for \u201cicon search engines\u201d and search there. You might also take a look at this post from Smashing Magazine<\/a> to help you get a start.<\/p>\n
 <\/p>\n\n
Photo: New Year\u2019s Day Calendar<\/a> from BigStock<\/p>\n","protected":false},"excerpt":{"rendered":"
This little trick can make your theme seem different from the thousands of others like it.<\/p>\n","protected":false},"author":84404,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[9748],"tutorials_categories":[],"class_list":["post-77151","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-backgrounds"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=77151"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77151\/revisions"}],"predecessor-version":[{"id":204490,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77151\/revisions\/204490"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=77151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=77151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=77151"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=77151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}