How to dynamically add the "active" class to the navigation menu item based on the current page in PHP?

I have a PHP script that includes the navigation menu in my inc_header.php file.

<header id="header" class="fixed-top">
  <div class="container-fluid d-flex justify-content-between align-items-center">
    <a href="index.php" class="logo">
      <img src="assets/img/logo.png" alt="IHRD logo" class="img-fluid">
    </a>
    <h1 class="logo me-auto me-lg-0">
      <a class="d-none d-lg-block" href="index.php">Technical Higher Secondary School Puthuppally</a>
      <a class="d-block d-lg-none" href="index.php">THSS Puthuppally</a>
    </h1>
    <nav id="navbar" class="navbar order-last order-lg-0">
      <ul>
        <li>
          <a href="?page=home">Home</a>
        </li>
        <li>
          <a href="?page=about">About</a>
        </li>
        <li>
          <a href="?page=admission">Admissions</a>
        </li>
        <li>
          <a href="?page=faculties">Faculties</a>
        </li>
        <li>
          <a href="?page=facilities">Facilities</a>
        </li>
        <li>
          <a href="?page=activity">Activities</a>
        </li>
        <li>
          <a href="?page=achievements">Achievements</a>
        </li>
        <li class="dropdownlist">
          <button class="dropbtn">Gallery</button>
          <div class="dropdownlist-content">
            <a href="?page=gallery">Images</a>
            <a href="?page=videogallery">Videos</a>
          </div>
        </li>
        <li>
          <a href="?page=contact">Contact</a>
        </li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
    </nav>
    <!-- .navbar -->
    <!--social links-->
  </div>
</header>

Index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <?php include('inc_metadata.php');?>
  </head>
  <body>
    <!--Header-->
    <?php include('inc_header.php');?>
    <?php
        $allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
        $page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
       if ( in_array($page, $allowed) )
           {
             include("$page.php");
             include('inc_config.php');
           }
      else {
           include("home.php");
         }
        ?>
      <!--footer-->
    <?php include('inc_footer.php'); ?>
    <?php include('inc_bottom.php'); ?>
  </body>
</html>

I want to dynamically add the class "active" to the

element that corresponds to the current page. For example, if the current page is "home.php", I want the corresponding

element for "Home" to have the class "active" added to it. According to my code Navbar is fixed in 'index.php'. How can I achieve this using PHP? I want the active class to be applied dynamically based on the current page URL. Thank you!

I tried chatgpt but didn't work. I'm a self taught beginner, I hope someone help me.

Solution

First, you'll need to move your include after you test the GET value.

<?php 
    $allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
    $page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
    if ( in_array($page, $allowed) )
       {
       // here you test the page you'll show, so the corresponding menu item can be checked
       // $page = $_GET['page'];
         include('inc_header.php');
         include("$page.php");
         include('inc_config.php');
       }
       else {
       include("home.php");
     }
    ?>

in your menu, modify your links as follow:

 <li><a href="?page=home" class="<?php if($page == "home") { echo"selected"; } ?>">Home</a></li>
 <li><a href="?page=about" class="<?php if($page == "about") { echo"selected"; } ?>">About</a></li>  
// where .selected is the CSS style you want to apply