WordPress add link to Featured Image

This is snippet that we’ve used for ages on our site so I thought I’d share it with you. What it enables you to do is add an external link to the featured image on the main post page. This is particularly useful for linking to client websites, affiliate links or any manner of URLs where linking out to an alternate URL is desirable.

WordPress add External link to Featured Image

Updated for Custom Fields with Gutenburg WordPress 5.0 (see step 2 on how to enable Custom Fields for Gutenburg)

Just 3 steps

1. Add the following WordPress snippet to your WordPress Theme functions.php file
   

   	// Add External Link to Featured Image with Custom Field
   	add_filter('post_thumbnail_html','add_external_link_on_page_post_thumbnail',10);
   	function add_external_link_on_page_post_thumbnail( $html ) {
   	if( is_singular() ) {
   	global $post;
   	$name = get_post_meta($post->ID, 'ExternalUrl', true);
   	if( $name ) {
   	$html = '<a href="' . ( $name ) . '" target="_blank" >' . $html . '</a>';
   	}
   	}
   	return $html;
   	}

   view raw
   Add External Link to Featured Image with Custom Field
   hosted with  by GitHub

   Save your file

2. Ensure that you have WordPress custom fields enabled in your version of WordPress(previously in top admin dropdown). If you are using WordPress 5.0 with Gutenburg then you’ll find they have been inexplicably removed and you’ll need to add them back in with the WordPress Custom Fields for Gutenberg plugin. Download and install it.
3. Now compose your post as usual and add the featured image. Then access the Custom Fieldspanel on your post page and ‘Add New Custom Field’ ExternalUrl and then add your desired destination external URL in the ‘Value’ entry like the below and that’s it – your featured image will now link externally to the Link set.
   

You can test this feature by clicking the Featured Image on this page and this will take you back to the Slick Media homepage in a new window 

ABOUT THE AUTHOR

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.