WordPress

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];
?>
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *