Today’s post is a short tutorial on how to
create this type of navigation with a couple of short snippets of PHP
code, clean and lean HTML markup, and one PHP include file for your
entire site.
User-friendly Contextual Navigation with Simple PHP Includes
With some basic, simple-to-use PHP
and one PHP include file, you can customize your navigation so that the
current page does not have a live hyperlink to itself. In addition, you
can manage your entire site’s navigation from that one include file,
making your site’s navigation management convenient, efficient, and
easy to maintain. Today’s post is a short tutorial on how to create
this type of navigation with a couple of short snippets of PHP code,
clean and lean HTML markup, and one PHP include file for your entire
site.
There are a multitude of ways to accomplish this, but
I’ll show you a very basic approach that’s easy to implement, an
approach that I use as the starting point for my site design and
development projects. I’m writing this with the idea that you know at
least a little about PHP already.
- To follow along with this tutorial, create a new file for your navigation. Let’s keep it simple for now:
<ul>
<li><a href="/">Home</a> </li>
<li><a href="/about/">About Us</a> </li>
<li><a href="/contact/">Contact Us</a> </li>
</ul>
You
can probably name that file with a variety of file extensions,
depending on your server’s configuration, but for the moment, let’s
name it nav.php. To help keep your files organized, consider putting your include files in one directory, such as a directory called includes.
- You
can also go ahead and create 3 simple HTML webpages if you wish - one
for home, one for About Us, and one for Contact Us. Don’t worry about
filling any content in for them - just 3 basic HTML pages.
OK, on to the magic of PHP...
- The first step is to give each webpage a name using some PHP. Later we’ll use PHP to reference that name in the navigation.
At the very top of your webpage, before the doctype, add a PHP value to name your page. Here’s the PHP code for top of the Home page:
-
<?php $thisPage='home';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD ...
...
The top of the About Us page:
<?php $thisPage='about';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD ...
...
The top of the Contact Us page:
<?php $thisPage='contact';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD ...
...
- Next,
add a little PHP to your navigation markup so that when it’s the home
page, there won’t be a link, and otherwise the home page will have a
hyperlink.
<li> <?php
if ($thisPage=='home')
{echo 'Home';}
else
{echo '<a href="/">Home</a>';}?> </li>
That bit of PHP says that if the page name = 'home' to echo this (Home with no link); else (otherwise) echo that (Home with a hyperlink). So, the navigation links via your home page would look like this:
-
Continue with the next navigation item:
<li> <?php
if ($thisPage=='about')
{echo 'About Us';}
else
{echo '<a href="/about/">About Us</a>';}?> </li>
Then, visitors to the About page would see this navigation:
Repeat for the Contact Us page:
<li> <?php
if ($thisPage=='contact')
{echo 'Contact Us';}
else
{echo '<a href="/contact/">Contact Us</a>';}?> </li>
Then, visitors to the Contact page would see this navigation:
So, your navigation behind the scenes should now look like this:
<ul>
<li> <?php
if ($thisPage=='home')
{echo 'Home';}
else
{echo '<a href="/">Home</a>';}?> </li>
<li> <?php
if ($thisPage=='about')
{echo 'About Us';}
else
{echo '<a href="/about/">About Us</a>';}?> </li>
<li> <?php
if ($thisPage=='contact')
{echo 'Contact Us';}
else
{echo '<a href="/contact/">Contact Us</a>';}?> </li>
</ul>
Note
that I do recommend removing the excess carriage returns after you’ve
tested the navigation and have finalized it for your website project.
I’ve formatted them here to help make the code easier to understand
visually, that’s all.
- Then, within your Home, About
Us, and Contact Us webpages, add a PHP include where you want the
navigation. Here’s how I include the nav.php file:
...
<body>
<?$root = $_SERVER['DOCUMENT_ROOT'];include $root . '/path/to/includes/nav.php';?>
- Upload
the files to your Web server’s test area for testing. As always, it’s
important to test your pages to make sure everything works as intended.
Use some CSS to style your navigation, and you’re set!
You
can use this basic concept in a multitude of ways for your site and to
build upon this very basic concept. In addition to the navigation, I
use this basic concept for the topmast area, the footer area and bottom
of page navigation, section navigation, and elsewhere. Another helpful
use for a PHP include is for the goodies between your <head> </head> element tags.
To
make site management easier, consider information or page elements that
are repeatedly used within your pages, as you can use PHP includes for
these along with a little PHP where needed to customize the content for
pages needed.
In conclusion, what I’ve shown above is just one
of the millions of different ways to accomplish the same thing with
user-friendly contextual navigation. I’ve found the above approach to
be a pretty basic concept that can be built upon and used in a
multitude of ways, too.
|
