is_page() to show current active page

Question

I'm trying to style the active link with is_page() function. And it works for the first nav item. But when I click the "om" link it will get styling, but the styling for "hem" remains. But when I click the "blogg" and "tutorial" links none of the links gets any styling.

This is the code that I have in header.php.

<nav>
   <button class="menuButton">Meny</button>
      <div class="menu">
      <a href="#" class="closebtn">x</a>
      <ul>
         <h2>Meny</h2>
         <li class="<?php if (is_page("")) { echo "active-page"; } ?>"><a href="<?php echo site_url(''); ?>">Hem</a></li>
         <li class="<?php if (is_page("/om")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/om'); ?>">Om</a></li>
         <li class="<?php if (is_page("/blogg")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/blogg'); ?>">Blogg arkiv</a></li>
         <li class="<?php if (is_page("/tutorial")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/tutorials'); ?>">Tutorials arkiv</a></li>
      </ul>
      </div>
</nav>

Is this the wrong way to use the is_page()function? I'm a little lost here. The styling that gets applied is just a simple text-decoration: underline; CSS style.

This is not what you are thinking. `is_page()` is used to determines whether the query is for an existing single page. — Dhaval Purohit, Aug 28 '19 at 05:38
You can use this one `global $wp; $current_url = home_url( add_query_arg( array(), $wp->request ) );` to get the current page URL. — Dhaval Purohit, Aug 28 '19 at 05:38
check this link https://stackoverflow.com/questions/26789438/how-to-add-active-class-to-wp-nav-menu-current-menu-item-simple-way — Gaurav, Aug 28 '19 at 05:41

score 0 · Answer 1 · answered Aug 28 '19 at 05:50

Try this

<nav>
       <button class="menuButton">Meny</button>
          <div class="menu">
          <a href="#" class="closebtn">x</a>
          <ul>
             <h2>Meny</h2>
             <li class="<?php if (is_page("")) { echo "active-page"; } ?>"><a href="<?php echo site_url(''); ?>">Hem</a></li>
             <li class="<?php if (is_page("om")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/om'); ?>">Om</a></li>
             <li class="<?php if (is_page("blogg")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/blogg'); ?>">Blogg arkiv</a></li>
             <li class="<?php if (is_page("tutorial")) { echo "active-page"; } ?>"><a href="<?php echo site_url('/tutorials'); ?>">Tutorials arkiv</a></li>
          </ul>
          </div>
    </nav>

is_page() to show current active page

1 Answers1