OK. So the title may not really describe what this tutorial intends to show - I apologize for being ’sucky’ at giving effective title to my posts! But anyway, allow me to explain this little scenario that we all used to face until we each found a way to solve it.

Generally, in our website, we’d have our main navigation with button states, most common ones are for inactive and active pages. For example, if you’re viewing Home, the button’s background color would change to brown

home_active.jpg

… and when you’re viewing About page, the Home button reverts to default background color state and About changes its background color.

home_inactive.jpg

Last time, I changed the HTML code manually for each page, for example if the active button states are named "pageName_active.jpg" - I’d have to change each code for each page respectively and this of course is time consuming and not very applicable.

But with the power of PHP, I’ve discovered a way to make things a little bit easier! Lets assume that we WON’T be dividing our page into templates. We’d just be using one full page as it is - meaning it’d have the header, menu, main content, and footer all in the same page. I’d give another tutorial on how to make things wayy easiest with using templates later but now, lets just assume we have one static page for Home and About - and technically we have to change each code on each page to determine which menu’s active.

Firstly, lets make a simple page with a header, menu, main content and footer. You can do it any way you like but here’s mine. You may copy this into your HTML editor and save it to "home.php"- I’m using Notepad2

<html>
<head>
<style>
body {
    text-align:center;
    background: #f8f8f8;
    }
   
#wrap {
    width: 500px;
    padding: 10px;
    margin: 0 auto;
    text-align:left;
    background: #eeeeee;
    }

#menu {   
    border-bottom: 5px solid #FFF8C4;
    }

#main {
    height: 100%
    }
   
#footer {
    background: #cccccc;
    padding: 5px;
    }

</style>
</head>
<body>

<div id="wrap">
    <div id="header">
    <h1>Welcome to my homepage</h1>
    </div>
    <div id="menu">
    <img src="home.jpg" /><img src="about.jpg" />
    </div>
    <div id="main">
    <h3>Home</h3>
    <p>You’ll find cool stuff here..
    </div>
    <div id="footer">
    Footer
    </div>
</div>

</body>
</html>

This is what you’re going to get

So we already set up a basic page that has a header, menu, main content and footer. Assuming that we will only have 2 button states which are inactive page and active page, lets name our buttons "pageName.jpg" and "pageName_active.jpg" - as for now based on the example I’ve given we have "home.jpg" "home_active.jpg" "about.jpg" and "about_active.jpg" - you may download the source files at the end of this tutorial. If you look at our home.php - the home button is still in its inactive state, we need to change that so it’d display the active state. Here’s what we do. Open home.php and go to Line 33, and add this piece of code

<? $home = true; ?>

And go to Line 39, replace the existing code with this code

<img src="home<? if ($home) { echo "_active"; } ?>.jpg" /><img src="about.jpg" />

Save! And you’ll get this! Tada! Now our "home.php" is in its active state! Now how does it work? Lets go back to the first code that we added

<? $home = true; ?>

In this code here, we’re telling the browser that Hey! This is the $home page! You can name this any way you like BUT each page must have its unique name! about can be $about. contact can be $contact and so on. In the next code here, this could get quite tricky but its really really easy - just remember that our active button state for home is called home_active.jpg so in order to display that image all we have to do to our original code is to add "_active.jpg" after "<img src="home…" so here’s how we do it with PHP

<img src="home<? if ($home) { echo "_active"; } ?>.jpg" />

If this is $home, please echo "_active" - here’s one simple way to describe it. I won’t go into details about the { } the ; - you can ask any questions regarding all that in the Comments and I’ll try my best to answer it so you can understand!

 

Now that you’ve figured out how to do it for home.php! You can do it for about.php as well! Feel free to download the complete source files here and experiment it yourself! Till then!