wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials WordPress Clickable Thumbnail Link

Tutorials

WordPress Clickable Thumbnail Link

Last updated on February 18, 2017
Posted on July 8, 2010

How to make your thumbnail or featured image of your wordpress post to be a clickable link, so whenever you click this image, it will link you to the post itself.

This tutorial is using wordpress 3.0 and Twenty Ten theme. To follow this guide, you must already set up thumbnail with Twenty Ten theme.


If you haven’t, feel free to check my previous tutorial adding a line of code to display thumbnail for your posts.

If you done with it, let’s begin:

1. Backup database in 2 minutes.
2. Make sure you have the thumbnails displayed in your post.
3. Login to your dashboard, go to Appearance and then “editor”.

4. Copy the codes of loop.php and paste it in html editor or notepad.
5. Go to line where it says: <?php the_post_thumbnail(); ?>
Mine it is on the line 137.

6. Replace that code with this:

<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a>

7. Paste the codes back, click “Update file”.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

8. Refresh your browser and click your thumbnail, it should bring you the related posts.

Video tutorial:

another link thumbnail to use

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Set Up “Discussion Settings” WordPress
→ Submitting WordPress Blog To Yahoo

Comments

  1. vector graphics says

    July 8, 2010 at 7:39 pm

    thanks for the awesome tutorial..

    • Kimi says

      July 9, 2010 at 7:51 am

      @vector graphics, You are most welcome.

  2. Shekhar Sahu says

    July 8, 2010 at 9:48 pm

    This seems to be an easy tutorial. 🙂

    • Kimi says

      July 9, 2010 at 7:52 am

      @Shekhar Sahu, It is not difficult 🙂

      Thanks for the comment.

  3. yetimade says

    August 4, 2010 at 9:41 pm

    Yeah, no sorry, that doesn’t work for me. Suggestions?

    • Kimi says

      August 5, 2010 at 4:54 pm

      @yetimade, It does not always work especially when we have different themes.

      Let me know which website you want to apply this?

  4. martin says

    August 25, 2010 at 1:52 pm

    hi, is it also possible to make your featured image of your wordpress post to be a clickable link, so whenever you click this image, it will show you the larger version of itself.

    • Kimi says

      August 26, 2010 at 6:52 am

      @martin, hello there

      By default if you post any images in wordpress, when you click it, it will bring us to the source file.

  5. martin says

    August 26, 2010 at 8:31 am

    Hi Kimi,

    Tnx for the reply! For the featured image it’s a different story. I can’t click on the image to see the original ‘large’ image.

    • Kimi says

      August 26, 2010 at 2:33 pm

      @martin, hey

      I can click featured image, and it will make me see the original “large” image, but then it will cost me slower page speed, because i had to crop the size to be a thumbnail.

      • martin says

        August 27, 2010 at 3:40 pm

        @Kimi,

        I can’t click on my featured image in the single.php. I don’t know how to ad an code:a href=”url postimage” rel=”nofollow”>bigger image link to the postimage and show it on a blank page…

        • Kimi says

          August 27, 2010 at 5:16 pm

          @martin, Do you have the url link of the site you mean?

          In your site in your signature, i can click it.

  6. Robert says

    August 27, 2010 at 3:45 am

    Hi Kimi,

    How about linking the image to, let’s say, an Amazon affiliate product page?

    Robert

    • Kimi says

      August 27, 2010 at 3:17 pm

      @Robert, This is possible as long as the affiliate product page link is randomized, otherwise, you would have same thumbnails in every posts.

  7. Kelvin says

    November 24, 2010 at 4:37 pm

    What if a want to make my featured image on the index.php click-able?

    • Kimi says

      November 24, 2010 at 4:53 pm

      Hi Kelvin,

      In the tutorial it will show clickable thumbnails in index.php, did you watch the end result in the video?

      Let me know if you need some helps.

      Kimi.

      • Kelvin says

        November 24, 2010 at 6:20 pm

        Kimi,

        Thanks for you fast response.

        I wached the video but still it don’t work for me.

        This is the code I am supposed to change:

        “alignleft post_thumbnail”));
        }
        ?>

        • Kelvin says

          November 24, 2010 at 6:31 pm

          [code]
          “alignleft post_thumbnail”));
          }
          ?>
          [/code]

  8. Kelvin says

    November 24, 2010 at 6:31 pm

    I can’t put code on comments…

    • Kimi says

      November 24, 2010 at 7:06 pm

      You have to type <code> your code here </code>

      I assume your theme is vivex? if yes, is this what you want to achieve? demo: http://kimi9.byethost32.com/

      If yes, then remove this code from index.php, <?php if (function_exists("has_post_thumbnail")&&has_post_thumbnail()){ the_post_thumbnail(array(260,200),array("class"=>"alignleft post_thumbnail"));} ?>

      And replace that line to:
      <a href=" <?php the_permalink();? rel="nofollow">" title=" <?php the_title();?>"> <?php the_post_thumbnail(); ?></a>

      And then, add this line to style.css:
      .attachment-post-thumbnail{padding:6px;background:#fff;border:1px solid #becacc;margin:0 10px 10px 0;float:left;width:200px;height:200px;}

      I hope this helps.

      • Kelvin says

        November 24, 2010 at 7:59 pm

        Indeed, I am using Vivex.

        Now featured images are clickable. However, the quality of the featured images now look downgraded, how can I solve that issue?

        <a href="" title="">


        .attachment-post-thumbnail {
        padding:6px;
        background:#fff;
        border:1px solid #becacc;
        margin:10px 10px 10px 0;
        float:left;
        width:150px;
        height:150px;
        }

        • Kimi says

          November 24, 2010 at 8:11 pm

          The image should have the dimension that you would like to have and match with your css.

          Example when you uploaded an image with dimension, 100×100, and then the image itself should have height, and width; 100×100.

          Or the image size which is uploaded has 140×200, then in css width and height have to follow accordingly, 140x200px.

          I hope it helps.

        • Kelvin says

          November 24, 2010 at 10:40 pm

          But before changing: the_post_thumbnail(array(260,200),array("class"=> "alignleft post_thumbnail")) , the featured image had better quality.

          Before:
          http://img683.imageshack.us/img683/8545/screenshot10u.png

          After:
          http://img34.imageshack.us/img34/772/screenshot9a.png

          I don’t think as a user you need to upload the photo with the specific size because WP automatically create:
          * Thumbnail
          * Medium
          * Large
          * Full (the image you uploaded)

          So, I got better resolution when I specified the size:
          the_post_thumbnail( array(260,200) );

          Reference: http://codex.wordpress.org/Function_Reference/the_post_thumbnail

  9. Kelvin says

    November 24, 2010 at 10:42 pm

    I forget to mention that the_post_thumbnail(); // without parameter -> Thumbnail
    use Thumbnail size by default and therefore you are going to get a worse quality.

    • Kimi says

      November 25, 2010 at 5:59 am

      Exactly, most webmasters upload images and scale them via css, which can slow down your site’s speed, according to Yslow from yahoo, see more reference on: http://developer.yahoo.com/performance/rules.html#no_scale

      I personally do not use what dimension of images you can have with wp-features.

      • Kelvin says

        November 26, 2010 at 12:12 am

        Well, it is better to scale down the image with Photoshop for example and then upload it to WP…

        Thanks for your help!

        • Kimi says

          November 26, 2010 at 2:27 am

          Yes, exactly.

          My pleasure, Kelvin, happy thanksgiving if you celebrate!

          Cheers.

  10. schenk says

    December 28, 2011 at 10:03 pm

    any ideas how would i be linking the image to external url instead of linking to itself?

  11. Chellie says

    August 13, 2012 at 7:32 am

    didn’t work for me – crashed my site.

Trackbacks

  1. Links Of The Week: Part 3 | WebMaster-Success.com says:
    July 11, 2010 at 2:08 pm

    […] WordPress clickable thumbnail link […]

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept