How to Get Clickable Images on Archive Pages, for the Twenty Twenty Theme

One important thing is missing from the Twenty Twenty Theme: clickable images on Category and Tag Pages. Let’s do it!

Up to this point, we’ve been customizing the Twenty Twenty Theme with CSS only; now it’s time to go further – as we said before – with a Child Theme.

Requirements:
1) The Twenty Twenty Theme installed on your blog;
2) and downloaded in your computer (to use as reference);
3) A Child Theme, which you can create in a couple of minutes;
4) A Text Editor (if it’s for coding, better yet)

With this post we’re going to start customizing our Child Theme, by doing something very simple that will allow us to start learning a little bit of everything: WordPress Hierarchy, WordPress tags and PHP.

The Road to Take

A theme is like a puzzle; therefore, 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 our case)

Today, I’ll show you the road so you can see how easy it can be to follow your own roads 😉

How Does the Twenty Twenty Theme Renders the Archive Pages?

The Twenty Twenty Theme does one special thing: it uses one file to display: 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 these files 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

We only have 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, show me a clickable image.”

How do I Get to the Featured Image?

Open your Twenty Twenty Theme folder (the one saved in your computer), and:

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.

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)

So, we open featured-image.php, and at line 25 we finally find it:

the_post_thumbnail();

By taking this road, we know that this image is going be shown everywhere except on the search results. Now, we need to say: only if it’s an archive page (category or tag) show it clickable.

Let’s Start Coding

  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
Screenshot of a Child Theme Folder with what we added

Open the file. Take a look at lines 24 to 36; it’s asking for the image (the post thumbnail; it’s defining the caption and showing it 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:

		<?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!


Further reading (from the WordPress Codex)

Any thoughts?