How to show off your old posts

by Kean Richmond
Bronco - Digital Marketing Agency

Back in October we launched yet another design for Dave's site, pushing out some HTML5 and CSS3 goodness. But as can usually occur, something happened that we didn't account for. By dropping the year from the date within the posts we had an increased number of comments on those older posts. Although it didn't necessarily break the site we thought it best to implement a solution.

The Solution

As you may have already seen on the site we have the following appearing above the content on any post older than one year.

Image of what we output in old posts

Rather than mess around with anything already designed and implemented we came up with a solution that is more visual in showing when a post is old or not, along with a friendly message to go along with it.

The Code

Here's the point of this post, some people have mentioned to Dave that they like the idea so we're going to put the code here for everyone to use, not that it was protected before. As you may be able to tell the code is written in JavaScript (more specifically jQuery) so is code anyone could have access to anyway, but why make people go hunting when we can make their lives a little easier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if($('#single').length > 0){
	var postdate = $('#single article time').attr('datetime');
	var postdatesplit = postdate.split("-");
	var year = postdatesplit[0];
	var month = postdatesplit[1];
	var day = postdatesplit[2];
	var today = new Date();
	var one_day=1000*60*60*24;
	var olddate = new Date();
	olddate.setFullYear(year,month-1,day);
	var datediff = Math.ceil((today.getTime() - olddate.getTime())/(one_day));
 
	if(datediff > 365){
		$('.entry').prepend('<div id="old"><h6>Old</h6><p>This post was written in '+year+' and is '+datediff+' days old, so is a bit old now.</p><p>Feel free to read and comment on this post, just remember some things change with time and the facts in this post might not be accurate anymore.</p></div>');
	}
}
1
2
3
4
5
6
<body id="single">
	<article>
		<time datetime="2011-02-09"><span>9</span> Feb</time>
		<div class="entry"></div>
	</article>
</body>

Using Time

As we built Dave's site trying to use as much HTML5 as we felt we could safely use we plumped for using the new <time> tag wherever we were specifying a date. What this tag does is provide us the ability to show a date in the format we require whilst including in the ‘datetime’ attribute a date that is machine readable, in the format YYYY-MM-DD. You can also include hours, minutes and seconds if you wish.

Using the time tag also works great as it gives us a defined date format in which to work with, but not everyone is rocking HTML5 yet so you can easily change the html to this:

1
2
3
4
5
6
<body id="single">
	<div class="post">
<div class="time" title="2011-02-09"><span>9</span> Feb</div>
<div class="entry"></div>
	</div>
</body>

and the JavaScript to this:

1
var postdate = $('#single .post .time').attr('title');

Where you put the id of single doesn't matter so much but it has to appear only on pages that show only a single post, not multiple posts.

Why JavaScript?

We could implement the solution in what would be a simpler form by using server-side code like PHP, but as you will know this then makes this content indexable to Google (read search engines in general). As this content is of no relevance to Google and we don't want it appearing in any descriptions on Google we use JavaScript instead.

There you go

That's it, feel free to go and use the code on your site, improve it where you can and also ask if you have any queries.

If you do use it then please add a comment below with a link, it would be great to see how you use it.

Bronco - Digital Marketing Agency
Making your inbox more interesting
Looking to keep up to date, or find out those things we can’t mention on the blog? Then sign up to our semi-regular newsletter. Don’t worry, we won’t spam you.

8 Comments

Get in Touch

Things are better when they’re made simpler. That’s why the David Naylor blog is now just that; a blog. No sales pages, no contact form - just interesting* info about SEO.

If you’d like to find out more about the Digital Marketing services we do provide then head over to Bronco (our main company website) to get in touch.

Get in Touch Today * Interestingness not guaranteed
Part of the Bronco family