Line25

How To Display a Message on Old WordPress Posts

Read the full post

If you post helpful information on your blog chances are some of your early posts are now outdated as technologies have changed over the years. Let’s take a look at how we can add a mix of PHP tags to our WordPress themes to automatically add a small disclaimer or warning message to posts over X years old.

The little snippets of code we’re going to add to our theme will allow us to display a message above our post content, but only on posts over a number of years old. We might only want to display this message on certain types of posts, in my case it’s only my tutorials that have become outdated, so we’ll also add a category filter to target only old posts from a particular section of the blog.

The WordPress PHP code

<?php
$post_age = date('Y') - get_the_time('Y');
if($post_age > 2 && in_category('4') ) { ?>

<div class="old-post">
<p><strong>This post was originally published in <?php the_time('Y'); ?></strong><br />
The tips and techniques explained may be outdated.</p>
</div>

<?php } ?>

I’m no PHP expert so I had to do a little Google researching to actually figure this out. I stumbled over Horacio Bella’s Forrst post that provides the basic syntax, I then did a little modification to suit my own requirements.
The first line of code takes today’s year and minuses the year the post was published, which gives the post’s age in the $post_age variable. The script then checks if the post age is over 2 years old and is in category ID 4. You could change this filter using many of the WordPress Conditional Tags.
A line of simple HTML fleshes out a message to the user, explaining that the post is a few years old and therefore the content may be outdated. We can use the WordPress <?php the_time('Y'); ?> tag to automatically enter the year the post was published.
Paste this code into your single.php template file above the <?php the_content(); ?> tag.

The CSS styling

Once the code is in place in the template file and the unformatted message is appearing on the correct posts, it can then be styled up with CSS.

.old-post {
	margin: 0 0 20px 0; padding: 15px 20px; 
	background: #e9e9eb url(images/grey-bg.png);
}
	.old-post p {
		background: url(images/warning.png) left no-repeat; padding: 0 0 0 65px;
		color: #717171;
	}

The old-post div is styled up with a textured grey background and plenty of padding around the edges. A warning icon is then added as a CSS background image on the paragraph element and the text indented with some left padding.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

22 Comments

  1. Claude Meri says:

    I found this very useful because it always happen.

    Keep the good work …

  2. Nice idea and helpful for those finding posts through internet searches (which is probably where most traffic comes from)

  3. Nice simple solution for a common problem.

    I also use this to disable comments for older posts – http://bit.ly/wvUFFb

  4. Marco says:

    Hello Chris,

    Always wondered that. If you love WordPress why not plunge in to PHP?

  5. Gareth says:

    WordPress is a little bit over-rated!

  6. Swamykant says:

    Thanks for sharing that piece of code.

  7. Nicely describe Thats one can easily understand………bravo

  8. Webdesign says:

    Nice simple solution, Thank you!

  9. Thanks for sharing this! Very helpful! :)

  10. This is a very interesting article and very useful.

    Look forward to more articles in the future.

  11. Wordpress 98 says:

    Hi , i visit your website now its very great! this post is intresting but not enough usefull

    but
    tnx

  12. Bravo! Thank you so much for sharing this great tip on displaying message on old WordPress posts! Looking forward to read more articles like this one.

  13. Dave Sparks says:

    Nice little post, something I'd certainly recommend doing. I implemented this on my own site on my last redesign.

  14. Ithi says:

    Thank You Chris! Looking forward for more little snipets like these :) Useful thing is to inform that some posts may be out of date.

  15. Elke Hinze says:

    Awesome tutorial! Thanks for this. I wish more blogs would do this. Often I find myself looking things on the Internet for design ideas or tricks for programming and will come across something that is incredibly outdated or not useful anymore.

Sorry, comments are now closed