.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
Current Page with PHP and CSS
It is important to let your visitors know what page they are currently viewing.
You can always change the HTML code on each page to show which page is the current page, but this method can be a real headache to code and maintain. It is much easier to use programming to determine the current page. There are many program languages that can be used to determine the current page like PHP, Perl, ASP, etc. I like to use PHP for several reasons.
- PHP is a free program language and works on LYNUX operating systems.
- PHP can be embedded in the HTML code.
- PHP is easy to learn.
Step 1:
Create 3 images to use for backgrounds for your navigation links. The images below are 30px (width) X 25px (height).
bullet.png
- This is the navigation link
mouseover.png
- This image will display when you mouse over a link
current.png
- This image will display beside the navigation link to the current page.
Step 2:
- Set up your navigation list using unordered list <ul></ul>.
- Home
- Product 1
- Product 2
- Wrap the list in a <div id="sidemenu"> tag.
Copy and paste this code into
your HTML
Step 3:
Add the links to your navigation.
- Home
- Product 1
- Product 2
Copy and paste this code into your HTML
Step 4:
- Create the CSS for the <div id="sidemenu">
- Create a CSS class to display a different background for the current page. Name the class: current
Step 5:
Baiscs of PHP
- PHP code must start with <?php and end with ?> and it must be placed in the code view if using Dreamweaver.
- PHP is rendered on the web hosting server.
- You will not see the PHP code when you view the source code in the browser.
- You must put the code on the web hosting server and view in the browser to see the results of the PHP code.
This is an example of a simple PHP script to determine the current file name. Copy the code and place it on your webpage in the <body> and before the navigation links.
- PHP code to get the current path and file
You should see a line of code similiar to:
currentFile = /4_Physical_Design/Coding_HTML/Coding_HTML_Current_Page/Current_Page.html - PHP code to get hte file name only
You should see a line of code similiar to:
currentFile = Current_Page.html
NOTE: Your file may have to end with the extension .php depending on how your web hosting server is set up.
Step 6:
Once you have PHP code working to determine the current file, then you can create a line of PHP code to print class for the current page.
- Start by setting up a regular link:
<a href="index.html">Home</a> - Add a class="current" to display the link
<a href="index.html" class="current">Home</a> - Test and make sure the current link displays your current image
- Add the PHP code to the link to let PHP determine the current page
<a href="index.html" <?php if ($currentpage=="index.html") {echo 'class="current"';} ?> >Home</a> - Test your page to make sure it is working correctly and the current page has a different background image displayed.
Step 7:
Make sure you test each step.
Page last updated: May 31, 2012 10:27 AM
Content and Navigation...