I saw a few tutorial about this problem but none of them satisfied me. I want to highlight the single element of my list which matches the page that I'm browsing. I created the code with php, is a wordpress based website, and the code actually works because when I echo the uri which I'm on it will display the right uri, but the if statement I created to add a class when I'm on the website won't output anything.. and I don't understand why.. anyway.. here's the code:
header.php
<ul class="nav nav-pills sliding" id="Jcollapse">
<li class="<?php if ($current == "/why-chickapea/"){ echo "current";}?>"><a href="/why-chickapea/"><span>Why Chickapea?</span></a></li>
<li class="<?php if ($current == "/our-pasta/"){ echo "current";}?>"><a href="/our-story/"><span>Our story</span></a></li>
<li class="<?php if ($current == "/shop-chickapea/"){ echo "current";}?>"><a href="/shop-chickapea/"><span>Shop</span></a></li>
<li class="<?php if ($current == "/recipes/"){ echo "current";}?>"><a href="/recipes/"><span>Recipes</span></a></li>
<li class="<?php if ($current == "/blog/"){ echo "current";}?>"><a href="/blog/"><span>Blog</span></a></li>
</ul>
In each page I added a php snippet:
<?php $current = $_SERVER["REQUEST_URI"]; ?>
If I echo the var $current I will obtain the right url in this format: /pagename/
At the end I style the class current with a yellow color
.current {
color:yellow;
}
.current a {
color:yellow;
}
Does anyone know where my mistake is?
this is the page website: choosechickapea.com
As you can see the class that my code will generate is empty, but if I echo each value the uri I will obtain is the right one
The simplest explanation would be, that you print the header before $current is set.
The second simplest explanation is different scopes, meaning either you set $current in a non-global scope or you read it in a non-global scope, and those two (whatever they are) are different. Since someone said wordpress, I guess there is some encapsulation into functions (thus changing the scope). Using the global keyword may be a solution, but a dirty one. But since you're already avoiding wordpress functions ...
The actual code is:
Before declaring in the header the if statement, SET the value of the variable. If you'll declare in the body, even before loading the header with a, for example require once or in wordpress:
<?php get_header(); ?>
It won't work, the variable has to be set in the header like this:
<?php $current = $_SERVER["REQUEST_URI"]; ?>
<header class="navbar-fixed-top">
<ul class="nav nav-pills sliding">
<li class="<?php if ($current == "/your-url/"){ echo "current";}?>"><a href="/your-url/"><span>your url</span></a></li>
<li class="<?php if ($current == "/other-url/"){ echo "current";}?>"><a href="/other-url/"><span>/other url/</span></a></li>
</ul>
</header>