One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.
As you can see, this “shield” shows the day, the month, and the number of comments. This article will show you exactly how to get that effect!
First of all, I’m using the calendar icons made by Marek Sotak. I’ve also built upon his idea to have specific images for each month, so you don’t have to put the month into the image with text, allowing for a nicer layout of the calendar icon.
We’ll begin by creating a calendar icon like this:
<p class="date month8">18</p>
With the following CSS:
p.date {
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}
That makes the date box, now we’ll need a line for each of the 12 months:
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
Having done that, the image will render like this:
Now as you’ve noticed, the HTML code this far was quite simple, the way Marek put it together, but it’s not very accessible. Though it makes perfect sense if you have a CSS enabled browser, it doesn’t make that much sense if you don’t. So we’ll change it to this:
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
And we’ll add this to the CSS:
p.date span { display: none; }
Adding in the comment bubble
Now we’ll get into the spicy part: adding a bubble with the number of comments in it. To properly do that, we’ll need a bounding box around the date, which we’ll call “shield”, and we’ll add a div called commentscloud. It’ll look like this:
<div class="shield">
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
<div class="commentscloud">5</div>
</div>
All we’ll do with the shield div, is give it position: relative;, so we can use position: absolute; on the commentscloud. The full CSS looks like this:
.shield {
position: relative;
}
.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}
Which renders into this:
Implementing this in WordPress
The CSS is easy: just add it to your theme’s style.css. For the HTML, you’ll have to open up the appropriate page of your theme, for instance index.php, and look for the_post(). You’ll have to add the following code where you need the badge to be displayed:
<div class="shield">
<p class="date month<?php the_time('n'); ?>">
<span><?php the_time('F'); ?></span>
<?php the_time('j'); ?>
<span><?php the_time('S'); ?></span>
</p>
<div class="commentscloud">
<?php comments_number('0', '1', '%'); ?>
</div>
</div>
This way it should work out fine. For an example of how this looks, check my site: Yoast – Tweaking Websites.
This post has been a guest post written by:
Joost (pronounced Yoast, hence his domain name) de Valk is a well known WordPress Plugins author and online marketeer. His blog covers all things WordPress, SEO, and online marketing in general, and next to that he runs a weekly WordPress Newsletter.
As I am just starting to self host my own blog “it’s not live yet” this is very cool. I have been looking for ways to pimp it out. Thanks.
This is a very nice idea and looks great.
Nice technique. Two things I’d add:
1 Calling 12 separate images causes a slight performance hit. I’d make one large sprite image and use CSS to shift it’s background position.
2 Some kind of PNG fix will be required if you want this to work in IE6.
I recently created something like this, but mimicking the Apple iCal icon, and using css sprites (@Peter)
Largely a proof of concept, so not thoroughly tested, but it appears to be pretty solid.
Example here
Very nice concept. I have been redesigning my site and was trying to come up with a good way of showing the date and comments. You gave me a great idea!! Thanks :)
Wow thanks Chris, just yesturday I was saying to my friend “man, i wish I knew how chris did those date badges on his personal site!”
Thanks for this but if you are going to use an image in your example it would be nice if you make it available on your post or leave a pointer. I can’t find the comment bubble png.
Since this is about exactly what Joost is using on his own personal site, I’m sure he wouldn’t mind you snagging that from here:
http://yoast.com/wp-content/themes/yoast/images/bubble2.png
@Luke: I really like what you did there. Very readable and clean.
Not spending a lot of time on the CSS, looks like it should work in IE7+, Safari, FF.
Are you going to package it up and post about it on your blog?
@Peter: I chose not to sprite it since on most pages only 1 or 2 months will be displayed. You’re right about the pngfix :)
Nice! I like Luke’s version too.
Only I do not understand why there is no year in de icon, maybe at the bottom. I personally like to see the year, more and more blogs are running for years, and posts are found by a search engine. If you click on the the result, you want to know how actual the post is.
But that’s just me :), nice icon
I like the idea of combining comments with the date badge but what happens when you get 1000+ comments? Obviously this design is just for the tutorial, but it’s a factor to consider for a live site!
@Paul I’d LOVE to have that problem :P
@Joost
The reason you’d use a sprite despite the limited repetition on a page is for the reduced http traffic from your page and to your servers. The one image is cached (so long as it’s served with appropriate headers), so first time visitors will suffer only one request rather than, say two or three, and returning visitors won’t even suffer that one. Additionally, if you use a search results page that includes the calendar graphic(s), the page could request up to twelve images depending on how many results you display per page.
In your case, adding the month labels into a sprite would result in negligible image size increase. Even possibly less than the data weight associated with the network io for one additional month graphic. For something like my iCal example, the size delta is more of a concern because the sprite includes the days as well, so the file size increased by ~3x. However, even this isn’t so bad in the face of the reduced http traffic and the reality of the fact that the file size is still pretty darn small.
Granted there is also added css to manage the sprite, but again, limited byte weight and cached. Worth considering, anyway.
Good post and thanks for sharing!
Nice — though could be optimized a little more as others have pointed out above. I also think you could do it without the inner paragraph — just center align the date inside the shield div, and then realign the comments cloud relative to that. You could also just have the comments cloud bubble image as part of the calendar image.
Also I think making duplicate images for all the months is wrong — it just doesn’t feel right — I think simple text aligned on top of the image should suffice. Sure, it will not look right if people resize their text, but neither will the other numbers :)
But I’m just nitpicking! This is great stuff and more sites should definitely use this sort of thing to display their date and comments info concisely.
@Joost me too :/
haha
very easy to implement in my theme thanks! it’s what it was missing
Thats amazing. I resigned my site a few months ago and came up with a similar solution: http://www.gilbertpellegrom.co.uk. I think its a really nice effect.
Nice article. It was very helpful for me. It is very nice.
print("code sample");
great article good advice will give try
awesome
i like it, thanx
Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.
Great for not just blogs. This will come in handy for some of my other websites… Cheers mate
An interesting take, especially given the proliferation of WordPress.
I’ve just joined this site and it looks great.