Applying class of 'Active' to current page menu item with esc_url

Question

I'm trying to apply a class of 'active' to the current page's corresponding menu item. I've never had this issue before/have spent hours reading similar questions to no avail and I assume it has something to do with using Wordpress's esc_url for my menu links but I can't figure out why this isn't working... My jQuery can't seem to match the urls. When I'm on Page1 I want to apply a class of active to the corresponding li and so on and so forth. This is a multi-page website. Any ideas? I'm using FoundationPress, a Wordpress boilerplate for Foundation.

<div class="top-bar" id="main-menu">
  <div class="mobile-bar mobile">
    <ul class="menu vertical dropdown text-center" data-dropdown-menu>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page1' ) ); ?>">Page 1</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page2' ) ); ?>">Page 2</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page3' ) ); ?>">Page 3</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page4' ) ); ?>">Page 4</a></li>
    </ul>
  </div>
</div>

<style>
.menu > li {
display: inline-block;
padding:0 1em;
}
</style>

<script>
$(document).foundation();

var href = location.href;
 var pgurl = href.substr(href.lastIndexOf('/') + 1);
   // match all the anchors on the page with the html file name
   $('.menu a[href="' + pgurl + '"]').addClass('active');
</script>

Have you checked in console if pgurl has correct value? Have you considered using WordPress' builtin function to create menus? — Piotr Kliks, Oct 29 '16 at 19:57
@Piotr Kliks Thank you for the quick response. I have considered using Wordpress' built in function but it's bothering me that I can't solve as is because I would like to understand the error better. How do I check if pgurl has the correct value using console? Using alert to show me pgurl on page load shows me no url... adding 'name' after / in that string outputs name/(page I am on) — Polemistis D'Gnosis, Oct 29 '16 at 20:13
console.log(pgurl) will print this in console (you can open console in browser pressing F12) more info here: http://www.w3schools.com/js/js_output.asp try changing `substr` to `href.substr(0, href.lastIndexOf('/') + 1);` — Piotr Kliks, Oct 29 '16 at 20:28
@PiotrKliks Thank you for teaching me that. So it turns out my code was wrong and with your new substr it is outputting the correct url. But still it is not applying an active class to the corresponding menu items... I'm thinking the rest of the code might be wrong... hm... — Polemistis D'Gnosis, Oct 29 '16 at 20:37
Check if values in href="" are the same as in pgurl, maybe there is missing slash or something else. — Piotr Kliks, Oct 29 '16 at 20:48
@PiotrKliks I think you are right. Strangely out of the hundreds of links I clicked, I tried the solution found here: [link] (http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu) and it solved my problem! Thank you for your help. I wish I understood a bit more about jquery/javascript to understand why this worked but I have a feeling you are on the mark when you said there might be a missing slash. — Polemistis D'Gnosis, Oct 29 '16 at 20:56

score 0 · Answer 1 · edited May 23 '17 at 10:34

Ultimately the answer can be found using this bit of code instead:

var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    // now grab every link from the navigation
    $('.menu a').each(function(){
        // and test its normalized href against the url pathname regexp
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('active');
        }
});

Link to original poster who solved this - please upvote him! link

Applying class of 'Active' to current page menu item with esc_url

1 Answers1