Automatic classing of current page nav item for CSS manipulation

#1

hi,

i actually got some code working to add an ID dynamically to a website i’m working on (it was a momentous occasion).
here’s the code:
in the functions.php file:
[php]
$url = ‘tanzaniatravel.za.com’;
$page = $_SERVER[‘PHP_SELF’];
$page = str_replace("/","",$page);
$page = str_replace(".php","",$page);
$page = str_replace("$url", “”, “$page”);
[/php]

i call the functions.php file into the index.php file, and add this as the opening body tag:

<body id="<?php echo $page; ?>">

this dynamically adds an ID named after whatever the actual page is named.

now, i make use of the following top navigation structure:

<ul class="nav-top">
	<li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a class="nav-top-lineheight" href="index.php" title="Tanzania Travel home">Home</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a class="nav-top-lineheight" href="about.php" title="Why use TanzaniaTravel.Za.Com">Why us</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Overview and area map</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania National Park</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania Safari Lodges</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania Tour Itineraries</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Safari Dates &amp; Prices</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Zanzibar Kilimanjaro</a></li>
  <li class="<?php echo ($page == '' ? 'nav-top-current' : ''); ?> nav-top-last-li"><a class="nav-top-lineheight" href="" title="">Contact Us</a></li>
</ul>

you’ll see that i’ve left the $page variable empty. i want that variable to call in the current page’s ID. this, of course, will greatly assist with developing the CSS for the navigation.

i appreciate your help very much. thank you.

#2

Should just be $page :slight_smile:

#3

hi herghost,

thanks so much for posting a reply, but i’m not sure how to implement your solution. could you perhaps expand on your answer a bit? thanks! appreciate your time! :slight_smile:

#4

i forgot to mention that PHP is often as clear to me as a pool of mud :smiley:

#5

He’s telling you that on your first block of example code:

[php]$url = ‘tanzaniatravel.za.com’;
$page = $_SERVER[‘PHP_SELF’];
$page = str_replace("/","",$page);
$page = str_replace(".php","",$page);
$page = str_replace("$url", “”, “$page”);[/php]

The last str_replace function should have $page instead of “$page”.

#6

hi,

thanks for the reply. i made the change, but that still does not address the problem. I am still stuck wanting to apply a class dynamically to only a nav item related to the current page.
so, in other words, if the current $page is home (which is created dynamically), i’d like the “Home” nav item to have a class of “nav-top-current”.

thanks for your reply!

#7

Alright, try this block of code in place of the first and third example:

[php]

<?php $page = str_replace('/', '', $_SERVER['PHP_SELF']); ?>

[/php]

#8

hi OpzMaster,

thanks for your reply. I’ve tried that method before, and it does not output $page correctly in the body tag. for instance, it outputs this: tanzaniatravel.za.comindex.php on the index page. i’m not sure if it’s because i’m working on localhost, but the method i concocted (which is basically just a modified version of the code you suggest) gives the proper output (“index”, in the case of the index.php page).

now, although your method WRT the navigation should work fine, i was hoping that it could be even more dynamic. in other words, i thought i’d be able to do something like the following (i’m gonna use normal language so as not to confuse myself)

if the current navigation item = the current page
then
add to only the current navigation item a class of nav-top-current.

thanks!

#9

If you replace:

[php]$url = ‘tanzaniatravel.za.com’;
$page = $_SERVER[‘PHP_SELF’];
$page = str_replace("/","",$page);
$page = str_replace(".php","",$page);
$page = str_replace("$url", “”, $page);[/php]

With just simply:

[php]$page = str_replace(’/’, ‘’, $_SERVER[‘PHP_SELF’]);[/php]

You should only get the script name (i.e. index.php) as the value for page and therefor my script would work. When you said you tried it “this way”, did you mean this or did you keep the $url line?

#10

sorry, should have been clearer on my reply. yes, i tried the [php]$page = str_replace(’/’, ‘’, $_SERVER[‘PHP_SELF’]);[/php]
method. it does’t work. that’s why i changed it with my incredibly fantastic earth-moving party-inducing PHP (haha!)
but, that’s not the real problem. i’ve got this going on in the nav section now:

<ul class="nav-top">
	<li <?php echo ($page == 'index' ? 'class="current-nav-top"' : ''); ?>><a class="nav-top-lineheight" href="index.php" title="Tanzania Travel home">Home</a></li>
  <li <?php echo ($page == 'about' ? 'class="current-nav-top"' : ''); ?>><a class="nav-top-lineheight" href="about.php" title="Why use TanzaniaTravel.Za.Com">Why us</a></li>
  <li <?php echo ($page == 'overview' ? 'class="current-nav-top"' : ''); ?>><a href="overview.php" title="Overview and area map">Overview and area map</a></li>
  <li <?php echo ($page == 'southern-circuit-parks' ? 'class="current-nav-top"' : ''); ?>><a href="southern-circuit-parks.php" title="Southern Circuit Parks">Tanzania National Park</a></li>
  <li <?php echo ($page == 'lodges-camps' ? 'class="current-nav-top"' : ''); ?>><a href="lodges-camps.php" title="">Tanzania Safari Lodges</a></li>
  <li <?php echo ($page == 'tour-itineraries' ? 'class="current-nav-top"' : ''); ?>><a href="tour-itineraries.php" title="">Tanzania Tour Itineraries</a></li>
  <li <?php echo ($page == 'dates-prices' ? 'class="current-nav-top"' : ''); ?>><a href="dates-prices.php" title="">Safari Dates &amp; Prices</a></li>
  <li <?php echo ($page == 'zanzibar-kilimanjaro' ? 'class="current-nav-top"' : ''); ?>><a href="zanzibar-kilimanjaro.php" title="">Zanzibar Kilimanjaro</a></li>
  <li class="<?php echo ($page == 'contact' ? 'current-nav-top' : ''); ?> nav-top-last-li"><a class="nav-top-lineheight" href="contact.php" title="">Contact Us</a></li>
</ul>

it works fine, but it’s not as dynamic as i’d hoped it would be.

#11

Hi there,

Just a thought, I’ve quickly thrown together the sort of thing I sometimes do:

<?php
$main_nav = array(
				"Homepage" => array("home","Go to homepage")
				, "Another Page" => array("another-page","Another page to look at")
			);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <?php
		foreach($main_nav as $text => $info)
		{
			$link = $info[0];
			$title = $info[1];
			$class = ($page == $link) ? " class=\"current-nav-top\"" : "";
			echo "<li".$class."><a href=\"".$link.".php\" title=\"".$title."\">".$text."</a></li>";
		}
        ?>
    </body>
</html>

Don’t know if that may be a bit clearer and more automated than what you are using?

#12

hi Smokey,

that would seem to be a more dynamic solution. creating an on-the-fly menu. thanks so much for the reply. have a good weekend!

thanks to all who posted! the journey continues!

Sponsor our Newsletter | Privacy Policy | Terms of Service