• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How To Link Post Thumbnail To The Post Permalink

Avatar of Noor Mustafa Raza Noor Mustafa Raza August 17, 2023

Link Post Permalink To Post Thumbnail
FacebookTweetPinLinkedInEmailPrint

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.

Table of Contents

  • Introduction
  • The Code
  • Alternative Approach
  • Conclusion

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.

FacebookTweetPinLinkedInEmailPrint

Related Stories

  • How to Display Different Numbers of Posts in WordPress

    How to Display Different Numbers of Posts in WordPress

  • How To Add Multiple Product Categories To WP eCommerce Plugin

    How To Add Multiple Product Categories To WP eCommerce Plugin

  • WP Custom Fields usage for Customers website and Multisite users

Avatar of Noor Mustafa Raza

Noor Mustafa Raza

Ex-Editor in chief

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.

Reader Interactions

Join the Discussion
  1. Avatar of Abdulaziz AldhyaieAbdulaziz Aldhyaie says

    June 6, 2018

    Could you please explain more, where should write this code to make it happen ?

    Reply
    • Avatar of Editorial StaffEditorial Staff says

      June 7, 2018

      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

      Reply

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

reduce comment spam

What Makes A WordPress Comment Spam

Highlight Features of WordPress 3.0

Recent Topics

  • 27 Top SEO Companies in the World
  • 12 Ways To Monetize Your WordPress Blog
  • Comparing the Best Employee Engagement Software in the Market
  • Stellar Converter for OST Review: Best Tool for OST to PST Conversion
  • How To Use WordPress as an eCommerce Store

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!