WordPress.org

1. tylerhauser
   Member
   Posted 5 years ago #

   I am having a ridiculously difficult time making this work. I have a menu at the top of my site comprised almost entirely of categories (using wp_list_categories). When a user selects one of the categories, I'd like that category to be highlighted in the menu. At the same time, I have a Home link as well and I'd like it to be highlighted as well, when selected.

   So far, nothing I've tried has made this work. Neither the category nor the home page links get highlighted when selected.

   TwoWordHeap.com
   Using Arcsin's theme called Natural Essence. It wasn't initially set up to list categories.

   Can anyone help out?

2. lindseyh
   Member
   Posted 5 years ago #

   I am having the exact same problem as well. If I find a solution I will let you know.

3. tylerhauser
   Member
   Posted 5 years ago #

   Excellent. Thanks lindseyh.

4. tylerhauser
   Member
   Posted 5 years ago #

   Is anyone able to help me out?

5. Jeremy Clark
   Moderator
   Posted 5 years ago #

   This might get you own your way.

6. Alex Cragg
   Member
   Posted 5 years ago #

   i have this functioning on my site using the fold page list plugin. but in effect im sure it works the same.
   at the start of my list, after the <ul> i have placed `<?php
   $pg_li="page_item";
   if (is_home()) {$pg_li .=" current_page_item";}
   ?>`
   this asigns the current page item the class current_page_item(!)
   do this first then view your source, you should see that whichever page you are on now has this class, and all others have page_item.

   now you need to assign the current_page_item class some css, i have had to include some !important tags to overrule some others, so that it functions how i wanted, in my case so that a parent page is highlighted when on that page, but any child pages remain unhighlighted. then when you click on a child page, this and only this page is highlighted, and the parent page returns to its normal colour.

   the css i used is as follows
   

   .current_page_item a {color: #ffffff !important; background: #B40000; }
   .current_page_item ul li.page_item a {background: none; color: #50709A !important; }                                     .current_page_item ul li.page_item a:hover {background: #B40000; color: #ffffff !important; }

   this also includes some hover effects. you will need to change the colours to fit your theme.

   hope this works for you both

7. tylerhauser
   Member
   Posted 5 years ago #

   Thanks everyone!

   Although I managed to solve my problem it wasn't necessarily due to advice you gave me. I never even thought to check my site's source until EPICALEX mentioned it. I immediately checked my source and discovered that my current page item class was actually "current-cat" versus the WordPress default of "current_page_item". I modified my CSS and PRESTO! it worked. I have no idea why the assigned class is "current-cat" but really, that's ok by me.

   To get the homepage link to get highlighted when selected, I used a modified version of Gudstoff's dynamic menu highlighting "tutorial".

   All in all, I'm happy.

   Thanks again, everyone.

Topic Closed

This topic has been closed to new replies.