How do I make it so the thumbnails in the list of blog posts on my blog are clickable, so that when the user clicks the thumbnail image, the blog post opens up?

If it helps, this is the blog: http://wordfruit.com/blog

  • Richard, Can you paste the code from your index.php or themes home page template file? That would allow us to give you the best answer. – Rachel Baker Oct 9 '11 at 1:21

Do you want to make all the thumbnails link to their respective blog posts? If so, use the following code in the functions.php file:

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;

If you only want the post thumbnails to link to the post permalink in a specific loop, use the following code in the query like Jamal mentioned earlier:

if ( has_post_thumbnail() ) : 
    ?><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php 

The loop is in the index.php page. Take a look at the WordPress Codex regarding The Loop and you can see where pieces of the code should fall depending on your theme.

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
  • Thanks Mohit. I guess I'll try this if the other one doesn't work. I'm not sure which style.css I should add this to -- I have a style.css called 'twentyeleven' and one called 'wordfruit' -- do you know which it's most likely to be? Also, where do I add this code in the file? – Richard Oct 8 '11 at 14:48
  • post this in functions.php – Mohit Bumb Oct 9 '11 at 4:27
  • Hi Mohit; I put that code in functions.php -- the thumbnails are still not clickable -- maybe I put the code in the wrong place in the file -- is there a particular place in functions.php where I should paste the code? – Richard Oct 9 '11 at 14:03
  • Also, in the folder 'themes', I have 3 folders: 'twentyeleven' / 'twentyten' / 'wordfruit' -- each has a 'functions.php' file -- which one should I be editing? – Richard Oct 9 '11 at 14:09
  • well functions.php of you theme root folder and there is no sequel paste it anywhere in functions.php but not between any other function well here is your solution for clickable thumbnail check this link well there is code where is loop you must add this in single.php according to your theme style codex.wordpress.org/Function_Reference/the_post_thumbnail – Mohit Bumb Oct 9 '11 at 17:23

You need to edit your theme's index.php and category, tag, etc archives to enable this. If you're comfortable in editing your theme's files, then you can replace the code that calls post thumbnails with the following one:

    /* Display the thumbnail only when available. */
    if ( has_post_thumbnail() ) : 
        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail(); ?>
    /* Remember that we had a conditional check open; close it. */
  • Thanks Jamàl. What is the code that I delete and replace with this code? (the code that calls post thumbnails) – Richard Oct 8 '11 at 22:55
  • @Richard, yes. You need to replace the code that calls the post thumbnails. But be careful when you're doing this. You may break your website if you are not comfortable in editing codes. – Jamal Jama Oct 9 '11 at 10:11
  • Hi Jamàl -- I mean what is that code? -- I don't know which bit of code I need to select and delete... – Richard Oct 9 '11 at 13:55

paste this into your functions.php file. It will make the images in your post go to the post instead of image source.

function wpguy_linked_image($content){

    $searchfor = '/(<img[^>]*\/>)/';
    $replacewith = '<a href="'.get_permalink().'">$1</a>';

    if (is_single() === FALSE){
        $content = preg_replace($searchfor, $replacewith, $content, 1);
    return $content;


add_filter('the_content', 'wpguy_linked_image');
  • This is a rather old question, but an answer can be useful for people visiting this question page nonetheless. However, you only provide code. Please include an explanation for what the code does and provide comments in the code. – engelen Mar 27 '16 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.