highlighting category in archive - Wordpress

Question

My Wordpress index/home page has all my posts on it. I have the following code which lists the categories on my page including an "all" since all the posts are listed on this page.

HTML

<?php
    $args = array(
    'show_option_all' => 'All posts'
    );
?>

<h3><?php wp_list_categories($args); ?></h3>

CSS - highlights 'all' in the list since its the page you're on.

li.cat-item-all a{
  font-weight: bold;
}

Each category link opens up the archive page with the posts tagged with that category.

I want this list to act as a navigation, with the category chosen 'highlighted' when you select it. Similar to how home would be highlighted when you're on the home page. But all the links link to the archive page so I'm not sure the coding

EDIT - output on home page

I want this to appear on my archives page, but with the category that they selected highlighted instead of 'ALL'

Post the HTML output of both. A demo of the page would be nice. — m4n0, Aug 11 '15 at 07:48
unfortunately it's on local-host so I can't demo the page, I'll post the output in my question as an edit — user3550879, Aug 11 '15 at 07:49
without markup it's quite impossible to give an answer, but you could use [CSS :not](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot) to exclude highlighting on 'all items' — maioman, Aug 11 '15 at 07:55
There is to much Wordpress involved to create a jsFiddle. I'm basically wondering if there is code that I can put on my archive page which will detect which category they are on and highlight it. Or something similar. — user3550879, Aug 11 '15 at 08:03
Try this? http://stackoverflow.com/questions/8829632/get-current-category-id-of-the-active-page — designtocode, Aug 11 '15 at 08:05
sounds like it's on the right track,i'll have to figure out how to use it — user3550879, Aug 11 '15 at 08:07
it should be something like `.archive .categories li:not(.cat-item-all)`, let me know if my guess is correct — maioman, Aug 11 '15 at 08:08
@maioman He wants to highlight only the current category. Your code will highlight all the other categories right? — m4n0, Aug 11 '15 at 08:09
I want to highlight just the category that the page is displaying, but I want all the other categories still listed. The current archive code just puts the title of the category that the page is displaying, but thats it — user3550879, Aug 11 '15 at 08:10
Upload your localhost files to a server, I can find you a easy solution. — m4n0, Aug 11 '15 at 08:13
Wordpress adds `current-cat` class to the current category `

score 0 · Accepted Answer · answered Aug 13 '15 at 15:31

When using wp_list_categories() by default the current category has a class of current-cat. So, your CSS would be:

.current-cat {
  font-weight:bold;
}

To get the 'all' "category" to highlight, you'd need to reference the body classes (so you know where you are, and can highlight the .cat-item-all link only when you're on the all-posts page). In my testing, that "All posts" link actually goes to my site home page, which has body classes of:

<body class="home page page-id-3745 page-template page-template-tmpl-home page-template-tmpl-home-php">

so the CSS to highlight .cat-all-items would be

.home .cat-all-items {
  font-weight: bold;
}

On your site the all-posts page might be your main blog page so the body classes would be slightly different - be sure to check.

highlighting category in archive - Wordpress

1 Answers1