trying to add an active class on a new page in wordpress.

Question

Trying to add an active class to a custom navigation on a new page in wordpress. It is a truly custom html bar, nothing is done through wp-admin panel.

<nav class="navbar navbar-default hidden-xs" id="mainnav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href="/">
            <img style="max-width:100px;" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/BB-logo@2x.png"" class="img-responsive">
        </a>
        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="nav-links active" href="/about-us/">About</a></li>
                <li><a class="nav-links" href="/programs/">Programs</a></li>
                <li><a class="nav-links" href="/partners/">Partners</a></li>
                <li><a class="nav-links" href="/media/">Media</a></li>
                <li><a class="nav-links" href="/portfolio-lander/">Portfolio</a></li>
                <li><a class="nav-links" href="/gallery/">Gallery</a></li>
            </ul>
        </div>

    </div>
</nav>

I have tried to implement this using javascript but it appears to no avail. It seems to be a standard practice of using tabs, however, I need to use different pages (essentially, it looks like I need to store the value of the active class?).

Here's my JS

jQuery(document).ready(function ($) {
  $(".current-menu-item").addClass("active");
  console.log("current Menu item");
});

Struggling to figure this one out.

Why not use WordPress's built in `wp_nav_menu()` to build out those links? Where is your HTML located? In a template? — disinfor, Jan 17 '18 at 23:53

AA-T · Accepted Answer · 2018-01-18T12:19:34.600

Change link color of the current page with CSS

There are a couple of scripts on this page, sounds like one of them might work for you:

With jQuery you could use the .each function to iterate through the links with the following code:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Depending on your page structure and used links, you may have to narrow down the selection of links like:

$("nav [href]").each ...

If you are using URL parameters, it may be necessary to strip these:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

This way you don't have to edit each page.

This is another one that might also work for you:

Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.

<script>
    currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
    currentLinks.forE‌ach(function(link) {
        link.className += ' active')
    });
</script>

Welcome to Stack Overflow! Please post what you think is the relevant code from your link and not just a link. Link only answers will generally get down voted and removed. — disinfor, Jan 18 '18 at 03:33
Thanks @AA-T . The jQuery solution worked best for me. Was not aware of the window.location.href. — user2026178, Jan 19 '18 at 13:23

trying to add an active class on a new page in wordpress.

1 Answers1