Category lists and the 404 page

As news posts pile up, requests like “I only want to see the event articles” start to come. Let’s sort the posts by category and build by-category list pages. Along with that, we’ll build a 404 page to guide people who land on a URL that doesn’t exist, and wrap up the template chapter.

Sorting into categories is done in the admin screen

First, prepare the materials. In the admin screen’s “Posts” → “Categories,” create classifications that fit Shimaenagado.

• News (day-to-day announcements)
• Event (fairs, workshops)
• Media (magazine features, and so on)

Edit your existing posts and reassign the categories from the panel on the right.

Show category chips in the list

First, display the category name in the home.php list. It’s just one line added inside the loop.

<li>
  <time><?php the_time('Y.m.d'); ?></time>
  <span class="cat"><?php the_category(', '); ?></span>
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

the_category(', ') is a function that displays a post’s categories with links. The destination of these links is the by-category list we build this time. The ', ' in the parentheses is the separator—when you attach multiple categories to one post, it lines them up with this character, like “Event, Media.” Leave it empty and the links are laid out as separate <li> items instead.

.cat {
  font-size: 12px;
  flex-shrink: 0;
}
.cat a {
  background: #eaf4f6;
  color: #2a6f7c;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: bold;
  text-decoration: none;
}

category.php—the category-only list

Click a category link and the URL takes a form like /category/event/, with category.php in charge. This time, along with 404.php, we create two new files.

shimaenagado/
├── 404.php        ← create this now (later)
├── category.php   ← create this now
├── footer.php
├── front-page.php
├── header.php
├── home.php
├── index.php
├── page.php
├── single.php
└── style.css

The contents are almost the same as home.php, changing only the heading to “which category am I looking at right now.”

<?php get_header(); ?>

<h1 class="page-heading">
  <?php single_cat_title(); ?> News
</h1>

<main class="section">
  <ul class="news-list">
    <?php while (have_posts()) : the_post(); ?>
      <li>
        <time><?php the_time('Y.m.d'); ?></time>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; ?>
  </ul>
  <div class="pagination"><?php the_posts_pagination(); ?></div>
</main>

<?php get_footer(); ?>

single_cat_title() produces the name of the category currently being displayed (“Event,” and so on). The narrowing-down itself is done automatically by WordPress from the URL, so the template side just runs the loop—this is a scene where the convenience of the main loop really shows.

404.php—the lost page is within your own theme’s scope too

The “page not found” screen for when someone lands on a URL that doesn’t exist is also the theme’s responsibility. Without it the display is plain, so let’s put out some guidance in Shimaenagado’s style.

<?php get_header(); ?>

<main class="section" style="text-align: center;">
  <h1 class="page-heading">Page not found</h1>
  <p>The page you're looking for may have been moved or deleted.</p>
  <p><a href="<?php echo home_url(); ?>">Back to the top page</a></p>
</main>

<?php get_footer(); ?>

To check, just type a nonsense URL like (site URL)/aaa into the browser’s address bar. Success if your own 404 shows up.

Summary of this lesson

1. Sorting into categories is done in the admin screen, and the by-category list’s look is category.php—the narrowing-down is done automatically by WordPress
2. Use the_category() for the chips and single_cat_title() to display “the name of the classification you’re viewing right now”
3. 404.php is within your own theme’s scope too—give lost visitors a way back to the top