After recently redesigning Robot Forest Photography and having a fancy little “New” badge appear every time a new photo is posted it got me thinking how that worked. I went ahead and dissected the theme in order to find how this was being done.
It actually is quite simple to do, you’ll just need to add a few things to your Wordpress theme. The first thing you need to do is add a function to your Theme Functions PHP file, and it goes a little something like this:

function new_badge(){
if ( (time()-get_the_time(’U')) <= (3*86400) ) { // The number 3 is how many days to keep posts marked as new
echo ‘<div class=”new”></div>’;
}
}

Copy and paste that code somewhere in your functions.php file, and you’re almost there. The code will allow you to change how many days a post stays marked as “New” with your badge. Now that you’ve defined the function (and called it “new_badge”, but you can change that if you want, just make sure to change it when you call the function later on), we have two things left to do. You’ll notice that at the end of the code is a div class called “new.” This brings us to the next part, which is adding the proper CSS code. Open your style.css file and add this:

.new {
display: block;
position: absolute;
margin-left: 100px;
margin-top: -3px;
width: 50px;
height: 50px;
background: url(’images/NEWBADGE.gif’) no-repeat top left;
z-index: 100
}

You’ll need to make or find a badge you want to use, name it “newbadge.gif” and upload it to your images folder. What this CSS is doing is placing the badge right where you want it. So you’ll have to tweak this to work for you. Basically, the margin left and top place the badge where you want, and the width and height refers to the size of your badge.

You’re almost done! All you have left to do is actually call the function in your index.php file. Open that up and paste this small line of code where you want your badge to appear. This will most likely go somewhere inside your “posts” loop.

<?php new_badge() ?>

You’re done! To see a functioning demo, head on over to Robot Forest Photography. If there aren’t any “New” badges on any of the photos, that’s because nothing has been posted within three days of you reading this.

Let me know if you have any questions.

Related Posts
1. Use PHP To Count Your New Wordpress Posts
2. Automatically Add Images To Wordpress Posts
3. Add Quote Boxes To Show Off Quotes In Wordpress
4. Convert Your PSDs Into Wordpress Themes
5. Wordpress Theme ‘Gallery’ Blows Everyone Away

Tags: CSS, Wordpress