Update Your Website Menu in One File with PHP

One of the first problems you may run into when developing websites with HTML is the laborious nature of menu updates. If you want to add a new section to the navigation menu of your website you have to add it to each separate HTML file and if your website has several pages this soon becomes a time consuming and boring task. Wouldn’t you prefer to be able to have a separate file for your menu, your header and your footer? That way you if you make any changes you only need to edit one file and the entire website will be updated.

Now you have probably heard of PHP. You can use PHP to do all kinds of fancy things like dynamically creating new pages, building user input forms and returning queries from an SQL database. However you can also use it to make updating your menus nice and easy and it is very simple to set up.

If you’ve taken the time to learn HTML and CSS then you may be put off by the idea of learning another language but if all you want is an easy menu update solution then you will not find PHP taxing at all.

First of all you will need to make sure PHP is installed on your website server. Many hosting companies provide it or you can install it yourself. Make sure you check this before you begin.

For each page on your website you will need to create a PHP file. You can still use PHP in conjunction with HTML and CSS. Now say we want a simple page with a header, a navigation menu on the left and a footer. You would create an HTML page for each element and one for the content of the page. Use your normal CSS or HTML to order the layout and then create a PHP file to pull it all together. To create a PHP file simply write the code in your normal editor, I use wordpad or notepad and then save the file as a .PHP file.

You can add HTML and your usual CSS tags to the PHP file which means your HTML file will only contain the content. This keeps it nice and clean and easy to edit. We’ll have a look at that later first let's say we want to include a menu file on our page using PHP. Your menu file could be a simple HTML file which includes the following –

<a href=http://www.yourdomain.com/index.php>Home</a><br />

<a href=http://www.yourdomain.com/about.php>About</a><br />

<a href=http://www.yourdomain.com/links.php>Links</a><br />

<a href=http://www.yourdomain.com/contact.php>Contact</a><br />

If you save your menu file as menu.html then you could reference it in your index.php file like this –

<?php include (“menu.html”); ?>

You can also include basic HTML for the content of the page so for example –

<?php include (“menu.html”); ?>

<p>This is the content for our index page.</p>

If you prefer you could also have the content for your page in a separate file in which case you would save the following as index.html

<p>This is the content for our index page.</p>

Then your PHP file would look like this –

<?php include (“menu.html”); ?>

<br />

<?php include (“index.html”); ?>

The code above will not have a great layout; the menu will appear with the content under it which isn’t much use. You will still want to format the layout of your pages which you could do with HTML like this –

<table><tr><td>

<?php include (“menu.html”); ?>

</td><td>

<?php include (“index.html”); ?>

</td></tr></table>

However, it is best done with div classes in a CSS (Cascading Style Sheet) file. Let's say we have separate files for our header, our navigation menu, our footer and our content and we have set up div classes for each in our CSS file then your PHP file would include the following –

<link rel="stylesheet" type="text/css" href="yourstylesheet.css"/>

<div class="header">

<?php include ("header.html"); ?>

</div>

<div class="navigation">

<?php include ("menu.html"); ?>

</div>

<div class="content">

<?php include ("indexbody.html"); ?>

<br /><br />

<?php include ("footer.html"); ?>

</div>

The first line references our CSS file. Then our header class which is defined in the CSS file and specifies where to place the header and any style points.

Then our header.html which will include the actual content for the header, for example –

<img src="images/yourbanner.jpg" width="600" height="50" border="0" alt="Your Website" title=" Your Website " />

The same applies for each section. As you can see PHP is very easy to use and extremely versatile. If you do decide to create a separate file for the content of your page which your PHP file references then I’d suggest naming it slightly differently as in the above example. If the above code was saved in a page called index.php and referenced an HTML page then call the HTML page indexbody.html to avoid any confusion.

If you need further information or tutorials check these links –

W3 Schools PHP Tutorials

W3 Schools HTML Tutorials

W3 Schools CSS Tutorials