How to Make an Image Clickable in WordPress

Some WordPress Themes (like the Twenty Twenty) display in the archives pages the featured images without a link to the article. In this post, we’re going to see how to make an image clickable and how to find the file we need to modify.

Requirements: You’ll be modifying your theme’s files, which is strongly discouraged. For this reason, we create “Child Themes”, something you can achieve very easily in a couple of minutes. Check out how to create a child theme at my toolkit, step by step.

What File Do I Need to Modify to Make an Image Clickable in WordPress?

WordPress themes are like puzzles. Hence, to find to what we want to change we must follow those pieces. We do that:

• first, by knowing how the WordPress Hierarchy works
• two, by knowing our theme (the Twenty Twenty Theme, in this example)

How Does the Twenty Twenty Theme Render the Archive Pages?

The Twenty Twenty Theme does one special thing: it uses one file to display three templates: the home page, the archive pages (for categories and tags) and the search page (the one that shows the results after a user makes a search in your blog.) One file for all those things: the index.php.

Therefore: there isn’t a specific file to display the archives differently.

At the WordPress Theme Handbook, when we learn about the hierarchy, we see that when a user enters a category WordPress will look for the template in the following order:

1. category-{slug}.php – If the category’s slug is news, WordPress will look for category-news.php.
2. category-{id}.php – If the category’s ID is 6, WordPress will look for category-6.php.
3. category.php
4. archive.php
5. index.php

In the Twenty Twenty Theme, we’ve got only index.php to show our archives. We could create an archive.php but today we’ll keep it simple: we’ll follow the road and simply say “if this is an archive page, display a clickable image.”

How do I Get to the Featured Image?

WordPress Themes display the post featured image with the function the_post_thumbnail(). So this is what we need to look for in our theme’s files.

Open the Twenty Twenty Theme folder and then:

1. Open index.php. At line 88, you’ll see:

 get_template_part( 'template-parts/content', get_post_type() );

which means that we need the piece content.php inside the folder template-parts; this is what shows how posts are displayed.

2. Open template-parts > content.php. At line 22 you’ll see:

if ( ! is_search() ) {
    get_template_part( 'template-parts/featured-image' );
}

which means that: if it’s not a search page, get the piece featured-image.php (also inside template-parts)

3. Open featured-image.php, and at line 25 you’ll find it:

the_post_thumbnail();

By following this path, we learned that this image is being displayed on all archive pages, except on the search results. Now, we need to say: only if it’s an archive page (category or tag) show it clickable.

How to Make an Image Clickable in WordPress: The Snippet

1. From the Twenty Twenty Theme folder, copy the file featured-image.php;
2. Go to your Child Theme’s Folder and create inside a folder named “template-parts”
3. Inside template-parts, paste the file

Open the file. Take a look at lines 24 to 36. It’s asking for the image (the post thumbnail) and if it has a caption, this will be displayed inside <figcaption>

I’ll leave the whole snippet at the end, but let’s see what we are going to do:

First, we’re going to hit enter on line 24 (to get above that line) and we’ll open an if statement saying, “if this is an archive page, show me the image inside an anchor element that links to the post and that also shows the title attribute”

		<?php if(is_archive()) : ?>
		    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
			    <?php the_post_thumbnail(); ?>
			 </a>

Then, we’ll say, “if it’s something else” (ergo, not an archive page)

		<?php else : ?>

and we’re going to leave the code that was there; the original lines 24 to 36;

Finally, below that original line 36, we’re going to close our statement:

<?php endif; ?>

That’s all you need!

Here’s the whole snippet, just in case. All you need to do, is to select lines 24 to 36, delete them and paste the following code instead:

		<?php if(is_archive()) : ?>
		    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
			    <?php the_post_thumbnail(); ?>
			 </a>
		<?php else : ?>
			<?php
			the_post_thumbnail();

			$caption = get_the_post_thumbnail_caption();

			if ( $caption ) {
				?>

				<figcaption class="wp-caption-text"><?php echo esc_html( $caption ); ?></figcaption>

				<?php
			}
			?>
		<?php endif; ?>

And, that’s a wrap!

---