add class to element based on custom page (Wordpress)

Question

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>

Welcome to SO! Please see How to ask. "it does not work" - what exactly are you doing, what are you expecting, and what happens instead? — ArSeN

Laxman Prajapati Laxman Prajapati · Accepted Answer · 2020-03-22T15:54:28

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!

add class to element based on custom page (Wordpress)

1 Answers