PHP - How to change the class of a link - php

I am trying to learn PHP for a website that I am building. In CSS, I have a class, nav a.thispage, setup to make a 'button' on the navigation be the same color as the highlight. It works beautifully. But, as I added pages, I find that I needed to constantly update all of the HTML files of the site, over, and over again. I found out that PHP could help me to automate this. I use the following PHP, in my HTML to do this:
<?php include 'content/header.php';?>
The header.php file has the following content:
<header>
<h1><img id="headerimage" src="Images/GrandLodge.png"/>Lodge</h1>
<nav>
<ul>
<li>Home</li>
<li>Events</li>
<li>Social</li>
<li>About</li>
<li>Contact</li>
<li>Area Game Stores</li>
<li>PFS</li>
</ul>
</nav>
</header>
Now, because I am using this method, I can't just set the class="thispage" on the a tag. Is there a way to set the class, dynamically, with PHP? If so, how to I tell if the page loading the html is actually the page that needs it? Is using PHP even the correct way to handle this, or should I be using JavaScript?
I know this is a lot, and I didn't really provide a lot of what I have done, but I can't actually seem to see what I need to do for this. All I really need is a point in the right direction, rather than a full code sample.
Thank you for any help you can provide.

Use basename($_SERVER['REQUEST_URI'])
<header>
<h1><img id="headerimage" src="Images/GrandLodge.png"/>Lodge</h1>
<nav>
<ul>
<?php $basename = basename($_SERVER['REQUEST_URI']);?>
$class = $basename === 'index.php' || empty($basename) ? ' class="thispage"' : '';
<li <?php if($basename=="index.php" || $basename==""){?> class="thispage" <?php } ?>>Home</li>
<li <?php if($basename=="events.php"){?> class="thispage" <?php } ?>>Events</li>
<li <?php if($basename=="social.php"){?> class="thispage" <?php } ?>>Social</li>
<li <?php if($basename=="about.php"){?> class="thispage" <?php } ?>>About</li>
<li <?php if($basename=="contact.php"){?> class="thispage" <?php } ?>>Contact</li>
<li <?php if($basename=="gamestores.php"){?> class="thispage" <?php } ?>>Area Game Stores</li>
<li>PFS</li>
</ul>
</nav>
</header>
Updated another Simple way
<header>
<h1><img id="headerimage" src="Images/GrandLodge.png"/>Lodge</h1>
<nav>
<ul>
<?php $basename = basename($_SERVER['REQUEST_URI']);?>
$class = $basename === 'index.php' || empty($basename) ? ' class="thispage"' : '';
<li <?= $class ?>>Home</li>
<li <?= $class ?>>Events</li>
<li <?= $class ?>>Social</li>
<li <?= $class ?>>About</li>
<li <?= $class ?>>Contact</li>
<li <<?= $class ?>>Area Game Stores</li>
<li>PFS</li>
</ul>
</nav>
</header

You can use a bit oF PHP and JavaScript to handle this
<header>
<h1><img id="headerimage" src="Images/GrandLodge.png"/>Lodge</h1>
<nav>
<ul>
<li><a id="aHome" href="index.php">Home</a></li>
<li><a id="aEvents" href="events.php">Events</a></li>
<li><a id="aSocial" href="social.php">Social</a></li>
<li><a id="aAbout" href="about.php">About</a></li>
<li><a id="aContact" href="contact.php">Contact</a></li>
<li><a id="aGame" href="gamestores.php">Area Game Stores</a></li>
<li><a id="aPFS" href="http://someaddress" target="_blank">PFS</a></li>
</ul>
</nav>
</header>
Now suppose the visitor has landed on the About page. The code to check that and set the class name on the a tag would be
<?php
if ($_SERVER['SCRIPT_NAME'] == '/about.php') {
?>
<script type="text/javascript">
document.getElementById("aAbout").className = 'thispage';
</script>
<?php
}
?>
Try it and let me know.

In order for PHP to help you, you'd have to generate your navigation within a loop. Something along the lines of:
<?php
$menu = array(
'Home' => 'index.php',
'Events' => 'events.php',
'Social' => 'social.php',
'About' => 'about.php'
);
?>
<?php foreach ($menu as $name => $href) : ?>
<?php $class_name = basename(__FILE__) === $href ? 'thispage' : ''; ?>
<li><?php echo $name; ?></li>
<?php endforeach; ?>

Related

Active Navigation Bar with PHP?

I'm trying to make an active navigation bar using PHP where the current page will be highlighted or colored in the navigation bar. The code I used:
<ul class="topmenu">
<li <?php if($_GET['page']="home") { ?> class="active" <?php } ?>>
<b>Bienvenue</b>
</li>
<li <?php if($_GET['page']="livres") { ?> class="active" <?php } ?>>
<b>Livres</b>
</li>
<li <?php if($_GET['page']="bibliotheque") { ?> class="active" <?php } ?>>
<b>Bibliothèque</b>
</li>
<li <?php if($_GET['page']="universite") { ?> class="active" <?php } ?>>
<b>L'université</b>
</li>
<li <?php if($_GET['page']="contact") { ?> class="active" <?php } ?>>
<b>Contact</b>
</li>
</ul>
The code will put the attribut in the class active if the page is the current page in the navigation bar. However, all the attributs will be given the class active in this case. How do I fix this?
P.S: I am not looking for any JS or jQuery alternatives, I'm trying to make this work with PHP only.
You could use $_SERVER['SCRIPT_NAME'].
<ul class="topmenu">
<li <?php if($_SERVER['SCRIPT_NAME']=="/home.php") { ?> class="active" <?php } ?>><b>Bienvenue</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/livres.php") { ?> class="active" <?php } ?>><b>Livres</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/bibliotheque.php") { ?> class="active" <?php } ?>><b>Bibliothèque</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/universite.php") { ?> class="active" <?php } ?>><b>L'université</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/contact.php") { ?> class="active" <?php } ?>><b>Contact</b></li>
</ul>
I don't use PHP, but give the current page the active tag, and change it per file. Then a single class definition in the CSS handles changing the color for each page.
HTML:
<nav>
<a class="active" href="/home/">Home</a>
Calendar
Community
</nav>
CSS:
.active {
background-color: #4CAF50;
}
Declare page variables at the very top of each individual page.
Example: <? $page="home";?>
For each list item in your nav bar add if statment with corresponding variable and active class.
Example: <li class="<?if($page=="home"){?>active<?}?>"><b>Bienvenue</b></li>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.
I'm using bootstrap 4 class. I've achieved Active Class selection something like this.
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile1.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile1.php">Home
</a>
</li>
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile2.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile2.php">Home
</a>
</li>
Repeat this logic for further li tags. Hope this helps someone else.
The code work correctly if you use "==" instead of "=" in The if construct
Еxample:
if($_GET['page'] **==** "home")...
Instead:
if($_GET['page'] **=** "home")...
Hope this helps someone else...

Highlight for Current Menu Item not highlighting correctly Online

I am building the website and everything is fine in Localhost but when I made it online the active menu is not highlighted. Can you please help me to resolve it.
But when I create subfolder it works.
My code goes here :
<?php
$filename = $_SERVER['REQUEST_URI'];
$filename = substr($filename, 9);
?>
HTML :
<header id="header" class="container navbar">
<nav id="menu" class="nav-collapse collapse default-menu">
<ul id="menu-top-menu" class="nav">
<li <?php if($filename=='about-us'){?>class="current_page_item"<?php } ?>>
ABOUT
</li>
<li <?php if($filename=='offers'){?>class="current_page_item"<?php }?>>
OFFERS
</li>
<li <?php if($filename=='membership'){?>class="current_page_item"<?php }?>>
MEMBERSHIP</li>
</ul>
</nav>
<div class="clear"></div>
</header>
Please someone help me !
first try echo your $filename value what you getting and match like below
if your $filename has correct value then try to echo your text
<li <?php if($filename=='about-us'){echo 'class="current_page_item"';} ?>>
try with
$info = pathinfo($_SERVER['REQUEST_URI']);
$filename = $info['filename'];

Setting my active class in my navigation with PHP

Hello I would like to know how to use PHP in my header so that my class active can be activated when it is on the correct page.
for instance on my index.php
i have this at the top
<?php
$page = 'Home';
include("header.php");
?>
then this is in my navigation
<nav>
<ul>
<li><a class="active" href="index">Home</a></li>
<li class="rightside">Projects</li>
<li class="rightside">About</li>
<li class="rightside">Blog
<li class="rightside">Contact
</ul>
</nav>
I want the class to be activated when i am on the appropriate page if that makes any sense. Thank you, my PhP knowledge is minimal.
This is a shorthand if statement that can be used inline
<?php echo ($page == 'Home' ? 'active':'');?>
See Below
<nav>
<ul>
<li><a class="<?php echo ($page == 'Home' ? 'active':'');?>" href="index">Home</a></li>
<li class="rightside"><a class="<?php echo ($page == 'Projects' ? 'active':'');?>" href="projects">Projects</a></li>
<li class="rightside"><a class="<?php echo ($page == 'About_us' ? 'active':'');?>" href="about_us">About</a></li>
<li class="rightside"><a class="<?php echo ($page == 'Blog' ? 'active':'');?>" href="blog">Blog</a>
<li class="rightside"><a class="<?php echo ($page == 'Contact' ? 'active':'');?>" href="contact">Contact</a>
</ul>
</nav>
I personally use a jquery function for this, it saves having to declare the page type each time
jQuery
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
If you always declare $page before the header include, than you can use an if statement.
Just an example:
<nav>
<ul>
<li><a class="<?php echo ($page == 'Home') ? 'active' : 'rightside'; ?>" href="index">Home</a></li>
<!-- same for your other list elements -->
</ul>
</nav>

How do I dynamically insert a CSS class using PHP?

What's wrong with the following code? I would like to dynamically insert "current" CSS class when the respective <li> element is clicked. Thanks!
<?php
$pg = $_SERVER['PHP_SELF'];
?>
<section>
<aside>
<nav>
<ul>
<li class="<?php if($pg == 'index.php?page=about.php'){echo 'current';} ?>">About</li>
<li class="">Services</li>
</ul>
</nav>
</aside>
<section>
Try with:
<?php
$pg = $_GET['page'];
$allow = array('about.php', 'main.php', 'other.php');
if ( !in_array($pg, $allow) ) {
$pg = 'default_value';
}
?>
<section>
<aside>
<nav>
<ul>
<li class="<?php if($pg == 'about.php'){echo 'current';} ?>">About</li>
<li class="">Services</li>
</ul>
</nav>
</aside>
<section>
<li class="<?php echo ($_GET['page'] == 'about.php')? 'current' : 'normal'; ?>">
About
</li>
$_SERVER['PHP_SELF'] doesn't return the $_GET vars (?page=about.php)
$_SERVER['PHP_SELF'] will start with / and will not include the query string.
You should probably check $_GET['page'] instead.
Well if your looking for clicked at runtime you need javascript not php. Something like this using jQuery will work for you:
$(document).ready(function(){
$('nav >ul li').click(function(){
//remove all current classes
$('.current').removeClass('current');
$(this).addClass('current');
});
});

Create a php menu that highlights current tab

So I have a menu in a php file that looks like this (This is the whole file. I'm totally new to PHP.)
menu.php:
<li id="current"><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Results</span></li>
<li><span>Pictures</span></li>
<li><span>Our Location</span></li>
Now in my pages I do this (index.php):
<div id="tabs1" >
<ul>
<!-- CSS Tabs -->
<?php include("menu.php"); ?>
</ul>
</div>
So what I want to be able to do is change the line above to this:
<?php include("menu.php?current=pictures"); ?>
Which would make the active tab the Pictures tab. How can I do this?
You could also try this:
Your php script
<?php
$selected = "pictures";
$current_id = ' id="current"';
include "menu.php";
?>
this is your menu:
<ul>
<li <?php if ($selected == "pictures") print $current_id; ?>><span>Home</span></li>
<li <?php if ($selected == "blog") print $current_id; ?>><span>Blog</span></li>
<li <?php if ($selected == "home") print $current_id; ?>><span>Results</span></li>
<li <?php if ($selected == "me") print $current_id; ?>><span>Pictures</span></li>
<li <?php if ($selected == "contacts") print $current_id; ?>><span>Our Location</span></li>
</ul>
Try this:
<li <?php if($_GET['current'] == 'home') {echo 'id="current"'}?>><span>Home</span></li>
<li <?php if($_GET['current'] == 'blog') {echo 'id="current"'}?>><span>Blog</span></li>
<li <?php if($_GET['current'] == 'results') {echo 'id="current"'}?>><span>Results</span></li></li>
and so on....
worth looking at
intelligent navigation
<nav>
<style>
#active{
color:#FFC801;
}
</style>
<?php
$activePage = basename($_SERVER['PHP_SELF'], ".php");
?>
<ul>
<li>About Us</li>
<li>Mentors</li>
<li>Tours</li>
<li>Animation</li>
<li>Blog</li>
<li>Testimonials</li>
<li>Press/Media</li>
<li>Facts</li>
</ul>
</nav>
I don't think its necessary for it to be done at the server side (using up CPU cycles).
Use javascript/CSS to achieve this.

Categories