I pretty much randomly decide to post WordPress tips whenever I start seeing questions asked repeatedly on the forums. This time around, I’ve been seeing a fair amount of questions pertaining to linking post thumbnails (using the_post_thumbnail) to their post permalink. There are a couple of options here, so let’s see what they are!
Both options are quite simple. The first option we’ll discuss is just dropping a bit of code into your theme’s functions.php file (inside the php tags as always). This bit of code here links all thumbnails you have to their respective post permalink.
// THIS LINKS THE THUMBNAIL TO THE POST PERMALINK
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;
}
We also have another option. This one gives a bit more control instead of linking every thumbnail. Instead of editing the functions.php file this time, we edit the appropriate template where the thumbnail is coded; single.php, index.php, loop.php for instance. You would already have code similar to this in your template:
<?php // original thumbnail code the_post_thumbnail(); ?>
So we just need to add the link to it which is simply:
<a href="<?php the_permalink(); ?>"> <?php // thumbnail code simply wrapped in a link the_post_thumbnail(); ?> </a>
Edit: A little update to this post. We probably shouldn’t add links unless the thumbnail exists, so here is a way to do that:
<?php
if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail( 'title-image', array( 'class' => 'title-image', 'alt' => 'Title Icon' );
echo '</a>';
}
?>
That’s it! Two simple options for linking your thumbnails to your permalinks. Hopefully somebody finds this useful!
If anybody has any suggestions, requests, or questions, just drop a comment my way. I’m happy to give an answer. If I don’t know the answer, I will do my very best to find it for you. We can all learn along the way!
The second and third example need an endif; otherwise it will break your website. And I wouldn’t use “title-image” as the size/name in these examples. You probably added a new thumbnail size with add_image_size() in your theme. It will show with this named image size but makes it a bit more confusing.
Thanks…. ya know, I need to go over my site. I crashed it a couple weeks ago, and random things are missing after my restore. There used to be a bit more code to my examples that seems to have gone missing. But either way, my examples had unnecessary stuff in them. Too complicated for no reason. Simplified and basic now.
Thanks for the tip! The first option works but there was a styling issue for thumbnails in excerpts. The second option works in v3 without needing to check for if thumbnail exists.
RateTourGuides.com
Permalink on Thumbnails is what i’ve been looking for tonight…the 1st code example when added to functions.php had no effect?..i’m using WordPress 3.1…do you have a final version of the code sample that is correct?…since in the thread you seemed to indicate possible problems with your code?..i’d love to get this work….cheers!
The errors mentioned in the comments were due to a site crash that messed up my code. The errors had all been fixed since. The only remaining problem is on the bottom example, I call the_post_thumbnail title-image, which is not well explained. Since that is a specific image size to my theme, it may be confusing to readers. The first example here, is what I use on this site. I veririfed it is exactly what I have that functions properly. Unfortunately, I’m not sure why there would be an issue on your end?
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail#Post_Thumbnail_Linking_to_the_Post_Permalink
can look here, maybe swapping in $thumbnail->ID for the permalink where I use $post_id may help?
Thanks for this sharing. It helped.
Thanks, it solved my problem, couldn’t find a working code on like 20 sites. Thanks
I’m glad it worked for you! Thanks for letting me know.
I am having a little problem. I want the post thumbnail to b clickable in index.php and it is clickable right now which is fine. the problem is when the post opens, the image is still clickable. I also want to know how to make featured image load in the post. If i insert an image in the post then both images show, the featured image and the image i inserted. I also wanna know how to show bigger version of featured image in the post. Like i have thumbnail of 240x160px and i want that if i click the thumbnail, it should take me to post page where 640x480px image is shown. Is it possible?
How are you currently linking the thumbnail? Is it in functions.php like the first example above? Or in index.php, single.php like the last example? You need to figure that part out. If it’s the same as the first block of code I have above, you would delete that, and use the bottom method on index.php only. Your second question, I am not quite sure what you mean? Do you upload several images into the post, and then use one of them as the featured image, and that causes the image to show up twice? If that’s right, I can help I’m sure. As for your final question, you need to register a new featured image size, and call that one in single.php. I have an article here which may help with that. http://vudu.me/5f
Take a look at http://blog.streetmarathon.com
this is what i am doing right now. I only added code in functions.php. here is what i pasted there.
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 240, 160, true ); // Normal post thumbnails
add_image_size( ‘single-post-thumbnail’, 500, 9999 ); // Permalink thumbnail size
featured image is showing its correct size that is 240×160 but when i click on the post then full image is not shown. I want to fix that.
Ahhh… thank you for your detailed solution written in a simple enough manner so that I could understand it. 3-hours searching on the web; about 20 crashes due to poor code editing; and after reading your post I had it taken care of in less than 5 minutes.
Fantastic! Glad I could help!!
Rev Voodo. I need help. I added in this line ?><a href="”> $title));?><?php; and it works as far as the featured image linking BUT my entire excerpt is a giant underlined permalink which I don't want. Any ideas? Thanks
I can’t tell from your post exactly what you added… or where. But did you include the closing a tag? If not, your link will just continue on…. which would get your excerpt linked as well it should be like:
i am using twenty eleven theme
even i added filters in functions.php but that didn’t worked
even i tried optiion2
but still that is not working
I guess I don’t understand what you mean. 2011 uses featured images as the header, is that what you are trying to turn into a link? Or did you add other featured images?
Hi Voodoo, Would you be able to use this code for a featured image and have the image linkable to any url?
Yes, this code is for the featured image. To be able to link it to any url, you would need to determine how you get that url. What would be the input? My suggestion is through the use of a custom field. You can then echo get_post_meta into the code for the URL attached to the post.
I want to tell you that I have been looking how to do this for weeks. I’ve read so many forums and posts and not a single one would work. Then I finally found your site. Your second method worked perfectly for me. Thank you so so so much!!
I just returned from traveling on business and am trying to catch up…. I always answer all comments! I’m glad you found my article helpful! Should you need further help, I run a WP specific site now at VoodooPress.com … you can check that out and ask for any specific help you should need!!
Hi,
i am displaying one thumbnail image, same time i want to pop that image with diffrent size and width compair to thumbnail. now i am using the below code but in this image is not displaying only the popup is taking.
this is may code.
<a href="” rel=”lightbox[gallery]“>
<img src="”
Thank You
code is
<a href="” rel=”lightbox[gallery]“>
<img src="”
<a href="” rel=”lightbox[gallery]“>
<img src="”
I found almost what I was looking for here, but I want the featured image to be linked to the “media file”, not the Post Permalink, so it can be opened in Lightbox for example.
Do you know how to do this?
Anyone?
THANK YOU! The first method worked perfectly. Thanks again!
Thanks, helped me a lot!
Hi Friend,
On my website on first I want to put 12 zodic images and link them to a post which I’ll weekly update, but unable to do this , please help me how can I overcome this issue.
On my website on first I want to put 12 zodic images and link them to a post which I’ll weekly update, but unable to do this , please help me how can I overcome this issue.
Brilliant, thanks for this!
I know this is years old, but I just can’t get this to work… What would be your solution now that it’s 2016?