PHP Menu Include function to reuse an html block on multiple pages

Overview:
When making websites frequently we want a navigation bar or menu to show on every page. Rather than repeating the code on every single page, which is virtually impossible to update and maintain, or worse, using frames, use PHP to automate this and build each page dynamically. PHP will just paste in the navigation or whatever you’d want represented on every page. To do this we use the php include function. You can use include() to show headers, footers, or any elements that you’d reuse on multiple pages. The include() function takes all the text in a specified file and copies it into the file that calls the include function. This is great for scalability and updating- instead of changing multiple files, only change one!
Here’s what a php include function looks like:
<?php include(“nav.php”); ?>

Steps:
1. Make the actual nav you want.

2. Put it into a php file (or any type of file, html, txt, as long as it’s formatted as html)

3. Place the php in your page to ‘print’ the desired file into your final html page before the browser renders the page using the include function. This spits out html. The viewer’s only see html, as that’s all it is, the php created the html file- That’s why it’s called PHP: Hypertext Preprocessor.

Example:
The nav.php file:

1
2
3
4
<p id="fromMenuPhpFile"> <a href="home.php">Home</a> |
<a href="about.php">About Us</a> |
<a href="portfolio.php">Portfolio</a> |
<a href="contact.php">Contact Us</a>

The homepage.php:

1
2
3
&lt;?php include("nav.php"); ?&gt;
<h1>Welcome to my home page</h1>
home page text lorem ipsum

And here’s a sample site with a nav bar containing 4 pages included through php for Home, About, Portfolio and Contact.

Download

phpNav.zip

This entry was posted in tutorial and tagged , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • RgCode

    thnx ….. you helped me alot :)

  • http://www.goodhomegoodlife.com Cherish

    I’ve spent almost whole day trying to make it right. Thank you!

  • Staffan Henningsson

    And if we want to make the menu more dynamic, say, by making the current page unlinkable, then we just add a conditional statement like ‘if’ and check e.g. the title of the page. We could also change the menu in other ways depending on the current page.

    An example;
    Say I want the menu on my Poetry page. Since I set the title by using
    My Page –

    I can use $title, i.e. Poetry, which I also happen to call the page, poetry.html, to change the way PHP generates the menu. I haven’t actually done this yet so I won’t go into how, but it should be pretty simple.

  • Recent Posts

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

    Screenshot-2013-11-27-14.20.16

    Add Links to Twitter Mentions, Hashtags, and URLs with PHP

    This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks! If you’re using the Twitter v1.1 API to fetch […]

    regex101.com

    Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

    Stumbled on a great regex tool today. An explanation of your regex will be automatically generated as you type. Detailed match information will be displayed here automatically. via Online regex tester and debugger: JavaScript, Python, PHP, and PCRE. Tweet

    CSS Dig

    A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity). Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Take a look at all your CSS […]

css.php