Have you ever wanted to give visitors a visual clue as to which category they are currently browsing through? With this tutorial, you’ll learn how to use CSS to highlight the current category the visitor is viewing!
STEP ONE
First, we need to create an unordered list and then use the WordPress function to display each category. Let’s use the following:
1 2 3 | <ul id="categories"> <?php wp_list_categories(); ?> </ul> |
STEP TWO
WordPress by default creates a class called current-cat for the current category being viewed. Knowing that, we can define some styling with CSS to highlight that current category. Here’s an example of what I use on this site:
1 2 3 | #categories li.current-cat a { background: #821122; } |
What that does is define a background color for the anchor tag if the list item has a class of current-cat. If you are viewing a category archive, WordPress automatically adds a class of current-cat to your list item. Now that you have styling in place, your category will be highlighted providing a visual clue to the visitor!
Keep in mind that the actual styling is entirely up to you and will vary depending on what your intended outcome is.
Share This:
