How to make your thumbnail or featured image of your wordpress post to be a clickable link, so whenever you click this image, it will link you to the post itself.
This tutorial is using wordpress 3.0 and Twenty Ten theme. To follow this guide, you must already set up thumbnail with Twenty Ten theme.
If you haven’t, feel free to check my previous tutorial adding a line of code to display thumbnail for your posts.
If you done with it, let’s begin:
1. Backup database in 2 minutes.
2. Make sure you have the thumbnails displayed in your post.
3. Login to your dashboard, go to Appearance and then “editor”.
4. Copy the codes of loop.php and paste it in html editor or notepad.
5. Go to line where it says: <?php the_post_thumbnail(); ?>
Mine it is on the line 137.
6. Replace that code with this:
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a>
7. Paste the codes back, click “Update file”.
8. Refresh your browser and click your thumbnail, it should bring you the related posts.
Video tutorial:
{ 28 comments… read them below or add one }
thanks for the awesome tutorial..
@vector graphics, You are most welcome.
This seems to be an easy tutorial. :)
@Shekhar Sahu, It is not difficult :)
Thanks for the comment.
Yeah, no sorry, that doesn’t work for me. Suggestions?
@yetimade, It does not always work especially when we have different themes.
Let me know which website you want to apply this?
hi, is it also possible to make your featured image of your wordpress post to be a clickable link, so whenever you click this image, it will show you the larger version of itself.
@martin, hello there
By default if you post any images in wordpress, when you click it, it will bring us to the source file.
Hi Dina,
Tnx for the reply! For the featured image it’s a different story. I can’t click on the image to see the original ‘large’ image.
@martin, hey
I can click featured image, and it will make me see the original “large” image, but then it will cost me slower page speed, because i had to crop the size to be a thumbnail.
@Dina,
I can’t click on my featured image in the single.php. I don’t know how to ad an code:a href=”url postimage” rel=”nofollow”>bigger image link to the postimage and show it on a blank page…
@martin, Do you have the url link of the site you mean?
In your site in your signature, i can click it.
Hi Dina,
How about linking the image to, let’s say, an Amazon affiliate product page?
Robert
@Robert, This is possible as long as the affiliate product page link is randomized, otherwise, you would have same thumbnails in every posts.
What if a want to make my featured image on the index.php click-able?
Hi Kelvin,
In the tutorial it will show clickable thumbnails in index.php, did you watch the end result in the video?
Let me know if you need some helps.
Kimi.
Kimi,
Thanks for you fast response.
I wached the video but still it don’t work for me.
This is the code I am supposed to change:
“alignleft post_thumbnail”));
}
?>
[code]
"alignleft post_thumbnail"));
}
?>
[/code]
I can’t put code on comments…
You have to type <code> your code here </code>
I assume your theme is vivex? if yes, is this what you want to achieve? demo: http://kimi9.byethost32.com/
If yes, then remove this code from index.php,
<?php if (function_exists("has_post_thumbnail")&&has_post_thumbnail()){ the_post_thumbnail(array(260,200),array("class"=>"alignleft post_thumbnail"));} ?>And replace that line to:
<a href=" <?php the_permalink();? rel="nofollow">" title=" <?php the_title();?>"> <?php the_post_thumbnail(); ?></a>And then, add this line to style.css:
.attachment-post-thumbnail{padding:6px;background:#fff;border:1px solid #becacc;margin:0 10px 10px 0;float:left;width:200px;height:200px;}I hope this helps.
Indeed, I am using Vivex.
Now featured images are clickable. However, the quality of the featured images now look downgraded, how can I solve that issue?
<a href="" title="">
.attachment-post-thumbnail {
padding:6px;
background:#fff;
border:1px solid #becacc;
margin:10px 10px 10px 0;
float:left;
width:150px;
height:150px;
}
The image should have the dimension that you would like to have and match with your css.
Example when you uploaded an image with dimension, 100×100, and then the image itself should have height, and width; 100×100.
Or the image size which is uploaded has 140×200, then in css width and height have to follow accordingly, 140x200px.
I hope it helps.
But before changing:
the_post_thumbnail(array(260,200),array("class"=> "alignleft post_thumbnail")), the featured image had better quality.Before:
http://img683.imageshack.us/img683/8545/screenshot10u.png
After:
http://img34.imageshack.us/img34/772/screenshot9a.png
I don’t think as a user you need to upload the photo with the specific size because WP automatically create:
* Thumbnail
* Medium
* Large
* Full (the image you uploaded)
So, I got better resolution when I specified the size:
the_post_thumbnail( array(260,200) );Reference: http://codex.wordpress.org/Function_Reference/the_post_thumbnail
I forget to mention that
the_post_thumbnail(); // without parameter -> Thumbnail
use Thumbnail size by default and therefore you are going to get a worse quality.Exactly, most webmasters upload images and scale them via css, which can slow down your site’s speed, according to Yslow from yahoo, see more reference on: http://developer.yahoo.com/performance/rules.html#no_scale
I personally do not use what dimension of images you can have with wp-features.
Well, it is better to scale down the image with Photoshop for example and then upload it to WP…
Thanks for your help!
Yes, exactly.
My pleasure, Kelvin, happy thanksgiving if you celebrate!
Cheers.
any ideas how would i be linking the image to external url instead of linking to itself?
{ 1 trackback }