Add Link Around Wordpress Post Featured Image

Since Wordpress version 3.0 it added a feature that will allow you to add featured images to your Wordpress posts. This can easily by done by using the set featured image link on the right of the post content box. This link will open a box where you have the choice of uploading a new image, use an image from a URL or add a previous image. Once a image is added it can be used whenever the post is called such as on the list of posts.

#Add Post Featured Image

To turn on Theme thumbnail support you need to use the following snippet in your theme functions.php file.

add_theme_support( 'post-thumbnails' );

Wordpress has a built-in function you can call from the post loop to display the featured image.

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

But this will just display the image and will not link to the post. If you display the image for the post you want it to link to the post as well. But if you are going to do this everything you display this image you don't want to add the link every time too. Therefore you can add a filter to this function that will add a link around the image.

#Display Post Thumbnail In Multiple Sizes

To display the featured image in different sizes you can pass different parameters to the post thumbnail function.

#Post Thumbnail Size

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)

#Post Medium Size

the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)

#Post Large Size

the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)

#Post Other Sizes

the_post_thumbnail( array(100,100) );  // Other resolutions

#Add Link Around Featured Image

The below code snippet should be added to the functions.php page. It will take the original image and wrap this around a link.

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {

  $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
  return $html;

}

#Get The Thumbnail Image URL

If you want to get the current post thumbnail image URL then add the following in the loop of your post. You will need to be able to get access to the post thumbnail URL.

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id);
$image_url = $image_url[0];
?>