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><a href="index.php">Home</a></li>
<li><a href="events.php">Events</a></li>
<li><a href="social.php">Social</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="gamestores.php">Area Game Stores</a></li>
<li><a href="http://someaddress" target="_blank">PFS</a></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.
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.
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 } ?>><a href="index.php">Home</a></li>
<li <?php if($basename=="events.php"){?> class="thispage" <?php } ?>><a href="events.php">Events</a></li>
<li <?php if($basename=="social.php"){?> class="thispage" <?php } ?>><a href="social.php">Social</a></li>
<li <?php if($basename=="about.php"){?> class="thispage" <?php } ?>><a href="about.php">About</a></li>
<li <?php if($basename=="contact.php"){?> class="thispage" <?php } ?>><a href="contact.php">Contact</a></li>
<li <?php if($basename=="gamestores.php"){?> class="thispage" <?php } ?>><a href="gamestores.php">Area Game Stores</a></li>
<li><a href="http://someaddress" target="_blank">PFS</a></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 ?>><a href="index.php">Home</a></li>
<li <?= $class ?>><a href="events.php">Events</a></li>
<li <?= $class ?>><a href="social.php">Social</a></li>
<li <?= $class ?>><a href="about.php">About</a></li>
<li <?= $class ?>><a href="contact.php">Contact</a></li>
<li <<?= $class ?>><a href="gamestores.php">Area Game Stores</a></li>
<li><a href="http://someaddress" target="_blank">PFS</a></li>
</ul>
</nav>
</header
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><a href="<?php echo $href; ?>" class="<?php echo $class_name; ?>"><?php echo $name; ?></a></li>
<?php endforeach; ?>