Category and tag pages in WordPress are a collection of posts that fall under those categories or tags. They’re also known as “archive pages” and share the same characteristics as other pages with collections of posts like date based archives. In this article, we’re going to look at a very specific problem that some users might have on archive pages – namely changing the header title that’s displayed at the top.

The Problem

Here’s a demonstration on my test blog of two archive pages – one for the category and one for the tag.

Here’s the screenshot for a category called “Rights and Freedoms”:

And here’s one for a tag with all the reviews of books from Isaac Asimov’s “Foundation Series”:

You can see that both these archive pages have title text on the page that says:

  • Category: Rights and Freedoms
  • Tag: Foundation Series

This is the standard format for archive pages. We have the name of the archive like “Tag”, “Category”, “Month”, “Year” etc, followed by a semi colon and the name of the specific taxonomy being displayed. This works great for most blogs, but some people might have a different set of requirements. You might decide that you want to do away with the archive name and only want the title of the category or tag instead. Say your site is displaying a list of products under a particular tag, it doesn’t really look very nice to have the word “Tag” before the description.

Two Solutions: CSS (bad) and PHP Code (good)

Using CSS:

The first unsatisfying solution is to simply hide the text via CSS. With CSS, you can’t change the text, but you can prevent the browser from displaying it. To do this, we need to get the CSS class information from the browser. Unfortunately, different themes might implement this in different ways. The only sure solution is to use your browser’s development tools. Like in Chrome, right click on the title and select “Inspect”. On my blog with the TwentySixteen theme, we get this:

We see that there are two classes which apply to the title. So we can use the following custom CSS:

.page-header{
    display:none;
}

or

.page-title{
    display:none;
}

Unfortunately, this solution has three major problems:

  1. You can’t change the name of the title.
  2. It’s not a “one size fits all” solution. It depends on the theme
  3. You can’t decide which categories and tags to use it on.

For a real solution, we need to use PHP.

A PHP Solution:

Open up your functions.php or wherever you place you custom PHP code and paste in the following:

function display_only_the_titles( $title ) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    } elseif ( is_tag() ) {
        $title = single_tag_title( '', false );
    }  
    return $title;
}
 
add_filter( 'get_the_archive_title', 'display_only_the_titles' );

If you don’t know how to add code to  WordPress like this, check out my earlier tutorial on the same. The code above removes the “Category” or “Tag” words from the archive and displays them like this:

For categories:

Change the Category Title Text

For tags:

This is a much better solution than getting rid of the text altogether! In addition, you can use conditional clauses to fine tune this by choosing to remove the text only on specific categories or tags. This code also retains the archive name for other archives like “Month”, “Year” etc, though you can see how we can change that as well. Using PHP, we can customize a solution exactly to our liking without having to nuke the entire text for all archive pages like we do with CSS.

So even though setting up your WordPress site for custom PHP code requires a little bit more work compared to pasting CSS, the benefits are totally worth it in the long run.

tracking pixel

Is your website slow?

Enter its URL below to find out now:

About the Author

Bhagwad Park

Leave a Reply

Your email address will not be published. Required fields are marked *