WordPress: How to remove the “Category:”

While configuring this blog, I thought about having a category segmentation, allowing me to have menus with each of them so that each user could pick the topics that interested them.

I created the posts, added the categories, and created menus that pointed to each of them. When the user wants to know more about “Opinion,” for example, I can show all the posts related to that. The template that I’m using even allows for neat navigation like “Home > Opinion.”

Awesome!

The issue is that in all pages I get the ugly title “Category: Opinion” like bellow:

I want to remove it, but I couldn’t find an option to do so. Some themes do support hiding this so, before going further, please check in the Theme specific settings if you can hide it.

After much digging, I found a few solutions that can help you.

Remove the “Category:” but keep the title

There’s an excellent explanation here in how to do this, but the gist of it is to add the following piece of code in your filefunctions.php. To do so just:

1. Log in with an account that has Administrator privileges
2. Go to Appearance > Theme Editor
3. Select Theme Functions
4. Add the following code to the end of the function

function prefix_category_title( $title ) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    }
    return $title;
}
add_filter( 'get_the_archive_title', 'prefix_category_title' );

5. Click Update File

You’ll get something like this:

Remove the “Category: ” and the title

Just follow the same steps as before but add the following code instead:

function prefix_category_title( $title ) {
    if ( is_category() ) {
        $title = '';
    }
    return $title;
}
add_filter( 'get_the_archive_title', 'prefix_category_title' );

And it will disappear completely.

CSS Solution

Both previous solutions work fine until the template needs to be updated. The update process replaces all your files, so any change that you do is lost. You need to do this again and again for each update, and this is not very convenient. The solution is to add a custom CSS to the Theme that you’re using:

1. Log in with an account that has Administrator privileges
2. Go to Appearance > Customize

3. Select Additional CSS

4. Add the following code:

.category .page-header { display: none; }

5. Click Publish.

That’s it. Quick and simple.

Bonus tip

You can apply this strategy to the “Author,” “Tags,” and “Archives.” Just follow the same steps and add the following code for each:

Author

.author .page-header { display: none; }

Tags

.tag .page-header { display: none; }

Archives

.archive .page-header { display: none; }

Have a suggestion of your own or disagree with something I said? Leave a comment or interact on Twitter and be sure to check out other tutorial-related articles here.

Photo by Michael Dziedzic on Unsplash