Remove Archive Title Prefix on Twenty Twenty One Theme

Previously I mentioned I was going to take a look at the Twenty Twenty One Theme (hoping it would help me getting ready for the Twenty Two, because things are changing “so fast!”) and for what I saw, the first thing you might want to get rid of is the archive title prefix which cannot be hidden with CSS.

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 We Can Do With the Twenty Twenty One Theme

I must confess… I remember a thread we had here with @Iqbal about using or not the Twenty Twenty One theme, where I said, something like “not gonna happen here” and now I feel like… 🤦🏻‍♀️

In the style sheet, the authors present the theme as a “blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds (…)”

Which means: there’s plenty to do with CSS, and I’ll get back to it probably with a course; but since it is such a great blank canvas, I went straight to create a child theme in a couple of days and installed it at nkotb.blog; there’s a lot to fix, but head over there and get behind the scenes with the Developer Tools, because you might get some ideas. For example:

I created templates for post formats, which is actually not necessary unless you want to add more elements to the post. You can create a new layout with grid, in a blink of an eye; I wanted to have excerpts, so that’s why I created the templates.

Now, let’s get to the prefix issue.

How to Remove the Prefix “Category and Tag” in Archive Pages

I still wonder, Why do they keep adding the prefix “Category:” and “Tag:”? We all want to remove them!

Anyway… In the Twenty Twenty One, there’s no selector to hide it with CSS…

…. But! there’s a new hook: get_the_archive_title_prefix() which allow us to get rid of the prefix; it was actually introduced with WordPress 5.5.

Needless to say, this goes in your functions.php file.

The Hook Explained

Step 1: create your function saying that your gonna give (a new value for $prefix)

Step 2: say that if ("prefix" is identical to "Category: " or identical to "Tag: ") – as it happens in the Twenty Twenty theme – { prefix equals to nothing }

Step 3: return the prefix

Step 4: add the filter (the hook, name of your function)

Was that clear?

Tip: When you’re creating functions, remember to add your initials (as I do with “ly”), just to be safe

The Snippet

// Remove Category and Tag Titles
// https://developer.wordpress.org/reference/hooks/get_the_archive_title_prefix/
function ly_remove_the_archive_title_prefix($prefix) {
  if ($prefix === 'Category:' || $prefix === 'Tag:') {
    $prefix = '';
  }
  return $prefix;
}
add_filter('get_the_archive_title_prefix', 'ly_remove_the_archive_title_prefix');

Wrapping It Up

There are more ways to do this, to remove the archive title prefix with this hook.

In the example mentioned above, we are only removing “Category” and “Tag” using the three equal signs (which in PHP means “identical“) Bear in mind, for instance, the archives for “months”, which in this theme also use the title prefix.

And, check the get_the_archive_title_prefix() at WordPress, if you’d like to find out more; coders post examples from time to time.😉

Happy coding!