Set a custom link for featured images

It depends on the theme. The normal code is

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

That is wrapping the thumbnail in a link to the post permalink.
You can replace the_permalink() with a different URL.
If the URL is stored in a post custom field (named ExternalURL in this example) this should work:

<?php
$url = get_post_meta( $post->ID, 'ExternalURL', true );
if ( has_post_thumbnail() ) {
   if ( $url ) {
      echo '<a class="thumbnail" href="'. esc_url_raw($url). '">';
   }
   the_post_thumbnail();
   if ( $url ) {
      echo '</a>';
   }
?>

This only includes the link if there is a value in the url custom field. Its not validating that the URL is valid. It is escaping it to prevent malicious code from running.

You have to find where in your theme to insert this code.

Hi Stvwlf.
first of all, thank you.

I will install your code in my theme, this the part of index that calls the featured image (I guess),

<div>

<div class="post-header">
						<?php frogs_media($post->ID); ?>
					</div>

					<div class="post-content">
						<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
						<p><?php frog_the_excerpt_reloaded(50, '<a>', TRUE, '...', FALSE, 1); ?></p>
					</div>

in the above code, the featured image is inserted with <div class=”post-header”>
<?php frogs_media($post->ID); ?>
</div>

where can I insert your code? should I go dig in the source where frogs_media came from?

please when writing bare in mind that I am a complete newbie.
thank you

after some diggin, here is what I found on the file theme-functions.php on the theme folder, i believe this defines the frogs_media thingy in the above post.

function frogs_image($postID)
{
	if(has_post_thumbnail())
	{
		$image_id = get_post_thumbnail_id();
		$image_url = wp_get_attachment_image_src($image_id,frogs_column_width($postID));
		$image_url = $image_url[0]; 

		echo '<a href="'.get_permalink($postID).'"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
	}

should I replace

<a href="'.get_permalink($postID).'"> </a>

with the code you posted above?
Thank you

hi

No, don’t replace with my code. Give me a little while and I will work out an alternate code for you. You will need to add a custom field to posts where you want the featured image link to go to a URL other than the post. I will set the code up to make linking to the post the default if there is no custom field defined on that post.

If you are not familiar with working with custom fields, first you have to make the custom field metabox visible. In the upper right corner of the Post Edit screen is a Screen Options button. Click it, and check the Custom Fields checkbox. Then you can see the checkbox.

I arbitrarily picked ExternalURL as the name of the custom field the code will be looking for. You can name it anything you want as long as the frogs_image function is set to look for that custom field name.

I’ll post again when the code is ready for you to try.

OK, here you go. Its always a good idea to make a backup copy of a code file before you change it so if anything doesn’t work out you can revert to the original version.

replace the whole

if(has_post_thumbnail())
{
   ...
}

block with this. There could be a minor syntax error in the block – I can’t test it directly on your theme as I don’t have that theme. Let me know if you get any error message you can’t figure out. This looks first to see if the custom field has been defined that holds the external URL (The whole URL should be entered, like https://example.com/this/that/nameoffile.php )

If the external URL exists it links to that. If not it links to the post.

if(has_post_thumbnail())
{
	$image_id = get_post_thumbnail_id();
	$image_url = wp_get_attachment_image_src($image_id,frogs_column_width($postID));
	$image_url = $image_url[0];

	$external_url = get_post_meta( $postID, 'ExternalURL', true);

	if ( $external_url ) {
		echo '<a href="'. esc_url_raw($external_url). '" target="_blank"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
	} else {
		echo '<a href="'.get_permalink($postID).'"><img src="'.$image_url.'" alt="" '.imageheightwidth($image_id,frogs_column_width($postID)).' /></a>';
	}
}

Ok, Thanks a bunch.

yes I familiarized myself with custom posts and stuff ?? I am within my first week of wordpress and had to learn all that. it did cost some gray hair though ??

Do custom fields stay on the database? in case I change the theme or I move my wordpress would I lose them or keep them?

sweet! I will try that and get back to you

Custom fields always stay in the database. They are associated with the post, so no matter what theme you use the custom field is still there.

The display code I sent, however, is associated with the theme. If you change the theme the new theme’s code will need to be changed to use the external link when displaying a featured image.

That is one of the differences between a theme and a plugin. Plugin code is active all the time, across themes. Theme code is only active when the theme the code is in is active.

That frogs_image uses its own way of displaying featured images. Other themes will do it in other ways. Thus their code will need to be modified. The principle of displaying it is the same in all themes but the method used can vary by theme.

That worked like a charm! Thanks a lot! your explanation is helpful too.

I clicked on your username and it took me to your website, I will keep that on my bookmarks for future reference in case I need your professional help.

Take care!

Also I’m adding search keywords in case someone searches for same issue, ‘How to set custom link for featured image on foliogridpro’

Hi,
I have a similar problem. I’m using the free “Simple Grid” theme https://www.dessign.net/simple-grid-theme-responsive/ and I would like my featured images from the front page to direct the user to an external link (amazon link). Using custom fields seems a good idea. I am not familiar with coding and the solutions seem to be “custom made”. As I don’t know how to adapt the code sequence to my theme, I was wondering if I can get any help…

As you’re not contributing towards the original poster, you should create your own thread.