How to Hide the Archive Title Prefix in WordPress

I don’t remember exactly when it happened but about a year ago WordPress introduced a prefix at the front of WordPress archive titles. This prefix is designed to give context to archives. For example it helps to distinguish between tag and category archives. Or more importantly between category and custom post type archives (such as a portfolio).

The problem is – a lot of website users don’t like this. It’s not very attractive, and makes the title a lot larger. One solution is to edit your theme code and display something else, but that’s not ideal since it will break when themes are updated.

With my own (recent) themes I have used a filter to wrap the prefix and apply some styles to it so that it integrates better with the rest of the layout.

Since I was asked about it again today I thought I would modify the code slightly and publish some simple code that can be used as a plugin to do the same thing.

https://gist.github.com/BinaryMoon/a1e21198261afa6d34c841187f728af0

What the code does is split the archive title by a :, the character used to separate prefix from the actual title, wrap the first part of the title, and then glue them back together. In this plugin I am using the ‘screen-reader-text’ class to hide the text. This is a class that’s marked as ‘required’ by WordPress and is used to hide text that should still be readable by screen-readers.

How to use this

To make use of the plugin save the raw php and upload it to your site. Once activated it ‘should’ just work. No options needed.

Stick it on the plugin repository already

The reason I haven’t made this an official plugin is that I know that WordPress will be wrapping the prefix in a span in a future update (you can see the trac ticket here). However because the WordPress release schedule has changed this year – I don’t know when the merge will happen.

Gotchas

One caveat with this is that it only works for left to right languages. It can be modified relatively easily to work with right to left languages, but I couldn’t work out an elegant way to make the code work nicely for both. I’d be happy to take suggestions for improvements if anyone can help improve this.

Something else to keep in mind is that this will only work when using 'the_archive_title' function. If your theme is older and uses some other method for outputting the archive title then it won’t work.

Related Posts

Tada: And now your website is faster!

Gutenberg Phase 2 and the Future of WordPress Themes

Ben

Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.