Here i am with another coding tweak for your WordPress blog. I don’t want to repeat my self on how you should try to avoid using a plugin when something can be done by hand. This task, adding a featured post on your frontpage, i must admit is a bit more complicated than the others so please only follow if you are comfortable with php and the WordPress framework. If not, then the WordPress plugin directory is what you probably need. Still with me? Ok, here is what we are going to do. We are going to add a block on top of your homepage that holds a featured post. This way, the post you think deserves more attention than others won’t sink down, and it will be up there for as long as you want, plus, it will be rendered a bit specially to darg some more attention to it.

To do that we are going to use the custom fields for a WordPress post. To define a post as “featured” you will need to add a custom field named “featured” with a value of “1”. If more than one posts have this field defined then the most recent one will be displayed. After you have defined the custom field on the post you want displayed as a featured one, we are going to need to edit two files on your theme. The “index.php” and the “style.css” files. Please note that in some themes instead of the index file there is another one called “home.php” that does the job. Check your theme to see which one applies. Open the php file with the text editor of your choice and locate the place in there that looks something like this:

<?php if (have_posts()) : while (have_posts()) : the_post();?>

This segment might me slightly different but, in most cases, this is what it looks like. What happens here is that the so called “Loop” starts and the posts for the page are rendered. Just above that, is where you want to place that featured post block. To do that you need to do three things. One is create a small php function that actually retrieves it from the database. Secondly you need to add a div block that will render it. Finally, you need to add the styling on the css file. So, let’s take them one by one. Below is the function you are going to need. What i have done is add it on the end of my home.php file in the theme. That is semantically wrong, since adding a something there that actually adds some more functionality is plain wrong. The best way to do it would be do add it in a file of functions somewhere in your includes directory. Since i am just bored to figure out how i added it there. Feel free to do it better 🙂 Here it goes:

<?php
function get_featured_post(){
	global $wpdb;
	$query = "SELECT wposts.*
				FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
				WHERE wposts.ID = wpostmeta.post_id
				AND wpostmeta.meta_key = 'featured'
				AND wpostmeta.meta_value = '1'
				AND wposts.post_status = 'publish'
				AND wposts.post_type = 'post'
				ORDER BY wposts.post_date DESC LIMIT 1";
	$results = $wpdb->get_results($query, OBJECT);
	return $results[0];
}
?>

All you need to do is copy paste this on the end of the index.php file. What happens here is that i make a joined select on the posts and meta data tables where the key is “featured” ordered by date. Then i return the first row from the list. Please note that the “Limit 1” actually returns only one result but still, on the “$results” variable, there is a table, with only one row ofcourse. That’s why i return the object in place 0.

On the rendering process, above the code line you located before, please add the following lines:

<?php
$featured = get_featured_post();
if($featured){ ?>
<div class="featured">
	<h1><a href="<?=bloginfo('url');?>/<?=$featured->post_name?>"><?=$featured->post_title;?></a></h1>
	<?=substr($featured->post_content, 0, 500);?> [...]
</div>
<?php }?>

UPDATE: Please check out this post for a small correction to the above code.

This is the segment that creates the div block that contains the featured post. There are a few notes i’d like to make:

1. The content of the featured post are trimmed to the first 500 characters. If you need to lower or increase this number locate it on line 6 and change it to what you like. If you don’t want the post trimmed at all then remove the call to the function substr.
2. The permalink to the post is a bit strange. It does not have any month, year etc it is just your blog URL and after that the slug of the post. Even if you have another format (with dates and stuff) this thing does work. If you don’t have this feature enabled on your settings and you access your posts with the “p” parameter then you should change the above code to something like this:

<?php
$featured = get_featured_post();
if($featured){ ?>
<div class="featured">
	<h1><a href="<?=$featured->guid?>"><?=$featured->post_title;?></a></h1>
	<?=substr($featured->post_content, 0, 500);?> [...]
</div>
<?php }?>

This way you eliminate the pretty links and do it plainly with the “p” parameter.

Finally, what you need to do is add some styling to your featured post. Here is what you need to add on your “style.css” file:

div.featured {
	border: 1px double #dddddd;
	background: #ffffcc;
	margin: 10px 0px;
	padding: 10px 5px;
	background-image: url(url_to_your_featured_badge);
	background-repeat: no-repeat;
	background-position: top right;
}
div.featured  h1{
	margin-bottom: 5px;
}

As you can see, i have a small “badge” behind the post on the top right corner. You can create your’s, upload it on your site and update the “background-image” parameter on your css. That’s it! You can keep any post you want as a featured one on top of all of the others.

If you try it and are not able to do it, or if you don’t feel up to it, then do not hesitate to contact me. If there is any problem please leave a comment.