How to make thumbnail images click into blog posts

Question

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

Answer 1

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_post_thumbnail(); 
    ?></a><?php 
endif;

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.

Answer 2

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:

<?php 
    /* Display the thumbnail only when available. */
    if ( has_post_thumbnail() ) : 
?>
        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail(); ?>
        </a>
<?php 
    /* Remember that we had a conditional check open; close it. */
    endif; 
?>

Answer 3

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

Answer 4

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');