Easy Featured Post for WordPress

Creating a featured post section for your most recent post has quickly become one of the most widely used features for many templates.

The ScatterBrain WordPress Theme uses a featured post section in which the latest post is displayed with a large image which is attached to the post using the “Custom Fields” found when publishing a post. So let’s do a quick run through of the code so we can all understand the process.

Here is the full code for reference that is used in the ScatterBrain WordPress Theme which we will be dissecting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="latest_post">   
<?php $the_query = new WP_Query('showposts=1');
while ($the_query->have_posts()) : $the_query->the_post();?>
<h3 class="sections">Latest Story</h3>
<div class="postMeta"><span class="date"><?php the_time('m.d.y') ?></span></div>
<?php if ( get_post_meta($post->ID, 'home_image', true) ) { ?>
<div id="latest_post_image">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/latest/<?php echo get_post_meta($post->ID, "home_image", $single = true); ?>" alt="<?php bloginfo('name'); ?>: Latest post" width="470" /></a>
</div>
<?php } ?>
<h3 class="latest_post_title" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h3>
<p><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></p>
<div class="latest_post_meta">
<span class="latest_read_on">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/read.gif">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading</a></span>
<span class="latest_comments">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/comment.gif">
<?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off');?></span>
<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<span class="latest_category">Category: <a href="<?php echo get_category_link($cat->cat_ID);?>"><?php echo $cat->cat_name; ?></a></span>
</div>
</div>   
<?php endwhile; ?>

Query Your WordPress Posts:

2
3
<?php $the_query = new WP_Query('showposts=1');
while ($the_query->have_posts()) : $the_query->the_post();?>

What the above means:
Hey WordPress, for this section I want to call upon and use 1 post. Luckily for use the “1 post” will always be the latest post across all categories. If you want to show 1 post from a specific category, use (‘showposts=1&cat=11’) where cat= is the category ID of the category you wish to pull from. You can also use category_name= to name a specific category or exclude categories from this query. See the Query Posts Templates Tag WordPress Codex for a full rundown of parameters.

Section Label and Date:

4
5
<h3 class="sections">Latest Story</h3>
<div class="postMeta"><span class="date"><?php the_time('m.d.y') ?></span></div>

What the above means:
Line 4 is labeling the section. Line 5 is pulling the date of the post entry. There are several options for the format of the date and time, review the Formatting Date and Time WordPress Codex for more info.

Looking for the Image:

6
<?php if ( get_post_meta($post->ID, 'home_image', true) ) { ?>

What the above means:
Here we start our “If” statement to look for a custom field named ‘home_image’ which you set when you are writing your post. Custom fields consist of a Key and a Value, in this case our Key is ‘home_image’ and our value is our image name. For every post that is to appear in the featured area you would add a value or image name to the Key of ‘home_image’.

Setting the Image:

7
8
9
10
<div id="latest_post_image">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/latest/<?php echo get_post_meta($post->ID, "home_image", $single = true); ?>" alt="<?php bloginfo('name'); ?>: Latest post" width="470" /></a>
</div>

What the above means:
First we need to make sure to link the image to it’s post, line 8 starts the link wrap for the image as the href= will be linking to the post permalink.

Line 9 may be long but all we are doing is pulling in an image.

The first part of our image source aka img src= is pointing to a directory located within the theme called images/latest. I use this so I can just dump images to the folder via ftp but you can change this to point to your uploads folder and add images via the WordPress built in media gallery.

The second part of the img src= is naming the file in the images/latest folder. So get_post_meta($post->ID, “home_image”, $single = true); is pulling in the value you set in your Custom Field for the key of “home_image”. If your image was called home.jpg the img src from above would essentially be “Your Theme Stylesheet Directory/images/latest/’home_image'” or “Your Theme Stylesheet Directory/images/latest/home.jpg”

Post Title:

12
13
14
<h3 class="latest_post_title" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h3>

What the above means:
Again we use the_permalink() to link the title to it’s permalink while the_title() pulls in the title.

Post Excerpt:

15
<p><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></p>

What the above means:
Pull in the excerpt!

Post Meta:

16
17
18
19
20
21
22
23
24
25
<div class="latest_post_meta">
<span class="latest_read_on">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/read.gif">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading</a></span>
<span class="latest_comments">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/comment.gif">
<?php comments_popup_link('Post a comment', 'One comment', '% comments', '', 'Comments off');?></span>
<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<span class="latest_category">Category: <a href="<?php echo get_category_link($cat->cat_ID);?>"><?php echo $cat->cat_name; ?></a></span>
</div>

What the above means:
This is the code for the bottom area which contains the Continue Reading Link, Number of Comments and displays what Category the post came from. The first two sections have an image followed by a text link. Each section is wrapped with a span class such as latest_read_on, latest_comments and latest_category.

If all goes well, and with some CSS you will end up with an image, title, excerpt and read more, comment and category:

I tried to keep it short on the areas which were a little more self explanatory but if there’s any questions feel free to ask. Overall line 2 is where the magic happens in which you’re telling WordPress where to look at how many posts to pull for your section. Line 6 is where you tell WordPress to look for your custom Key while line 9 is where you swap your Key for a Value.

About Gabe Diaz

Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.

27. September 2008 by Gabe Diaz
Categories: Blog | Tags: | 13 comments

Comments (13)

  1. Awesome,

    very neat. Thanks for all this work, this theme is very cool.
    One question: You said that you used the stylesheet dir for storing the home_image, but I want to use the WordPress built in media gallery. The problem is that the image folder names contains the year/month format. Since the image path will always change for each post, how can I get this the right way?

    many thanks

  2. @Gustavo Leig

    Hi Gustavo, great question. See the section above labeled “Setting the Image”
    Line 9 sets the img src to a specific directory. To use the built in WordPress media gallery uploader you would specify the path to the “uploads” folder.

    Quickest way would be to use:

    <img src="http://yoursite.com/wp-content/uploads/<?php echo get_post_meta($post->ID, "thumb_home_img", $single = true); ?>

    Then for your custom key you would have to use the year/month/filename:
    2008/10/filename.jpg

    Let me know if this is clear and/or works for you. If not I can do a more formal writeup!

  3. Thanks mate! Very well explained.

  4. Very informative Post! I’m having a similar problem where my current (new) theme has a featured post section but once someone comments, the post is duplicated in the main body section where all the other posts are. I’m no coder so I’m not sure how I would adjust this according to what you laid out in your post.

    Here’s a snippet of my posts code if that helps:

    <img src="ID, "featured", true); ?&gt;" alt="" />
    <a href="" rel="nofollow">continue reading</a>
  5. K sorry – didn’t use the right symbol to input code.

  6. I checkout your main page and see what is going on, but it’s hard to give any fixes without seeing your actual file.

    Most likely your blog is setup to show a “Featured” category up top and then all the other blog posts below. If that’s the case you can just eliminate the “Featured” category from showing up on the bottom list by manually telling your loop to ignore your “Featured” category.

    query_posts('cat=-3');

    So editing your query with the above code would eliminate all posts from category 3 from showing up in the loop.

    BTW backup your file before playing around with any code ๐Ÿ™‚ !!

  7. @gabediaz

    Appreciate the quick reply back!

    That’s exactly how the featured section is setup and I changed that bit of code but didn’t change a thing?

  8. how about ScatterBrain wordpress theme for 2.7? i have some problems with it

    • @Traceur

      Traceur,

      I tested out the theme with a fresh install of 2.7. I saw an error with the sidebar that was never an issue with 2.6. I edited the files and replaced the .zip with the new version. This new version has been tested to work with 2.5-2.7, if you come across anything else please don’t hesitate to get in touch or list the errors that you had.

  9. Thank you for great post!

  10. Royal Takeaway Clayton

    I have been reading your articles during my lunch break, and I have to admit the whole article has been very valuable and very well written.I also found a lot of stuff in your pages especially itโ€™s discussion.I think I will come back soon.

Trackbacks/Pingbacks

  1. Make your own Wordpress Theme. Anyone can do it, really! | r_shahin : a different life blog
  2. 3 Reasons Why You Should Use Featured Post Section on Your Blog | Best Wordpress Themes, Blogspot Templates and Make Money Online @ BLogicThink [dot] com

Leave a Reply to gabediaz Cancel reply

Required fields are marked *