GetDotted Domains

Viewing Thread:
"Highlight your HTML hyperlinks, using PHP"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Wed 05/11/08 at 21:21
Regular
"It goes so quickly"
Posts: 4,083
[B][U]Highlight your HTML hyperlinks, using PHP[/U][/B]

Introduction

This article is intended to show you a method of using PHP in selecting which link in your navigation menu is the current link, and applying a different colour or style to it, with the aim of distinguishing it from other links to highlight sections of your web site.

This article assumes that the reader is familiar with HTML, CSS and PHP, and especially those who already use PHP to include page headers, navigation menus and footers across their web site. Therefore, this article can be considered an intermediate level.

If you’re new to PHP, or want to brush up your knowledge, you may want to first read Dr Jo’s simple php for recurring text in your web pages and / or a quick introduction to PHP, a server-side scripting language.

Highlighting hyperlinks!

If you take a look at many web sites, you’ll probably notice that a lot of them alter the look of a particular link from the sites navigational areas to reflect the section that you are currently in.

For example, if you look at this very web site, Freeola use the technique multiple times. At the very top of the page, there are three distinct sections of Freeola, which are:

- Freeola Internet
- Get Dotted Domains
- Gaming & Design

Whenever you’re in the "Freeola Internet" section, the background colour of the link is red, as is the main banner area. When you’re within the "Get Dotted Domains" section, the two areas are dark grey, while the "Gaming & Design " sections (the one this article resides under) is a dark green colour.

Within each of the three sections, there is a secondary navigation list of links, which also highlight sections you are currently browsing. For example, as this article is within the “Chat Forums” section, the background colour of the link is a dark grey / black, distinguishing it from the sections "dark green" theme.

If you take a look at screen shot 1, you’ll see these two highlights pointed out with a rather well put together arrow.

This effect is achieved using HTML (and possibly CSS), as each link is given a separate colour code to the rest of the web site. For example, an HTML code sample may look like this:

<table border="0">
<tr>
<td [B]bgcolor="[I]#ccc[/I]"[/B]><a href="home.php">home</a></td>
<td><a href="page1.php">page 1</a></td>
<td><a href="page2.php">page 2</a></td>
<td><a href="page3.php">page 3</a></td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>


… where the colour code "#ccc" is a light grey, which makes the background colour of the link stand out from the rest.

If you prefer HTML and CSS (well done to you if you do) your code might look like:

<style type="text/css">
// Navigation CSS here.
.currentnav {
background-color: #ccc;
}
// Other CSS here
</style>
�
<ul id="navigation">
<li [B]class="[I]currentnav[/I]"[/B]><a href="home.php">home</a></li>
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
<li><a href="page3.php">page 3</a></li>
<li><a href="contact.php">contact</a></li>
</ul>


… where the class "currentnav" refers to your CSS code for making the background colour a light grey. For brevity, neither example includes the entire HTML required to build up a web page.

Hand coding each page!

The above examples, if copied and pasted in to each of your web pages by hand, would need to be altered depending on each page, meaning that either the <table> would need the bgcolor attribute placed in each respective table row, or the class attribute from the unordered list would follow suite.


Navigation menu file!

For web sites that use a PHP include or other technique to replicate the same file across multiple web pages, you can insert a little extra code in to this file to add the extra HTML mark-up to your web page. You’ll need to edit your code to check which page refers to which hyperlink, and this is the main point of this article.

Starting from the basics!

I’ll make the assumption that you’ve got your header / navigation menu / footer as separate files, and that you called your navigation file "navigation.php", and are referring to it using the PHP code <?php include("navigation.php"); ?>, and it is this file that you’ll need to edit (so be sure to make a back-up first). You may be using a different file name, or a single PHP index file with each section in it’s own function, though the theory for this article is generally the same.

Within this file, I’ll start with a basic page menu using the unstyled unordered list element HTML code:

<ul id="navigation">
<li><a href="home.php">home</a></li>
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
<li><a href="page3.php">page 3</a></li>
<li><a href="contact.php">contact</a></li>
</ul>


… which within a web page, would look like this example.

Naturally, yours will have more / less links with perhaps a slightly different HTML mark-up. You may be using an HTML table to layout your links, so I’ll also include this as an example, starting with a simple example:

<table border="0">
<tr>
<td><a href="home.php">home</a></td>
<td><a href="page1.php">page 1</a></td>
<td><a href="page2.php">page 2</a></td>
<td><a href="page3.php">page 3</a></td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>


Editing your page!

First things first, you need to check for and grab the file name of the web page being used. This can be done with the pre-defined PHP variable $_SERVER['PHP_SELF']. Within this variable is the value of your web page along with any folders it is hosted in. For example if your web page was "http://www.example.com/blog/page1.htm", the value of $_SERVER['PHP_SELF'] would be "/blog/page1.htm". It is important to note the first slash at the beginning, as this will need to be included in your PHP checks.

It is this value that we use to check which web page is being viewed, and hence which hyperlink needs to be edited. To be on the safe side, we will first check that the information is available, and then place it in an easier to remember variable, named $thispage.

The bold code below will need to be placed above your links code within your navigation.php file. Whatever file name you use, ensure it has a .php or .php5 extension.

[B]<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>[/B]

<ul id="navigation">
<li><a href="home.php">home</a></li>
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
<li><a href="page3.php">page 3</a></li>
<li><a href="contact.php">contact</a></li>
</ul>


… the above reads as "if the PHP variable $_SERVER['PHP_SELF'] holds the name of the current file, copy the file name to a new variable called $thispage".

If you’re using an HTML table, the code is the same and needs to be placed above the links code:

[B]<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>[/B]

<table border="0">
<tr>
<td><a href="home.php">home</a></td>
<td><a href="page1.php">page 1</a></td>
<td><a href="page2.php">page 2</a></td>
<td><a href="page3.php">page 3</a></td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>


Next, we want to check each link to see if it matches the value of our new variable. This involves breaking up our HTML code and sliding in some PHP code. This may appear a bit complicated at first, as we are going to place the code within each of the HTML <li> (or <td>) elements, breaking them up in to sections of <li and > (or <td and >).

The code that checks if the HTML needs to be altered looks like this:

[B]<li[/B]<?php
if ($thispage == "[B]/home.php[/B]") { echo " class=\"currentnav\""; }
?>[B]><a href �[/B]

... or for HTML tables ...

[B]<td[/B]<?php
if ($thispage == "[B]/home.php[/B]") { echo " bgcolor=\"#ccc\""; }
?>[B]><a href ...[/B]


Remember the variable $thispage we created earlier? Well, we check this to see if it equals the name of the link we want to highlight. The text in bold will need to match whatever the file name you’ve used to create your pages, and the slash at the front needs to be included. If your web page is contained within a folder, such as "/blog/home.php", this folder would need to be written as well, such as:

[B]<li[/B]<?php
if ($thispage == "[B]/blog/home.php[/B]") { echo " class=\"currentnav\""; }
?>[B]><a href �[/B]

... or for HTML tables ...

[B]<td[/B]<?php
if ($thispage == "[B]/blog/home.php[/B]") { echo " bgcolor=\"#ccc\""; }
?>[B]><a href ...[/B]


The code echo is PHP code for output, though if you prefer to use print that is fine also. Note the extra space at the beginning of the output, before the word class. This is to ensure that we aren’t left with <liclass> � as our HTML output. The slashes in front of the quotation marks are to ensure PHP doesn’t stop early, they are being what is known as "escaped".

For a first example, I’ll only copy the code in to the first link:

<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>

<ul id="navigation">
<li[B]<?php
if ($thispage == "[I]/home.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="home.php">home</a></li>
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
<li><a href="page3.php">page 3</a></li>
<li><a href="contact.php">contact</a></li>
</ul>


Hopefully you can make out where the PHP code has been placed inside the <li> element for the "home" link. If you’re using an HTML table to layout your page, you code would need to go inside the <td> element of the link, and may look like:

<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>

<table border="0">
<tr>
<td[B]<?php
if ($thispage == "[I]/home.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="home.php">home</a></td>
<td><a href="page1.php">page 1</a></td>
<td><a href="page2.php">page 2</a></td>
<td><a href="page3.php">page 3</a></td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>


Again, note the space and escaped quotation marks.

It is important to see that the PHP code checks for the file name of the hyperlink, so it is checking if "/home.php" is the currently viewed web page. If it is, it will include the code " class="currentnav"" within the <li> element, giving your web page the HTML web page output of:

<ul id="navigation">
<li [B]class="currentnav"[/B]><a href="home.php">home</a></li>
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
<li><a href="page3.php">page 3</a></li>
<li><a href="contact.php">contact</a></li>
</ul>


… which then allows your web page to apply your chosen CSS code to this <li> element. If you’re using and HTML table, the result would be to include the code " bgcolor="#ccc"" within the <td> element, giving your web page the HTML output of:

<table border="0">
<tr>
<td [B]bgcolor="#ccc"[/B]><a href="home.php">home</a></td>
<td><a href="page1.php">page 1</a></td>
<td><a href="page2.php">page 2</a></td>
<td><a href="page3.php">page 3</a></td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>


If the file name does not match, then no extra HTML mark-up will be included.

One check per link!

Because we want to highlight each link if it is the current web page, we need to paste the same PHP code in to each of our links, and change the file name for each one to match the name of the link it is referring too.

For our HTML list of links, the code will look like this:

<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>

<ul id="navigation">
<li[B]<?php
if ($thispage == "[I]/home.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="home.php">home</a></li>
<li[B]<?php
if ($thispage == "[I]/page1.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="page1.php">page 1</a></li>
<li[B]<?php
if ($thispage == "[I]/page2.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="page2.php">page 2</a></li>
<li[B]<?php
if ($thispage == "[I]/page3.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="page3.php">page 3</a></li>
<li[B]<?php
if ($thispage == "[I]/contact.php[/I]") { echo " class=\"currentnav\""; }
?>[/B]><a href="contact.php">contact</a></li>
</ul>


Whereas the HTML table code would look like this:

<?php
if (isset($_SERVER['PHP_SELF']))
$thispage = $_SERVER['PHP_SELF'];
?>

<table border="0">
<tr>
<td[B]<?php
if ($thispage == "[I]/home.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="home.php">home</a></td>
<td[B]<?php
if ($thispage == "[I]/page1.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="page1.php">page 1</a></td>
<td[B]<?php
if ($thispage == "[I]/page2.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="page2.php">page 2</a></td>
<td[B]<?php
if ($thispage == "[I]/page3.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="page3.php">page 3</a></td>
<td[B]<?php
if ($thispage == "[I]/contact.php[/I]") { echo " bgcolor=\"#ccc\""; }
?>[/B]><a href="contact.php">contact</a></td>
</tr>
</table>


You can take a look at an online example, and view the source code.

This should hopefully be all you need to add the ability to highlight which section your visitors are within your web site.

Sites that use URL parameters to show content!

If you’re the sort of person who is using a single PHP file to service your web site, and uses URL parameters to select which content to show, you can easily make use of the above method. If you’re the sort of person who has no idea what this sentence means (URL piranhas, what??) it is highly likely you are not using this method, so there is no need to read this section.

URL parameters are generally past to your PHP scripts via the, well, URL, and look like "http://example.com/index.php?p=home" or "http://example.com/index.php?p=contact".

The code is almost identical, except for that we won’t be checking for file names, just generic variables. The first part of the page tries to grab the URL parameter $_GET['p'], which it is assumed is carrying the value of the page you wish to show the user. You may be using a different name, but the aim is to capture this value, strip out any HTML and PHP code that someone is trying to pass, and store it in the variable $p. If no URL parameter is passed, we assume this is the home page and assign the value "home".

Within the navigation links, we check for the value of the $p variable, in place of checking for file names.

<?php
if (isset($_GET['p']) && (!empty($_GET['p'])))
$p = trim(strip_tags($_GET['p']));
else
$p = "home";
?>

<ul id="navigation">
<li[B]<?php
if ($p == "home") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=home">home</a></li>
<li[B]<?php
if ($p == "page1") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page1">page 1</a></li>
<li[B]<?php
if ($p == "page2") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page2">page 2</a></li>
<li[B]<?php
if ($p == "page3") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page3">page 3</a></li>
<li[B]<?php
if ($p == "contact") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=contact">contact</a></li>
</ul>


… and of course, if you’re using HTML tables, your code may look like this:

<?php
if (isset($_GET['p']) && (!empty($_GET['p'])))
$p = trim(strip_tags($_GET['p']));
else
$p = "home";
?>

<table border="0">
<tr>
<td[B]<?php
if ($p == "home") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=home">home</a></td>
<td[B]<?php
if ($p == "page1") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page1">page 1</a></td>
<td[B]<?php
if ($p == "page2") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page2">page 2</a></td>
<td[B]<?php
if ($p == "page3") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=page3">page 3</a></td>
<td[B]<?php
if ($p == "contact") { echo " class=\"currentnav\""; }
?>[/B]><a href="all-in-one.php?p=contact">contact</a></td>
</tr>
</table>


You can take a look at an online example, and view the source code.

All clicked out!

So, there we have it, what I hope to be a simple little technique to making your site navigation stand out when your site users are browsing within sections of your web site.

As it has been a long time since I’ve written an article, my apologies in advance if I have skipped over an important aspect, or not explained a particular section clearly.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Fri 28/11/08 at 10:55
Regular
Posts: 391
2 late 2soon wrote:
> i want to make my own site..... how?

Well! You can either begin learning languages such as HTML and CSS or use InstantPro Website Builder that does it all for you ^_^

Either way, you'll need a domain name or you can use a free web address from Freeola500. If you don't wish to use InstantPro, then you'll need to purchase some web hosting.

... :D
Tue 11/11/08 at 18:56
Regular
"BLOODnTEARS"
Posts: 85
i want to make my own site..... how?
Tue 11/11/08 at 18:08
Regular
"It goes so quickly"
Posts: 4,083
That "simplehtmldom" looks interesting.
Mon 10/11/08 at 19:10
Regular
"Embrace the Martian"
Posts: 285
Alternatively you could use a bit less PHP (at least less repetition) and more CSS control to do the same kind of thing. Check this out:

In your header.php page which is included in every page of your site:

<?php
$this_page = $_SERVER['PHP_SELF']; // Gets current page as string
$this_page = str_replace(array(".","/"), array("-","-"), $this_page); // Replaces dots and slashes with hyphens for CSS compatibility
$this_page = substr($this_page,1); // knocks off the first pointless slash
?>
<html>
<head>
<body id="<?php echo $this_page; ?>">
<div class="branding"><a href="index.php"><img src="images/logo.jpg" alt="Our logo" /></a></div>
<ul class="nav">
<li class="home"><a href="index.php">home</a></li>
<li class="about"><a href="about.php">about</a></li>
<li class="contact"><a href="contact.php">contact</a></li>
</ul>


In your style.css page:

/** CSS for my site **/
body#index-php ul.nav li.home,
body#about-php ul.nav li.about
{ background-color: gold; }
body#contact-php ul.nav li.contact { background-color: red; }


So for each new link you add to the navigation you must simply add a new rule to the css page and a new list element in the navigation.
Mon 10/11/08 at 10:36
Regular
"NULL"
Posts: 1,384
As an alternative to this, check out the PHP Simple HTML DOM Parser (http://simplehtmldom.sourceforge.net/).

This does exactly what it says on the tin ;-) It's still pretty new and isn't perfect, but it is great for on-the-fly link checking.

Basically, rather than having to use an 'if' statement on every link, you can check the entire page at once. Whenever you find a link that links to the page you're on, it can be modified however you choose.

It's especially good if you have large menus or want to highlight links in the body of text or in dynamically generated content.

As well as highlighting links to the current page, you can also add in new logic - e.g. change the class for external links, put a special icon next to links to certain websites, or even automatically add a title to each link which corresponds to the title on the destination page!
Fri 07/11/08 at 19:29
Regular
"It goes so quickly"
Posts: 4,083
Would the old one not still be around somewhere? Though I think I remember when Special Reserve went bust, the forums closed, then opened, then closed again, so perhaps it was in that period I wrote it.
Thu 06/11/08 at 18:05
Moderator
"Are you sure?"
Posts: 5,000
Nice to see you back cjh :¬)

Looks like you disappeared back in March...

I often think about your 'forum etiquette' post - you should write another and I'll make it 'stickie'!

People still come here and ask a question and then b****r off without replying etc. :¬(





Search Freeola Chat
Thu 06/11/08 at 17:51
Regular
"It goes so quickly"
Posts: 4,083
Thanks Eccles.

I initially went with the ($thispage == '/blog/home.php') ? [B]' class="currentnav"' : ''[/B] method, but as I hadn't mentioned it in my PHP intro article, felt it would be the safer option to fall back on the if.
Thu 06/11/08 at 16:52
Regular
"Devil in disguise"
Posts: 3,151
Eccles wrote:
> Deprecated? Where's the evidence for this? php.net does not say
> is deprecated. You should not rely on short tags
> for code that is going to be distributed as short_open_tag is not
> enabled by default in the php.ini file. It is enabled on out
> servers however.

I hoped the !!! might hint that I wasnt entirely seriously. Guess not. :/ But if you want to be picky, the default is on. Its php.ini-recommended that has it set to off.

And since you've forgotten, last time I posted short tags on here, you said " You should always avoid shorthand tags, it doesn't save time anyway!". Hence my amusement at you posting short tags.

;)
Thu 06/11/08 at 16:05
Staff Moderator
"Aargh! Broken..."
Posts: 1,408
Deprecated? Where's the evidence for this? php.net does not say short_open_tag is deprecated. You should not rely on short tags for code that is going to be distributed as short_open_tag is not enabled by default in the php.ini file. It is enabled on out servers however. It was the slight modification escaping strings I was suggesting anyway, not changing from <?php ?> to <?= ?>.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Excellent
Excellent communication, polite and courteous staff - I was dealt with professionally. 10/10
I've been with Freeola for 14 years...
I've been with Freeola for 14 years now, and in that time you have proven time and time again to be a top-ranking internet service provider and unbeatable hosting service. Thank you.
Anthony

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.