Code, Themes

Simple Featured Image Function for your WordPress theme!

Photo of a really cool animal

Many times in theme development when we want to include a featured image we may just include the post thumbnail function like this example taken from the codex:

<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail();
} 
?>
<?php the_content(); ?>

This may be fine. But what if you want to include the featured image in various places in your theme with different attributes such as image size? You could paste this function like this the_post_thumbnail('large'); but you also want to check if the post or page has a featured image in which you would paste the code above with the if statement has_post_thumbnail() as shown above.

It may be easier to include a function in your functions.php file that runs this check for you so all you have to do is call one function in your theme code. Here is a way I like to do it:

/**
* Featured Image function for posts and pages
* 
* @param  string $class The CSS class name to apply to the image default is .featured-img
* @param  string $size  The image size to use. Default is full size
* @return string        img -> width | height | src | class | alt
* 
*/
function the_featured_image( $size = 'full', $class = 'featured-img' ) {

	global $post;

	if ( has_post_thumbnail( $post->ID ) ) {

	/* get the title attribute of the post or page 
	 * and apply it to the alt tag of the image if the alt tag is empty
	 */
	$attachment_id = get_post_thumbnail_id( $post->ID );

	if ( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) === '' ) {
		// if no alt attribute is filled out then echo "Featured Image of article: Article Name"
		$title = the_title_attribute( 
			array( 
				'before' => __( 'Featured image of article: ', 'YOUR-THEME-TEXTDOMAIN' ), 
				'echo' => false
			) 
		);
	} else {
		// the post thumbnail img alt tag
		$title = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
	}

	$default_attr = array(
		'class' => $class,
		'alt' => $title,
	);

	// echo the featured image
	the_post_thumbnail( $size, $default_attr );

	} // end if has_post_thumbnail
}

So this does a couple of things.

  • It checks to see whether the post has a featured image.
  • If no alt tag has been assigned in the image meta it will add: Featured Image of article: The Title of the Post
  • If there is an alt tag it will use that.
  • There are two parameters – one is the image size which defaults to ‘full’. The other param is the class name for the image. You may want this if you are trying to manipulate the image in any way with CSS.

So now to include the featured image in your theme all you have to do is paste one of the functions in your theme like so:

<?php // the featured image with default settings
	the_featured_image(); 
?>

<?php // Featured image with a size of medium and a class name of post-thumbnail
	the_featured_image( 'medium', 'post-thumbnail' ); 
?>

Again this is the way I like to do it. Have a featured image function that you like? Let me know.