Add class="active" to active page using PHP

Question

Dynamic Header, CSS Class Change To Active USING PHP (dirrectory)

I want the class of the <li> tag to change under the active dirrectory... now, every guide shows me how to do it when your page equals it, but i want to change the <li> depending on what dirrectory im on

for example:

if say im on
http://example.com/RESOURCES/code/opensource,
or
http://example.com/RESOURCES/images/clipart
i want the "RESOURCES" ^^ <li> to be 'class="active"' while the rest display 'class="noactive"'

or if im on
http://example.com/tutorials/css/flawless-dropdown-menu
I want the "tutorials" <li> to be 'class="active"' while the rest are 'class="noactive"'

URL Setup:

This is my example of how my url's are displayed...

http://example.com/tutorials/css/flawless-dropdown-menu

^^That URL is the page of a tutorial....under the "tutorials" directory, than under the "CSS" category directory, than the page title (all of these directories are not real and are rewrites from .htaccess) [irrelevant]

Navigation Setup:

<ul id="mainnav">
  <li class="noactive"><a href="/">Home</a></li>
  <li class="active"><a href="/tutorials/">Tutorials</a></li>
  <li class="noactive"><a href="/resources/">Resources</a></li>
  <li class="noactive"><a href="/library/">Library</a></li>
  <li class="noactive"><a href="/our-projects/">Our Projects</a></li>
  <li class="noactive"><a href="/community/">Community</a></li>
</ul>

if you want flexible code, you have to add your real URL after translate via rewrite code. however i suggest to make it using javascript or jquery. — Mohammad Ahmad, Nov 11 '12 at 22:43
No, It all depends on what directory im in, regardless if how many layers of dirrectories i am in deep, i just want it to look for what dirrectory im in (first layer) — Alex Sarnowski, Nov 11 '12 at 22:48

score 23 · Accepted Answer · answered Nov 12 '12 at 03:33

Figured out the ANSWER...I was over thinking it.

HTML

<ul id="mainnav">
    <li class="<?php if ($first_part=="") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Home</a></li>
    <li class="<?php if ($first_part=="tutorials") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Tutorials</a></li>
    <li class="<?php if ($first_part=="resources") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Resources</a></li>
    <li class="<?php if ($first_part=="library") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Library</a></li>
    <li class="<?php if ($first_part=="our-projects") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Our Projects</a></li>
    <li class="<?php if ($first_part=="community") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Community</a></li>
</ul>

PHP

<?php 
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>

Worked for me.but PHP code can be modified with this $first_part = basename($_SERVER['PHP_SELF'], ".php"); — Abhishek Singh, Mar 20 '18 at 10:51

score 23 · Answer 2 · answered Jun 30 '15 at 18:47

header.php

$activePage = basename($_SERVER['PHP_SELF'], ".php");

nav.php

<ul>
    <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="/index.php">Home</a></li>
    <li class="<?= ($activePage == 'tutorials') ? 'active':''; ?>"><a href="/tutorials.php">Tutorials</a></li>
...

Sean · Answer 3 · 2012-11-11T23:26:57.263

7

Through PHP you can try -

<?php 
// gets the current URI, remove the left / and then everything after the / on the right
$directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/'));

// loop through each directory, check against the known directories, and add class   
$directories = array("index", "tutorials","resources","library","our-projects","community"); // set home as 'index', but can be changed based of the home uri
foreach ($directories as $folder){
$active[$folder] = ($directory[0] == $folder)? "active":"noactive";
}
?>

<ul>
  <li class="<?php echo $active['index']?>"><a href="/">Home</a></li>
  <li class="<?php echo $active['tutorials']?>"><a href="/tutorials/">Tutorials</a></li>
  <li class="<?php echo $active['resources']?>"><a href="/resources/">Resources</a></li>
  <li class="<?php echo $active['library']?>"><a href="/library/">Library</a></li>
  <li class="<?php echo $active['our-projects']?>"><a href="/our-projects/">Our Projects</a></li>
  <li class="<?php echo $active['community']?>"><a href="/community/">Community</a></li>
</ul>

edited Nov 11 '12 at 23:26

answered Nov 11 '12 at 23:18

Sean

12,443
3
29
47

1

@RickCalder I disagree, your answer is better. – Yes Barry Nov 11 '12 at 23:23
Everything works here, besides the url dirrectory being recognized and applied to the code...but the whole, active, noactive class establishing works. Im just not sure why it isn't recognizing directory – Alex Sarnowski Nov 11 '12 at 23:40
@AlexSarnowski are you saying that `$directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/'));` is not working? ie on `http://example.com/tutorials/css/flawless-dropdown-menu` that `$directory != tutorials`? Could you echo `$directory` to see what it is set to, compared to the directory you are in? Could it a `case-sensitive` issue? – Sean Nov 12 '12 at 00:09
I tried to echo it out and it says "Notice : Array to string conversion in " – Alex Sarnowski Nov 12 '12 at 00:36
And yes, i'm saying when i'm on http://example.com/tutorials/css/flawless-dropdown-menu , all of the
are class="noactive" , when tutorials should be class="active"

Alex Sarnowski

Nov 12 '12 at 00:47

The warning - "Notice : Array to string conversion in " is caused when you try to manipulate a string when it is actually an array. For example if you had `ltrim($_SERVER,'/')`[array], instead of `ltrim($_SERVER['REQUEST_URI'],'/')`[string]. Try doing `print_r($_SERVER['REQUEST_URI'])` and see if prints as `ARRAY ...` or as a string. You could also do it with `print_r($directory)` and `print_r($directory[0])` to check if they are correct and match the directory in your url. – Sean Nov 12 '12 at 02:37

David Müller · Answer 4 · 2012-11-11T23:25:04.543

3

Maybe this helps you:

$(document).ready(function()
{
    var parts = document.URL.split("/");
    // [http:, empty, your domain, firstfolder]
    var firstFolder = parts[3];

    $("#mainnav li").attr("class", "noactive");
    $("#mainnav a[href='/" + firstFolder + "/']").parent().attr("class", "active");
});

edited Nov 11 '12 at 23:25

answered Nov 11 '12 at 23:08

David Müller

5,291
2
29
33

won't this affect all
on the page?

Alex Sarnowski

Nov 11 '12 at 23:16

1

Of course, but as Alex Sarnowski has not set any id on his ul and this is only demo code, I think it's okay to do so ;) – David Müller Nov 11 '12 at 23:18

how could i possibly change it if , id="mainnav"....that was foolish of me to not set an id. – Alex Sarnowski Nov 11 '12 at 23:23

@AlexSarnowski I changed it for you. – Yes Barry Nov 11 '12 at 23:24

Rick Calder · Answer 5 · 2012-11-11T23:30:03.107

It's probably easier to do with jQuery but this works:

$url='http://example.com/tutorials/css/flawless-dropdown-menu';//pass the current url here instead of a static string.
$segments = explode ("/",$url);

$menuItems=array('Tutorials','Resources', 'Library', 'Our-Projects','Community');


$menu=array();
foreach ($menuItems as $menuItem) {
if($segments[3]==strtolower($menuItem)){
    $menu[]=('<li class="active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>');

} else {
    $menu[]=('<li class="no-active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>');
}
}
foreach ($menu as $item) {
echo $item.'<br />';
}

score 1 · Answer 6 · answered Feb 14 '18 at 07:33

if you use mysql_fetch defined your row for menu title. if we take your menu title is MENU in mysql database and you have to put in (Home,tutorials,library,resources,our-projects,community)

    <?php
//connect your data bass

 include(connection.php');

//get your from ID like www.google?id=1 

 $id = $_GET['id'];
    $query = "select * from pages where id='$id'";
    $query1 = mysql_query($query);
    while($row= mysql_fetch_array($query1))
    {
        ?>


<html>
<?php $active= $row['MENU'];?>
<ul>
  <li class="<?php if($active=='Home'){echo 'active';}else{echo'noactive';}?>"><a href="/">Home</a></li>
  <li class="<?php if($active=='tutorials'){echo 'active';}else{echo'noactive';}?>"><a href="/tutorials/">Tutorials</a></li>
  <li class="<?php if($active=='resources'){echo 'active';}else{echo'noactive';}?>"><a href="/resources/">Resources</a></li>
  <li class="<?php if($active=='library'){echo 'active';}else{echo'noactive';}?>"><a href="/library/">Library</a></li>
  <li class="<?php if($active=='our-projects'){echo 'active';}else{echo'noactive';}?>"><a href="/our-projects/">Our Projects</a></li>
  <li class="<?php if($active=='community'){echo 'active';}else{echo'noactive';}?>"><a href="/community/">Community</a></li>
</ul>
</html>
<?php };?>

score 1 · Answer 7 · answered Feb 21 '22 at 16:20

Here is another take using PHP:

<ul class="navbar-nav">
    <?php
        // Defines all pages in navigation
        $pages = array(
            'Home'     => 'index.php',
            'Products' => 'products.php',
            'Services' => 'services.php',
            'Contact'  => 'contact.php',
            'About'    => 'about.php'
        );

        // Gets active page URL
        $active = basename($_SERVER['PHP_SELF']);
        
        // Loops through all pages
        foreach ($pages as $title => $url) {
            // Checks if active url is matched and adds active CSS class
            if ($active === $url) {
                echo '<li><a href="'.$url.'" class="nav-link active">'.$title.'</a></li>';
            } 
            // Prints out default style for remaining links
            else {
                echo '<li><a href="'.$url.'" class="nav-link">'.$title.'</a></li>';
            }
        }
    ?>
</ul>

score 1 · Answer 8 · answered Oct 07 '22 at 13:32

This answer will apply if all your pages have a php extension and you want a long messy way. I put the code below on top of every php page giving each page an ID which means all pages will have an ID which is tiresome and boring and hard to track.

<?php $page = 1; ?>

Now in my header or navigation I used the code below to put the active class. You can also put an else if you want something else.

   <nav id="navbar" class="navbar">
    <ul>

      <li class="<?php if($page == 1){ echo "active"; } ?>"><a class="url" href="index.php">Index</a></li>
      <li class="<?php if($page == 2){ echo "active"; } ?>"><a class="url" href="single-post.php">Information</a></li>
      <li class="<?php if($page == 3){ echo "active"; } ?>"><a class="url" href="single-post.php">Wanted</a></li>
      <li class="<?php if($page == 4){ echo "active"; } ?>"><a class="url" href="single-post.php">Workshop</a></li>
      <li class="<?php if($page == 5){ echo "active"; } ?>"><a class="url" href="gallery.php">Gallery</a></li>
      <li class="<?php if($page == 6){ echo "active"; } ?>"><a class="url" href="featured.php">Featured</a></li>
      <li class="<?php if($page == 7){ echo "active"; } ?>"><a class="url" href="contact.php">Contact Us</a></li>

    </ul>
  </nav>

score 0 · Answer 9 · answered Nov 27 '18 at 10:47

"includes/header.php" - This goes in Top of the File

<?php 
$activePage = basename($_SERVER['PHP_SELF']);

$index="";
$nosotros="";
$cursos="";
$contacto="";

switch ($activePage) {
    case 'index.php':
        $index=' class="current"';
        break;
    case 'nosotros.php':
        $nosotros=' class="current"';
        break;
    case 'cursos.php':
        $cursos=' class="current"';
        break;
    case 'contacto.php':
        $contacto=' class="current"';
        break;
    default:

        break;
     }
?>

and this goes on the nav section

<ul>
    <?php 
        echo '<li'.$index.'><a href="/"><div>Inicio</div></a></li>';
        echo '<li'.$nosotros.'><a href="nosotros"><div>Nosotros</div></a></li>';
        echo '<li'.$cursos.'><a href="cursos"><div>Cursos</div></a></li>';
        echo '<li><a href="http://www.redtechacademy.com"><div>Academia</div></a></li>';
        echo '<li><a href="https://www.redtechhackingshop.com"><div>Tienda</div></a></li>';
        echo '<li'.$contacto.'><a href="contacto"><div>Contacto</div></a></li>';
    ?>
</ul>

Vijay Chauhan · Answer 10 · 2019-06-14T07:36:02.497

 Try the following:

<ul class="sub-menu"> 
   <div class="h-10"></div>
   <li class="<?php if ($your_variable=="test") {echo "active"; } 
     else{echo"noactive";}?>">
     <a href="test.php">Test </a>
   </li>
    <li class="<?php if ($your_variable=="test2") {echo "active"; 
      } else {echo"noactive";}?>">
     <a href="test2.php" >Test2</a>
    </li>
    <li class="<?php if ($your_variable=="test3") {echo 
     "active"; } else  {echo "noactive";}?>">
        <a href="test3.php">Test3</a>
    </li>
 </ul>

 **strong PHP text**

 <?php 
  $directoryURI = $_SERVER['REQUEST_URI'];
   $path = parse_url($directoryURI, PHP_URL_PATH);
   $components = explode('/', $path);
   $your_variable = basename($_SERVER['PHP_SELF'], ".php"); 
  ?>

score 0 · Answer 11 · answered Jan 09 '20 at 07:39

0

Here we can do a simple thing also :

<li class="page-scroll <?php if(basename($_SERVER['PHP_SELF'])=="aboutus.php"){echo "active";} ?>"><a href="aboutus.php">About us</a></li>

answered Jan 09 '20 at 07:39

Samir Prajapati

36
8

vikas pandey · Answer 12 · 2022-03-11T09:37:07.910


$getUrl = $_SERVER['REQUEST_URL']; -> www.example.com/home.php

$getFileName = explode('/',$getUrl);

The result of $getFileName Will Be In Array ->[" ","home.php"]

$result = $getFileName[2]; //home.php

<li class="<?php if ($result=='' || $result == 'index.php') {echo 'active'; }?>"><a href='#'>Home</a></li>
<li class="<?php if ($result=='about.php') {echo 'active'; }?>"><a href='#'>About Us</a></li>
<li class="<?php if ($result=='contact.php') {echo 'active'; }?>"><a href='#'>Contact Us</a></li>

score 0 · Answer 13 · edited Mar 14 '22 at 11:30

You can use str_replace for this.

$path = $_SERVER['REQUEST_URI']; 
$active = str_replace('/','', $path);
<ul>
 <li class="nav-item <?php if($active == '' || $active == 'index.php'){echo 'active';}?>">
  <a class="nav-link" href="index.php">HOME</a>
 </li>
 <li class="nav-item <?php if($active == 'about.php'){echo 'active';}?>">
  <a class="nav-link" href="about.php">ABOUT US</a>
 </li>
</ul>

score -1 · Answer 14 · edited Oct 10 '14 at 07:25

<?php  $request_uri= $_SERVER['REQUEST_URI'];?>
<ul>
 <li class="<?php if((strpos($request_uri,"index.html")!==false) || $request_uri=="" || $request_uri=="/"){echo "selected";}?>"><a href="/index.html">Home</a></li>

                <li class="<?php if((strpos($request_uri,"service")!==false)){echo "selected";}?>"><a href="/services.html">Services</a> </li>
<li class="<?php if((strpos($request_uri,"product")!==false)){echo "selected";}?>"><a href="/products.html">Products</a></li>
                <li class="<?php if((strpos($request_uri,"blog")!==false)){echo "selected";}?>"><a href="/blog.html">Blog</a></li>
                <li class="<?php if((strpos($request_uri,"question")!==false)){echo "selected";}?>"><a href="/question-answers.html">Ques & Ans</a></li>
                <li class="<?php if((strpos($request_uri,"career")!==false)){echo "selected";}?>"><a href="/career.html">Career</a></li>
                <li class="<?php if((strpos($request_uri,"about-us")!==false)){echo "selected";}?>"><a href="/about-us.html">About</a></li>

</ul>

Add class="active" to active page using PHP

Dynamic Header, CSS Class Change To Active USING PHP (dirrectory)

URL Setup:

Navigation Setup:

14 Answers14

HTML

PHP

Linked