PHP include menu & class active CSS

HTML & CSS
7

It’s called ‘start using variables’. (and while at it lose the pointless DIV for nothing around the UL)… even easier if you start using functions, because then all your ‘common’ elements that appear on every page can go into a SINGLE include file. You may also wish to consider using single quotes in your PHP, so when it comes time to start using echo you’re not reversing them – and single quotes are faster/more predictable in behavior.

your document:


<?php
	include('includes/theme.php');
	theme_header('','Site Title','home');
?>
Your content here
<?php
	theme_footer();
?>

theme.php


<?php
function theme_header($pageTitle='',$siteTitle,$pageShortName) {
	echo '<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	',(isempty($pageTitle) ? '' : $pageTitle.' - '),$siteTitle,'
</title>

</head><body>

<div id="pageWrapper">

	<h1>',$pageTitle,'</h1>
	
	<ul id="mainMenu">
		<li>
			<a',(
				$pageShortName=='home' ? ' class="current"' : ''
			),' href="index.php">Home</a>
		</li><li>
			<a',(
				$pageShortName=='portfolio' ? ' class="current"' : ''
			),' href="portfolio.php">Portfolio</a>
		</li><li>
			<a',(
				$pageShortName=='about' ? ' class="current"' : ''
			),' href="about.php">About Us</a>
		</li><li>
			<a',(
				$pageShortName=='blog' ? ' class="current"' : ''
			),' href="blog.php">Our Blog</a>
		</li><li>
			<a',(
				$pageShortName=='contact' ? ' class="current"' : ''
			),' href="contact.php">Contact Us</a>
		</li>
	</ul>
	
	<div id="content">';
}

function theme_footer() {
	echo '
	<!-- #content --></div>
	
	<div id="footer">
		Site disclaimer here
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>';
}

?>

Then you only need one class to say which one is ‘current’, just by changing what you feed it for values… and you can make a second function like ‘theme_footer’ in the same file containing your <div id=“footer”></div></body></html> or whatever else goes at the end. One less include means one less OS file request – always a good thing.

Looking at the code you presented, I think the extra div for nothing is a hefty part of your issues, since you’re sending list-style to it when a DIV doesn’t take list-style…

Personally I hate the id on body trick because it results in massive CSS (declaring each and every single one) and bloated markup (classes on each and every single one regardless of it’s state)… a little simple PHP fixes it right up making things clearer and using just a wee bit less bandwidth.