WordPress archive/category page

MMP 460 > Week 6

Archive pages in WordPress are used to show all of the pages in a particular category, time period, tag or other distinction. Since we have already created categories in our blog such as Design and Code, we can use archive.php to layout the category page.

The template for a category page doesn't exist yet, so we're going to write it ourselves. Don't worry, it's simple, we can get most of the components we need from other sources.

Let's look at the header section of the archive page:

<header class="page-header">
	<?php
		the_archive_title( '<h1 class="page-title">', '</h1>' );
		the_archive_description( '<div class="archive-description">', '</div>' );
	?>
</header><!-- .page-header -->

I don't really need to see the word "Category", so let's replace the_archive_title with single_cat_title.

We can get rid of the content template. We're going to use a thumbnail instead.

get_template_part( 'template-parts/content-search', get_post_format() );

We do need the title of the post with a link, so let's grab that from the template/content.php:

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

To get a thumbnail for the post, first we need to set the featured image, then we can use the function the_post_thumbnail();.

The featured image is not part of the main post content, so it can be an image from the post or something else.

Our theme supports post thumbnails, but it doesn't set the size. We can do this in functions.php on line 43 where we see the first line for thumbnail support:

add_theme_support( 'post-thumbnails' );
// add support for different sizes:
add_image_size('thumb', 200, 200, true);
add_image_size('feature', 960, 9999, false);

Now we can add an argument to the_post_thumbnail(); in the archive.php template:

the_post_thumbnail('thumb');