Style the First Word of WordPress Category Titles

WordPress Logo

Posted on April 4, 2015 in Development

One of my latest WordPress projects required a differently styled first word of category titles (as they appear on the frontend of the site). While there are CSS rules that can be used to style the first letter of a word or the first line of a paragraph, there unfortunately is not an equivalent to style the first word of a line of text. It could be achieved with a bit of jQuery magic, but a preferable solution is to use WordPress filters and pre-process the category title before it is displayed on the page.

The below code, which should be put into your theme’s functions.php, will wrap the first word of the category titles in a <span> tag. You can then apply different CSS styling to the span, making the first word of the category title look different. The code could be easily modified to add different tags into the title or change it in some other way.

Once you have added the above into your functions, simply call the 2nd function in your theme’s template files to output the modified category title (e.g. in category.php):

If you are using WordPress 4.1+ and the_archive_title() function in your template file to display the archive title based on the queried object, you can leverage the get_the_archive_title filter instead. You can remove the pixelninja_single_cat_title() function from functions.php and instead add the code below:

Enjoyed this post? Share it with others.
Email this to someoneShare on FacebookShare on Google+Tweet about this on Twitter

Leave a reply

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