Making WordPress featured images clickable to redirect to full post

Other Questions Wordpress
1

I’m working on a WordPress site and need help making the featured images clickable. Right now I have a custom loop that displays posts with their thumbnails, but when visitors click on the images nothing happens. I want the images to work like links that take people to the full post page.

Here’s my current setup in the template file:

<section class="content-area">
    <?php 
    $query_args = array('numberposts' => 8);
    $custom_query = new WP_Query($query_args); 
    ?>
    
    <?php if ($custom_query->have_posts()) { ?>
        <?php while ($custom_query->have_posts()) {
            $custom_query->the_post(); ?>
            
            <div class="post-item"> 
                <div class="featured-image">
                    <?php if (has_post_thumbnail()) { ?>
                        <?php the_post_thumbnail(); ?>
                    <?php } ?>
                </div>
                
                <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
                
                <div class="post-content">
                    <?php the_excerpt(); ?>
                </div>
            </div>
            
        <?php } 
    } else { ?>
        <p>No posts found.</p>
    <?php } ?>
    
    <?php wp_reset_postdata(); ?>
</section>

What’s the best way to wrap the thumbnail with a link so it becomes clickable? I tried a few approaches but they didn’t work properly.

2

just wrap the_post_thumbnail() in an anchor tag: <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> - put it inside ur featured-image div and your good to go. works perfectly on all my sites!

3

Easy fix, but don’t mess up your existing structure. Swap out your featured image section with this:

<div class="featured-image">
    <?php if (has_post_thumbnail()) { ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail(); ?>
        </a>
    <?php } ?>
</div>

This keeps your conditional check but wraps the thumbnail in a permalink link. I’ve done this on tons of WordPress sites - it handles all thumbnail sizes and alt attributes without breaking anything. Just add the link wrapper around your thumbnail output and you’re good to go.

4

You can also use WordPress’s get_the_post_thumbnail() function with custom attributes for more control over the link behavior. Replace your featured image div with:

<div class="featured-image">
    <?php if (has_post_thumbnail()) { ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            <?php the_post_thumbnail('medium', array('class' => 'clickable-thumb')); ?>
        </a>
    <?php } ?>
</div>

I’ve used this approach for years - it gives you better accessibility with the title attribute and lets you specify thumbnail sizes. The title attribute shows the post title on hover, which improves UX. You can also add custom CSS classes directly to the thumbnail for styling.