Setting an active menu item based on the current URL with jQuery

Hey!!!
I recently created a custom navigation menu for my woocommerce product page that allows my users to filter through products depending on the category they select. However, when they select a category and the page loads, the link they click doesn't get active.

I know that if I insert ".current-cat a { font-weight: bold; } into my css it will make the default woocommerce category link bold but because I created a custom nav I am having a hard time getting this to work.

Below I have made an example:
Categories

  • Category One
  • Category Two
  • (This Link In Bold If The Page Is Active)

  • Category Three
  • Category Four
  • Category Five
  • What do I need to do in order for the link to be bold once my user clicks on it and the page is loaded?

    • Rupok

      Hi Madeline, thanks for asking.

      As you said "when they select a category and the page loads, the link they click doesn't get active", does the page refreshes and opens again or it just loads content with ajax call without refreshing the page? If it loads the content without refreshing the page, then you can simply add a class to the menu item which was clicked. To know how to do this, you can check this StackOverflow answer: http://stackoverflow.com/a/3566864/2808424

      If your page refreshes, then does it update the URL with that category slug or it loads new content on same URL? For either ways, it can be done but will require huge advanced custom coding. Actually I could tell you better if I could see that page and the process live, make some tests there. Can you please provide me the link where I can see that live? I believe, I'll be able to give you better suggestion then.

      I'm looking forward to hear from you and resolve this issue as soon as possible.

      Have a nice day. Cheers!
      Rupok

    • Madeline

      Hey Rupok!

      When the page refreshes the URL updates to the category product slug.

      The site isn't live yet because I a building it on a localhost server. Do you have any articles, posts, discussions regarding this? If not, you could always include some example code that would help me understand better. I have been trying to resolve this for the past couple of days now and still cannot figure it out.

      Thank you!
      Madeline

    • Kasia Swiderska

      Hello Madeline,

      It is hard to include example code without seeing your code and its output. You wrote

      I recently created a custom navigation menu for my woocommerce product page that allows my users to filter through products depending on the category they select.

      Can you share with us how you created that custom navigation? Does urls in that navigation links can be compared with actual urls of the category pages? Do they have a class for category slugs?

      I can guess that you could grab url of the current site - extract from it slug of the category, put it to variable in jQuery script - then if links have that slug anywhere add class "current" and then style it.

      So, you can grab current url with that

      $url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

      then explode url with http://php.net/manual/en/function.explode.php so it will be split into pieces - urls have the same scheme so you will be able to always get slug of category in the same place.

      When you have slug, you can add class depending on href - here is tutorial on how to do that http://stackoverflow.com/questions/15879130/jquery-add-class-to-href-if-link-contains-specific-text

      I can be wrong with my way, but this is because I don't see your code and how it works.

      kind regards,
      Kasia

    • Madeline

      Hi Kasia,

      Below is some of the code that I have written for the sub nav menu. I inserted into my header.php theme page so that it is dynamic throughout my entire site. I have also included jQuery and Bootstrap js/css within this code.

      <div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <div class="pull-left">
                              <a class="btn menu" href="/products/all-products">All</a>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/products/product-category-one">Category #1</a></li>
                                       <li><a href="/products/product-category-two">Category #2</a></li>
                                       <li><a href="/products/product-category-three">Category #3</a></li>
                                       <li><a href="/products/product-category-four">Category #4</a></li>
                                       <li><a href="/products/product-category-five">Category #5</a></li>
                                       <li><a href="/products/product-category-six">Category #6</a></li>
                                       <li><a href="/products/product-category-seven">Category #7</a></li>
                                       <li><a href="/products/product-category-eight">Category #8</a></li>
                                       <li><a href="/products/product-category-nine">Category #9</a></li>
                                       <li><a href="/products/product-category-ten">Category #10</a></li>
                                  </ul>
                              </div>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/?orderby=default">Default</a></li>
                                       <li><a href="/?orderby=popularity">Popularity</a></li>
                                       <li><a href="/?orderby=rating">Average Rating</a></li>
                                       <li><a href="/?orderby=date">New Releases</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

      If a user clicks on the category #2 link the page will load but the link won't active stay active.

      How can I do this so that it is bold or a different color in order to let the user know this is the page they are currently on?

      Thank you,
      Madeline

    • Ash

      Hello Madeline

      Please try the following code:

      <?php
          $args = array(
                 'taxonomy'     => 'product_cat',
                 'orderby'      => 'name',
                 'show_count'   => 0,
                 'pad_counts'   => 0,
                 'hierarchical' => true,
                 'title_li'     => '',
                 'hide_empty'   => 0
          );
          $all_categories = get_categories( $args );
      
          global $wp_query;
          $cat_obj = $wp_query->get_queried_object();
      ?>
      <div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <div class="pull-left">
                              <a class="btn menu" href="/products/all-products">All</a>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                      <?php foreach( $all_categories as $cat ) : ?>
                                      <li class="<?php echo isset( $cat_obj->term_id ) && $cat_obj->term_id == $cat->term_id ? 'current-cat' : '' ?>"><a href="<?php echo get_term_link( $cat->term_id, 'product_cat' ); ?>"><?php echo $cat->name ?></a></li>
                                      <?php endforeach; ?>
                                  </ul>
                              </div>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/?orderby=default">Default</a></li>
                                       <li><a href="/?orderby=popularity">Popularity</a></li>
                                       <li><a href="/?orderby=rating">Average Rating</a></li>
                                       <li><a href="/?orderby=date">New Releases</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

      And use css like:

      .current-cat a { font-weight: bold; }

      The code is untested but you should get an idea :slight_smile:

      Hope it helps :slight_smile: Please feel free to ask more question if you have any.

      Cheers
      Ash

    • Madeline

      Hey Ash,

      Thank you for the explanation & help!
      I believe this will work but I forgot to let you know that my code is within an echo statement

      <?php
      echo ' My code is in here ';
      ?>

      I noticed that I have to insert some php within my code but since it is inside an echo statement it won't allow me to insert php code.

      How can I insert the php code within the echo statement?

      Thank you :slight_smile:

    • Nithin

      Hi Madeline,

      Hope you are doing good today. :slight_smile:

      Could you please try the following code, and check how that goes:

      <?php
      
       $args = array(
                 'taxonomy'     => 'product_cat',
                 'orderby'      => 'name',
                 'show_count'   => 0,
                 'pad_counts'   => 0,
                 'hierarchical' => true,
                 'title_li'     => '',
                 'hide_empty'   => 0
          );
          $all_categories = get_categories( $args );
      
          global $wp_query;
          $cat_obj = $wp_query->get_queried_object();
      
      echo '
      	<div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <div class="pull-left">
                              <a class="btn menu" href="/products/all-products">All</a>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">';
      
                                      foreach( $all_categories as $cat ) :
      
                                      echo'
                                      <li class="'.isset( $cat_obj->term_id ) && $cat_obj->term_id == $cat->term_id ? "current-cat" : "".'"><a href="'.get_term_link( $cat->term_id, 'product_cat' ).'">.'$cat->name.'</a></li>';
                                       endforeach;
      
      echo '</ul>
                              </div>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/?orderby=default">Default</a></li>
                                       <li><a href="/?orderby=popularity">Popularity</a></li>
                                       <li><a href="/?orderby=rating">Average Rating</a></li>
                                       <li><a href="/?orderby=date">New Releases</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
      ';
      ?>

      Just replace this code, to the one you have mentioned where you use echo statement. I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

      Kind Regards,
      Nithin

    • Madeline

      Hey Nitin,

      That code didn't work...

      When I tested it just went blank! What I am trying to accomplish is create a fixed submenu on my woocommerce shop page so that users can select a specific product category.

      For Example:
      ------------------------------------------------------------------------------------------------------------------------------------
      All Products | Product Categories | Sort By
      ------------------------------------------------------------------------------------------------------------------------------------

      Once a menu item is click it will load that category page and then remain active so that they know which category they selected.

      It is working just fine other than once the category link is selected it doesn't remain active.

      What could be the problem?

      Thanks :slight_smile:
      Madeline

    • Nithin

      Hi Madeline,

      When I tested it just went blank!

      I just noticed, there is a small typo in the above code, could you please test this one out, even it doesn't work, it should still output the li tags, instead of going blank.

      <?php
      
       $args = array(
                 'taxonomy'     => 'product_cat',
                 'orderby'      => 'name',
                 'show_count'   => 0,
                 'pad_counts'   => 0,
                 'hierarchical' => true,
                 'title_li'     => '',
                 'hide_empty'   => 0
          );
          $all_categories = get_categories( $args );
      
          global $wp_query;
          $cat_obj = $wp_query->get_queried_object();
      
      echo '
      	<div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <div class="pull-left">
                              <a class="btn menu" href="/products/all-products">All</a>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">';
      
                                      foreach( $all_categories as $cat ) :
      
                                      echo'
                                      <li class="'.isset( $cat_obj->term_id ) && $cat_obj->term_id == $cat->term_id ? "current-cat" : "".'"><a href="'.get_term_link( $cat->term_id, 'product_cat' ).'">'.$cat->name.'</a></li>';
                                       endforeach;
      
      echo '</ul>
                              </div>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/?orderby=default">Default</a></li>
                                       <li><a href="/?orderby=popularity">Popularity</a></li>
                                       <li><a href="/?orderby=rating">Average Rating</a></li>
                                       <li><a href="/?orderby=date">New Releases</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
      ';
      ?>

      If you still have problem, is the code accessible through the theme editor?, ie located under Appearance > Themes > Editor, if yes, could you please enable support access so that, we could give a closer look at how you have implemented the code.

      You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

      Please let us know how that goes, have a nice day. :slight_smile:

      Kind Regards,
      Nithin

    • Madeline

      Hey Nithin!

      Thank you you for fixing the error!

      So the product categories now are displayed correctly but whenever I click on one it will load that category page but then remove the category name I clicked on and replace it with the text "current-cat" for some reason.

      Example if I were to click on "Category #2" link:

      <ul>
      <li><a>Category #1</a></li>
      <li><a>Category #2</a></li> (Before I click it)
      <li><a>Category #3</a></li>
      <li><a>Category #4</a></li>
      <li><a>Category #5</a></li>
      </ul>
      ------------------------------------------
      <li><a>Category #1</a></li>
      <li><a>"Current Cat"</a></li> (After I Click Link)
      <li><a>Category #3</a></li>
      <li><a>Category #4</a></li>
      <li><a>Category #5</a></li>

      I want to have the "Category #2" link not change any name but have it be bold or add the "current-cat" style to it.

      Let me know how I can fix this!

      Thank You :slight_smile:
      Madeline

    • Nithin

      Hi Madeline,

      Hope you are doing good today. :slight_smile:

      It could be pretty easy to spot out the exact issue if we could see the page live, and check what the page is missing. Could you please try the following, and check whether it works:

      <?php
      
       $args = array(
                 'taxonomy'     => 'product_cat',
                 'orderby'      => 'name',
                 'show_count'   => 0,
                 'pad_counts'   => 0,
                 'hierarchical' => true,
                 'title_li'     => '',
                 'hide_empty'   => 0
          );
          $all_categories = get_categories( $args );
      
          global $wp_query;
          $cat_obj = $wp_query->get_queried_object();
      
      echo '
      	<div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <div class="pull-left">
                              <a class="btn menu" href="/products/all-products">All</a>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">';
      
                                      foreach( $all_categories as $cat ) :
      
      	                         echo '<li'. ( ( isset( $cat_obj->term_id ) && $cat_obj->term_id == $cat->term_id ) ? ' class="current-cat"' : '') .'><a href="'.get_term_link( $cat->term_id, 'product_cat'). '">'.$cat->name.'</a></li>';
      
                                       endforeach;
      
      echo '</ul>
                              </div>
                              <div class="btn-group btn-group-merge">
                                  <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                                  <ul class="dropdown-menu">
                                       <li><a href="/?orderby=default">Default</a></li>
                                       <li><a href="/?orderby=popularity">Popularity</a></li>
                                       <li><a href="/?orderby=rating">Average Rating</a></li>
                                       <li><a href="/?orderby=date">New Releases</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
      ';
      ?>

      If the above changed code doesn't help, could you please share the file on which your have implemented the code, so that we could give a closer look.

      I hope this helps. Please let us know how the above code works in your system, have a nice day. :slight_smile:

      Kind Regards,
      Nithin

    Thank NAME, for their help.

    Let NAME know exactly why they deserved these points.

    Gift a custom amount of points.