How To Link Post Thumbnail To The Post Permalink

Are you searching for a way to connect your post thumbnail to the post permalink? Look no further! This comprehensive guide will explore different methods to display your thumbnail alongside the post permalink, ensuring an enhanced user experience.

Introduction

When I encountered the issue of showcasing the thumbnail with the post permalink, I discovered a solution on WordPress Developer Reference. However, I found it unsatisfactory, prompting me to explore alternative methods to achieve the desired outcome.

In this guide, we will focus on an efficient approach that involves adding code to the functions.php file of your WordPress theme. By implementing this code, your post thumbnails will be automatically linked to their respective post permalinks, creating a seamless connection for your readers.

The Code

To begin, let’s update the code to make it compatible with WordPress 6.3 and optimize it for improved SEO performance:

add_filter( 'post_thumbnail_html', 'wps_post_thumbnail', 10, 5 );

function wps_post_thumbnail( $html, $post_id, $post_image_id, $size, $attr ) {
    if ( has_post_thumbnail( $post_id ) ) {
        $html = '<a href="' . esc_url( get_permalink( $post_id ) ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">';
        $html .= get_the_post_thumbnail( $post_id, $size, $attr );
        $html .= '</a>';
    }
    return $html;
}

The updated code ensures compatibility with the latest version of WordPress and enhances the functionality by verifying the existence of a thumbnail before adding the link.

Alternative Approach

If you prefer a slightly different method that offers more control over the thumbnail display, you can utilize the following code:

if ( has_post_thumbnail() ) {
    echo '<a href="' . esc_url( get_permalink() ) . '">';
    the_post_thumbnail( 'title-image', array( 'class' => 'title-image', 'alt' => 'Title Icon' ) );
    echo '</a>';
}

This alternative approach allows you to conditionally add the link only if a post thumbnail is present.

Conclusion

By implementing either of the above code snippets, you can effortlessly link your post thumbnails to their respective permalinks. This improvement will not only enhance the overall aesthetics of your WordPress website but also provide a smoother browsing experience for your audience.

To explore further possibilities and gather more insights, feel free to refer to reputable sources such as the top Google sites or conduct a targeted search on Google. Remember, continuous improvement is key when it comes to refining your website’s SEO, structure, and readability.

Disclosure: Some of the links in this article are affiliate links and we may earn a small commission if you make a purchase, which helps us to keep delivering quality content to you. Here is our disclosure policy.

Noor Mustafa Raza
Noor Mustafa Raza
I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

2 COMMENTS

    • Hi AbdulAziz,

      Thanks for the comment. You can put this code in your functions.php. Please note, before making any changes, backup the file. Don’t try to do it, if you don’t know how to upload theme files using cPanel.
      Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!

spot_img

Related Articles

How to Avoid Common Mistakes That Can Impact Your WordPress Blog

A WordPress blog starting is quite exciting, but certain mistakes can prevent it from attaining the top ranking in search...
Read More
How would you react if you knew that you could design and style your theme without disturbing your parent theme?...
The most successful businesses keep themselves updated with the data of their market campaigns. When tracking visitors and analyzing visitor...