WordPress: Adding Featured Image support to your theme

[13 May 2011 | By | 2 Comment(s) | 3,806 views ]

As a followup to yesterday’s post on making the correct images show up on Facebook, here’s some more information about adding the recent WordPress Featured Image functionality to your wordpress theme.

If your WordPress theme came out prior to 2.9 or 3.0, it won’t have support for the Featured Image functionality.

To enable the functionality, you need to add this line to your functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

Once you do this, you’ll see “Use as Featured Image” next to the Insert Into Post button. (You’ll also see a Featured Image box under the Post Tags box on the right side of the Edit Post page)

If you’re just trying to fix the Facebook issues we talked about yesterday, and you’re using the plugin I suggested, this is really all you need to do to set a specific image to come up on Facebook.

However, this Featured Image won’t do anything else for you, unless you implement ‘featured image’ functionality elsewhere in your theme.

The following is for those who aren’t afraid of messing with their theme files:

So if you want to actually USE the featured image, as say a thumbnail for your for your posts on your archive pages, or something like that, you’ll have to make a few more changes to your theme.

If you want to add thumbnails to your posts.

Let’s say you aren’t using any sort of thumbnailing functionality right now.  On your category page, you just show an excerpt.  If you want to add your thumbnail sized image to display next to the excerpt, add this to your category.php file right above where you see <?php the_excerpt(); ?>:

<?php if(has_post_thumbnail()) { ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<?php } else { ?>
<?php } ?>

This basically says “If the post has a Featured Image set, then show it in the thumbnail size (and have it link back to the full post)” .  If not, don’t do anything (I left the ‘else’ in there in case you wanted to do something different if it wasn’t set)

If the image display looks odd, you can fix it with css.  In your style.css file, you can set the styling for the thumbnail with something like this .

.thumb {
float: left; padding-bottom: 5px;
padding-right: 10px; padding-top: 0;
}

If you already  have some sort of thumbnailing functionality, and you want to use the featured image when it’s set:

Look for where you are displaying the image next to the post.  You’ll want to tell the file to look and see if a featured image is set, and if it is, display that.  Otherwise display the image using whatever method you were using prior (unless you want to go set the featured image on every past blog post, which wouldn’t want to do).

<?php if(has_post_thumbnail()) {      ?>
<div>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<?php } else { ?>
whatever you were doing before
<?php } ?>
Example:
<div class="entry-summary">
<?php if(has_post_thumbnail()) {      ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<?php } else { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="thumb"><a href="<?php the_permalink(); ?>">
<?php get_attachment_image($post->ID, 'thumbnail', 'alt="' .
$post->post_title . '"'); ?></a></div>
<?php } ?>
 <?php the_advanced_excerpt(); ?>
</div><!-- .entry-summary -->

where green text = the new text that was added

There is tons more you can do with featured image functionality. You can set up custom sizes to use other than the standard thumbnail, medium, and large, for example. But this is a good start.

This entry was posted in Tutorials/Tips, website design and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. 3,806 views

2 Comment(s) »

  • Nico Berrios [] (elsewhere) discussed this :

    RT @dotatdabbled: WordPress: Adding Featured Image support to your theme http://t.co/qK2aNDsj

  • Create WordPress Post Thumbnail | WordPress Tinker [] :

    […] good reference can be found on Dabbled.org. Voila, now you can use that extra function residing on your WordPress […]