Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
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.
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.
Hi,
Thanks for the post – exactly what I am looking for.
You say to save the file and upload to your site. The plugin installer expects a zip file. How or maybe where do I upload this file?
Thanks,
Dale
You can zip the file and upload that through the plugin uploader, or you can upload it via ftp to /wp-content/plugins/
Very useful thanks, works fine and just what I was looking for.
Legend! Exactly what I was after too thanks!
Perfect. Thank you so much. Just implemented it and it worked straight off.
Worked for me, too! Thanks a million!
Is there any update to this elegant fix? It no longer works. :/
Hi Sandra – it still works for me. You can see it on my archives page: https://www.binarymoon.co.uk/category/general/
I’m not hiding the prefix, but I am wrapping it in a span so that I can style it (make it tiny and change the position). Not sure I can help without a bit more info.
Awesome fix, still working (and apparently necessary) in 2019.
I use the Astra free theme .. it doesn’t work for me 🙁
Sorry to hear that. You’ll have to ask the theme devs. They must be doing something custom with the category title.
I’ve not used Astra before so I can’t help unfortunately.
I love this solution! But quick question. How does one also remove the colon so that only the category name itself renders? When I use the plug in I get
: Category Name
Is there a way to remove the “:”?
Example:
https://www.brockportkramer.com/timelines/category/studying-history/for-majors-and-minors/
Thanks!
Do you have a copy of your function? You can stick it on gist.github.
From the html it looks like the code I posted has been edited and the colon has been put in a separate span so it’s being displayed. If it was in the screen-reader-text span then it would be hidden.
Thanks for this tip !
BTW, the ticket has been implemented in July 2020
Thee solution is straightforward: add the following function call in your theme XX_filter_archive_title
add_filter( ‘get_the_archive_title_prefix’, ‘__return_empty_string’ );
In chaplin
if ( ! function_exists( 'chaplin_filter_archive_title' ) ) { function chaplin_filter_archive_title( $title ) { (..) } add_filter( 'get_the_archive_title', 'chaplin_filter_archive_title' ); add_filter( 'get_the_archive_title_prefix', '__return_empty_string' ); }Thanks for the pointer! 🙂