Highlighting pages when clicking on child pages

I want my pages to be highlighted even when I click on the child pages.

Which pages? Where?

Thanks for the reply.

My main nav menu. I have a menu such as:

home | about | services | events (blog page) | donate | contact

Then as childs as such: (the childs are not drop downs off of the main menu, they are separate wp_nav_menu)

about: 5 pages (template pages)
services: 3 pages (template pages)
events: which is my blog (which when I click on an individual post, my highlight goes away as well)
donate: 4 pages (template pages)
contact: 1 page (template page)

Each of the parents have there own template page and I have created a sidebar for each one (example: sidebar-about for the about page, sidebar-services for the services page) where each of the nav menus exist (ex: about sidebar nav menu is in the sidebar-about, and so on).

I have it set up by using .current_page_item to highlight the page I am on when I click on a page. Which works for the main pages. But soon as I click on a child of that specific page (clicking in the sidebar nav menu), the highlight in the main menu goes away.

As stated above, I have lurked and searched for solutions, and have found the .current_page_ancestor solution from almost every post. But when I us it in my css like this:

#main_nav ul li.current_page_item a,
#main_nav ul li.current_page_ancestor a {
text-decoration: none;
font-size: 20px;
color: #ffffff;
background: url(images/homesprite.png) no-repeat -285px -376px;
height:76px;
width:136px;
}

It does not work.

I have it set up so index.php is my actual home page, and home.php page is my blog page (which I have called events page).

Sorry for not giving more info, extremely frustrated as I have missed a deadline for the site for a client and I still have no answer for it.
Really can’t upload a site with no links highlighted. Not very good ux

cheers,
Jay

Well first thing, If you are trying to highlight the background, you got it all wrong. Your CSS is only for the link and only when they are active. No hover, no nothing.

Second, use something like this to style your manually inserted pages.

<ul>
 <li<?php if ( is_home() || is_single() || is_search() || is_archive() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <?php wp_list_pages('depth=1&title_li'); ?>
</ul>

or you can use the page id like is_page('45')

or use array to include page ids like <?php wp_list_pages('include=590,482,438,132,456,776&title_li='); ?>

Or a million other ways ??

That is working for my main nav menu staying highlighted when I click a child, thanks.

But…

Now the main menu is showing 2 home pages, and the order which it is showing the actual pages (about, contact, donate events etc) is in alphabetical order. Which is what it is in the admin pages section.

Also when I click on the events page, which is my blog page (home.php) it highlights the home page on the main nav menu.

And when I click an individual post it jumps from the events link highlighted(which is my blog page) to the home page highlighted.

I have made a static page for my home page and named it main.php, and my blog is on the home.php page under just a default template.

Still quite confused.

cheers,
Jay

Jay,

Try this:

<ul>
<li<?php if (is_page('209')) { echo ' class="current_page_item"'; } ?>>
<a href="https://yoursite.com">Home</a></li>
<?php wp_list_pages('include=590,482,438,132,456,776&title_li='); ?>
<li<?php if (is_single() || is_archive()) { echo ' class="current_page_item"'; } ?>></a></li>
</ul>

Change the 209 to your static home page ID. Also change the other ID’s to the pages you want to show and highlight.

Also add is_archive(), is_search(), is_single(), … to give the current page class wherever needed.

Now for the css, you need to edit your current page class to whatever you want.

Look at this site here for example, I had to make a very long menu on the right, yet i wanted it to be highlighted as well. But i wasn’t using the WordPress navigation. It’s the same concept.

https://www.form1023.org

Hope that helps.

One more thing, get rid of whatever other code you have that’s calling the navigation, that’s why you have two home page.

P.s. If the site is live, a link would help as well.

Thanks a bunch man. It still was loading up my nav in order that the pages were numbered. So, maybe the entirely wrong fix, but I deleted each static page and created them again in order I wanted the nav in, and it worked.

The archives and single posts aren’t highlighting the events, but it sure is much better.

thanks a lot shirazdrum!

cheers,
Jay

Jay,

The singles won’t highlight because they have no representatives on the navigation menu other than the index. However if you have category pages, you can highlight them when showing posts in those categories. Another dirty fix would be to list everything under one category in addition to their original categories and use it as an index.

Here’s an article to play around with:

https://webdesignerwall.com/tutorials/wordpress-theme-hacks

/* top navigation menu */
     /* wp_nav_menu( array(
	'theme_location' => 'primary',
	'menu_class'     => 'menu',
	'menu_id' 	      => 'menu',
	'container' 	  => false
 );*/

its my menu code
dynamically i am adding cat , tags , pages to menu from admin
how i can add clicked actve class.or any idea.