For a long time now a thing that troubles many webmasters puzzled me too. I have a few articles that bring in what you would call “instant visitors”, meaning visitors that get what they want and they are out of here. Those come either from search engines or bookmarking sites (digg, stumbleupon etc). I was surprised to see that when querying for “file not accessible bin”, which is a common problem when trying to mount a bin image in daemon tools, brings this blog first on the list. I can see through the stats that i get quite some traffic from a few posts like that but i hardly get even a comment.

Now the suggestion from all bloggers is “try to lure that reader in”. Others suggest poping up a window with a subscribe or something. Others suggest to put on a “if you like this post subscribe to my feed” etc. What i wanted is actually grab the visitors attention when he first comes in. If he gets the info he wants your blog tab will be closed in a glimpse of an eye.

I had my eyes open for a plugin or something out there suggesting something remotely close to this but no luck so far. I was too lazy to code a plugin myself. The other day i was thinking about it and it came to me. I can use custom fields to do that! So here is what i came up with…

So i guess you have seen that part on the “write” section where it says “custom fields”. But here is what they are. Actually, they are extra attributes that can be added to your post. Just anything you want it to be! For instance, the series plugin uses them for adding a post into a series. The “featured” article plugin uses them to decide which articles are “featured”. But how can you use them? Simple. You don’t need no plugin no nothing. What you do is define a “key” and a “value”. Imagine this example. You want to add your mood, when writing your post, into your post. For that, you can create a key called “mood”. In each post you can add the key “mood” and a value like “happy”, “bored” etc.

So, all i wanted is to characterize a post as “hot” and if so then add a few relative categories that the user might be interested to. If a post is hot i want to add a box on top of the post, before the title. A message will be in there, pointing the user to the relavtive categories i set. Using custom fields i could add key/value pairs like “rel_cat” -> “7” (7 beeing the category “Misc”), “rel_cat” -> “10” (10 beeing the category “Tutorials”) etc. Then it’s the theme’s turn.

In the presentation part, except for the box on the post, i want to add a “(Hot!)” small text near the title. Let’s start from there. I opened my index.php file and i modified this line:

<span class="titles"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></span>

which is actually the line that displays the title of the post to this:

<span class="titles"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?><?php if(get_post_meta($post->ID, 'hot', true) == '1'){echo '<span style="color: #ff0000; font-size: 50%;"> (Hot!)</span>';}?></a></span>

As you can see i added a small php frag that handles the “hot” field. The most important thing to notice is this function: “get_post_meta($post, $tag_key, $single)”. This function, for a given post ($post), brings the value of the key ($tag_key). In the above, i bring back the value of the key “hot” and if there is one and it’s “1” then the post is hot and i should display the “hot” tag. When a user visits the post i want to add the box i was talking about. You can see an example here. Basicaly, what i want to do is:

• Check out if the post is hot and if so, start rendering the box.
• Bring back all the “rel_cat” associations.
• With the category id’s that i’ll get from the associations i want to do two things: 1) get the category title so i can make it human readable and 2) get the permalink to the category so i can link to it.
• Render the box.
• Finally, add the css styling.

Here i will show you my single.php file (which is the one in charge for single post rendering) and the css rules i created.

On the file single.php, before the title, i added this code snippet:

<?php if(get_post_meta($post->ID, 'hot', true) == '1'){ ?>
	<div class="hot_notify">
		This post is what i call a "<b>hot</b>" one. Actually this is a post that brings alot of traffic from a search engine.
		Playing oracle i bet you landed here from a search engine yourself (google, yahoo etc). But, hey! My blog is full of
		posts like these! Check out the related articles on the bottom and also i think you might be interested in articles from the following categories:
		<?php $rel_cats = get_post_meta($post->ID, 'rel_cat', false);
			  if(count($rel_cats) != 0){?>
				  <ul class="hot_rel_cat">
				  <?php foreach($rel_cats as $rel_cat){?>
						<li><a href="<?php echo get_category_link($rel_cat);?>" alt="Category link">
							<?php echo get_the_category_by_id($rel_cat);?>
						</a></li>
				  <?php } ?>
				  </ul>
				<?php } ?>
		Finally, i would really appreciate if you leave a comment provided that you find this post usefull to you...
	</div>
<?php } ?>

Take a minute and look at the code. Nothing fancy here. I check to see if it’s hot. If so, i start the box, adding a text and listing the categories. Simple huh?

Now on the css we have these:

div.hot_notify {
	border: 1px dashed #a1a1a1;
	background-color: #eeeeee;
	margin-top: 20px;
	min-height: 100px;
	background-image: url(images/alert.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 5px 5px 5px 55px;
	font-style: italic;
}
div.hot_notify img {
	margin-right: 5px;
}
ul.hot_rel_cat {
	list-style-image: none;
	line-height: 1.5em;
	list-style-position: inside;
}
ul.hot_rel_cat li {
	font-size: 105%;
	font-weight: bold;
}

Now, all the above are always left open for tweaking according to your needs. I really wish this one helps you lure your visitors a bit deeper. I will start monitoring how it goes for me and maybe post the results for you guys. In the meantime, any suggestions/fixes etc are always welcome!