CODEWITHSUNDEEP
phpjquerywordpressnavigation
Benjamin Hutchinson
Benjamin Hutchinson

Reputation: 53

highlight current page in custome nav bar wordpress

i am trying to highlight the page i am in this is what i have so far

<ul class="navigation list-unstyled components">
    <li class="active">
        <a href="<?php echo site_url(); ?>">Home</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/contacts">Contacts</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/aboutus">aboutus</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/aboutyou">aboutyou</a>
    </li>
</ul>

Here is the only jquery I have tried so far, but it doesn't seem to work:

$(".navigation a").on("click", function () {
    $(".navigation ").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

Upvotes: 1

Views: 31

Answers (1)

Azer
Azer

Reputation: 1288

If you're building a standard WordPress website, then your pages will reload when you click a navigation link, so even if you set the class with jQuery it will be reset on page load.

What you should do is to set the class of the navigation elements in PHP.

This code is just a mockup, please adjust it to fit your needs:

$home = is_front_page();
# Checks if it's the site front page

$contacts = is_page('contacts');
# Checks if the current page is a page called 'contacts'

$aboutus = is_page('aboutus');
# Checks if the current page is a page called 'aboutus'

$aboutyou = is_page('aboutyou');
# Checks if the current page is a page called 'aboutyou'


    <ul class="navigation list-unstyled components">
                <li <?php if ($home) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>">Home</a>
                </li>
                <li <?php if ($contacts) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/contacts">Contacts</a>
                </li>
                <li <?php if ($aboutus) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/aboutus">aboutus</a>
                </li>
                <li <?php if ($aboutyou) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/aboutyou">aboutyou</a>
                </li>
            </ul>

Upvotes: 1

Related Questions