Highlighting the current page menu item cont.

JimR · 2017-10-18 11:13:14

I'm using Backlight with the WordPress Theme add on. I created my page template and that's now the theme I'm using in WordPress. Everything is coming along nicely. Great stuff!

All of my page (Home, Bio, Contact, etc) are WordPress pages. They're created and managed by WordPress.

There's one directory, Photos, and all of it's sub-directories are managed entirely by Backlight.

WordPress manages menus slightly differently than BackLight. I've just about worked out all of those details (e.g. you have to recreate all the menus in both places, and a few slight tweaks to the CSS to make it all match).

Here's a difference...

WordPress will automatically add a class <current_page_item> to the currently selected menu. That's nice, because you simply define the CSS and you've got the current menu highlighted.

To replicated this in Backlight, there's the code from Rob and Ben. This inserts the class <selected> into the currently selected menu managed by Backlight. The only change I made was to change the calls <selected> to <current_page_item> so it matches the CSS I have for the WordPress pages.

Rob's code works fine, but Ben's caused odd problems. I'm sure it works for Ben and everyone else. So here's what's maybe different for my environment.

All the menus and pages are managed by WordPress (and the Backlight theme), except my Photos menu. That is a page, plus has 10 page below that, created in LightRoom. The Photos menu has sub-menus for each of those pages (separate Albums under the main Photos page).

Rob's code always does "the right thing." It highlights the menu item I had selected including the current sub-menu.

Ben's code acts strangely. I've tried both his options including the alternate that would highlight the top level menu when a sub-menu was selected. It's so strange I gave up trying to figure out what's going wrong. It seems it might be functioning correctly (maybe) but the simple CSS is going badly. The menu items get the wrong or a strange mix of CSS. All I can say is it must be an interaction with WordPress, the Backlight theme, and Backlight itself.

I wish Rob's code has the same feature of Ben's, where a selected sub-menu under Photos, would highlight the top menu item Photos.

I guess I'm asking for a hint. How do I enhance Rob's code to highlight the parent menu (Photos) when one of it's sub-menus had been selected?

Daniel Leu · 2017-10-18 13:08:11

It would be helpful if you post Rob's and Ben's code, or at least a link to their respective posts. The easier you make it for someone to look at the code, the more likely it is to get a solution.

Ben · 2017-10-18 13:12:03

Hi Jim, it's been a while since I looked at the 'selected' code. Can you point you point me to where you've found both Rod and my solution?

rod barbee · 2017-10-18 13:22:26

I think it's probably this from the Tips & Tricks forum
http://community.theturninggate.net/vie … hp?id=7246

Ben · 2017-10-18 19:02:51

Thanks Rod. Jim, do you have a site where we can see how my version of the code is behaving oddly?

JimR · 2017-10-21 06:19:49

Ben wrote:

Thanks Rod. Jim, do you have a site where we can see how my version of the code is behaving oddly?

Thanks Ben. I have my staging site at a point now where I can have you look at it. It's mostly dummy content (it's about me, a dummy). It's 85% done. The core structure and functionality are stable. I'm still working on the CSS and a few other details.

I don't want my staging site picked up by search engines or some crawler. You can reconstruct this URL. stage dot reekes dot net to see the staging site.

This is a Backlight created WordPress theme. All of menus are controlled by WordPress, except the Photography menu. Everything under Photography is Backlight (and thus PHP Plugins).

When WordPress selects a menu, it add the <current_page_item> class to the <li> menu item. All you have to do in WordPress is define the CSS for <current_page_item>.

The PHP script targets the <a> tag of the URL link, within the <li> menu. So the CSS is different. Here's how I defined it so I pick up both cases.

a.current_page_item, .current_page_item a {
	background-color: rgba(150, 150, 150, 0.5) !important;
}

For the Backlight (Photography) menu I'm using the function you shared. The only change I made was to use the <current_page_item> class.

function ttg_scripts( $style, $path ) {
echo <<<SCRIPT
	<script>
		$(function() {
$("ul.menu a[href='" + window.location.pathname + "']").addClass("current_page_item").parents('li').children().addClass('current_page_item');
		});
	</script>
SCRIPT;
} // END

If you go to the site you'll find that the WordPress menus are working as expected. But when I choose the Photography menu, or any of its sub menus, every menu gets highlighted.

I haven't looked at debugging the PHP. This is an area of the code I'm not familiar with. Hopefully you'll quickly find a solution.

Matthew · 2017-10-21 11:39:49

Looking at your jQuery, you're :

1. finding the A tag with the current URL and applying the "current_page_item" class.
2. finding all parents' LI tags, then adding the "current_page_item" to their children.

In #2, in the case of sub-menus, the child is a UL tag, and so the entire UL is having the background applied.

Instead of parents(), you might want to try parentsUntil('.menu'). And for children(), you probably should specify a targeted tag type, i.e. children('a')

JimR · 2017-10-25 07:01:15

I haven't coded with jQuery before, and only read a few things to get me started. After some hacking I found the code below is working. That is, it highlights the currently selected sub-menu under Photos and then the parent menu Photos.

The <current_page_item> class is being added to the <a tag>.

I'd much prefer the <current_page_item> class was added to <li> tag. Then it would match the behavior of WordPress, and my CSS would be consistent.

After continuing to hack away, I'm not getting any closer.

BTW One of the odd things I can't explain is how <current_page_item> is added to the parent menu when the sub-menu is selected. I suspect that's another clue to my problem.

Menu structure created by Backlight

<ul class="primary-menu menu mouseable">
<li class="menu-item"><a href="/">Home</a></li>
...
<li class="menu-item menu-item-has-children"><a href="/photos/">Photography</a>
<ul class="sub-menu">
   <li class="menu-item"><a href="/photos/01-slug/">Item A</a></li>
   <li class="menu-item"><a href="/photos/03-slug/">Item B</a></li>
   <li class="menu-item"><a href="/photos/04-slug/">Item C</a></li>
   <li class="menu-item"><a href="/photos/about-my-photography/">About</a></li>
 </ul>
 </li>
</ul>

Script added to PHP Plugins

function ttg_scripts( $style, $path ) {

echo <<<SCRIPT
	<script>
		$(function() {
$("ul.menu a[href='" + window.location.pathname + "']").parentsUntil('menu-item-has-children').children('a').addClass('current_page_item');
		});
	</script>
SCRIPT;

} // END

Matthew · 2017-10-25 15:45:56

I think this does what you want.

	<script>
	$("ul.menu a[href='" + window.location.pathname + "']")
		.parentsUntil('.menu', 'li')
		.addClass("current_page_item")
		;
	</script>

JimR · 2017-10-26 00:29:35

Matthew wrote:

I think this does what you want.

Ha! Yes, thank you. Exactly what I was trying to do

I was so close so many times, but never got the selector and filter right.

Matthew · 2017-10-26 15:30:58

Cool. First time I've used the parentsUntil() method, so that's fun for me.

Community @ The Turning Gate

#1 2017-10-18 11:13:14

Highlighting the current page menu item cont.

#2 2017-10-18 13:08:11

Re: Highlighting the current page menu item cont.

#3 2017-10-18 13:12:03

Re: Highlighting the current page menu item cont.

#4 2017-10-18 13:22:26

Re: Highlighting the current page menu item cont.

#5 2017-10-18 19:02:51

Re: Highlighting the current page menu item cont.

#6 2017-10-21 06:19:49

Re: Highlighting the current page menu item cont.

#7 2017-10-21 11:39:49

Re: Highlighting the current page menu item cont.

#8 2017-10-25 07:01:15

Re: Highlighting the current page menu item cont.

#9 2017-10-25 15:45:56

Re: Highlighting the current page menu item cont.

#10 2017-10-26 00:29:35

Re: Highlighting the current page menu item cont.

#11 2017-10-26 15:30:58

Re: Highlighting the current page menu item cont.

Board footer