0

Goal: I need the element on the menu/nav links to be highlighted based on the current active page. Example - viewing "About" page will highlight the "About" item on the menu.

What I've tried: highlight active element based on active page made the most sense but:

  • It's not adding the class based on page being viewed. I added the variable on the .php template file and the Wordpress page created from dashboard itself but both don't work.

Any suggestions on how to accomplish this?

Wordpress Dashboard Page: About custom template file: About.php

Menu items:

<div>
  <a class="(add class here based on page url)">About</a>
  <a class="(add class here based on page url)">Blog</a>
  <a class="(add class here based on page url)">Products</a>
  <a class="(add class here based on page url)">Contact</a>
<div>
Alessandra M
  • 3
  • 3
  • 1
    Welcome to SO! Please see [How to ask](https://stackoverflow.com/help/how-to-ask). "it does not work" - what exactly are you doing, what are you expecting, and what happens instead? – ArSeN Mar 22 '20 at 13:45

1 Answers1

0

You can try with below: 

<?php 
global $post;       
// add 'post_name' to the $post_class                
$post_class = $post->post_name;
?>

<div>
    <a class="<?php echo $post_class; ?>_page">item</a> 
    <a>item</a> 
    <a>item</a> 
    <a>item</a> 
<div>

On the $post_class you will get the current page name so the class will get based on page name.

Thanks!

Laxman Prajapati
  • 174
  • 6