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.

Heads up! You need a child theme to work with this post. Check out what you need and how to create one in a couple of minutes at the Toolkit.

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…

Checking with the developer tools, we can see that the archive title prefix doesn't have a selector
screenshot from theme’s demo

…. 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!

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

1 comment

  1. Hi Laly, thank you for mentioning my name on this post 🙂

    Now I am using Twenty Twenty One (after several times change between Twenty Twenty and Twenty Twenty One) on my primary blog (diakhir.blog) which is hosted on WordPress.com. Now I am eagerly waiting for the Twenty Twenty Two.

    I agree with you that WordPress is changing in a big way, and if we want to continue having control of our blog / website, we’ll need to stay up to date with the new features.

Any thoughts?

%d bloggers like this: