APC Article: How to automatically include your header, navigation, and footer on every page

JeevesBond posted this at 23:29 — 19th March 2009.

Joined: Jun 2002

This article was written by TWF regular Greg Sanderson:

Have you ever wondered how large websites handle those repetitve elements that appear on every page? The navigation menu, header, and footer usually stay the same on every page of a website. But what happens when you want to change something? Do you have to edit every page and change it separately?

http://www.apaddedcell.com/how-automatically-include-your-header-navigat...

This topic is for discussion and questions about the article.

a Padded Cell our articles site!

decibel.places posted this at 03:17 — 20th March 2009.

He has: 1,494 posts

Joined: Jun 2008

There are other ways, including using JavaScript... I am doing that for an events list (block) on a static HTML site that also has an events-specific admin feature that reads a js file and writes the updated events list back to the js file with PHP.

But I generally use PHP includes/requires for repetetive elements.

A useful technique for navigation would be to add an "active" class to the current page's nav to indicate which page you are on in the nav with special styling. This can be done by parsing the URL and adding the class to the menu with PHP.

greg posted this at 13:05 — 20th March 2009.

He has: 1,581 posts

Joined: Nov 2005

decibel.places wrote:

It is more work to get Javascript to be secure, and if you are using include files with variables and other security checks, like "is_logged_in? is_admin?" etc, PHP is a much better option.

I don't know your code so may well be worthwhile and practical, but isn't using JS WITH PHP in that circumstance a bit pointless? Why not just use PHP?
Having workarounds to ensure it's secure, either hidden from the user or especially if you're using a JS rendering engine, will make it a lot slower than it would be with PHP.

decibel.places posted this at 23:39 — 20th March 2009.

He has: 1,494 posts

Joined: Jun 2008

greg wrote:

I don't know your code so may well be worthwhile and practical, but isn't using JS WITH PHP in that circumstance a bit pointless? Why not just use PHP?

[EDIT] see what I am talking about

1. Events code is added to a static HTML page that designer is editing in Dreamweaver. Files are already named with .html extensions and not sure if PHP is enabled in HTML files... and don't want to get involved with a database for a few event data...

2. using JS I can update/store the HTML code for the events div as a single JS variable ("events") and then with JS I can set document.getElementById('events').innerHTML = events;

3. I find DOM manipulations easier with JS than with PHP

I often combine PHP+JS for many functions more commonly implemented with AJAX. My techniques don't require an XML file and need fewer server requests...

pulseraiser posted this at 15:48 — 1st June 2009.

They have: 10 posts

Joined: May 2009

Thats the work of a master page. Try searching with master page you ll sure to find something.

Quicksolver posted this at 15:01 — 11th October 2009.

They have: 7 posts

Joined: Oct 2009

What about the opposite: Coding the header, footer and navigation into one page, and having the content change according to the URL instead? That's also a good way of not having to rewrite everything for all pages.

Greg K posted this at 15:21 — 11th October 2009.

He has: 2,145 posts

Joined: Nov 2003

I did this method for a local college once. The idea was to give the dean the ability to change the main content via Dreamweaver, but not have to worry about the main JS drop down nav, and all the dynamic news/events sections.

The "pages" he edited had a two column table in them, the left section nav, and the main content. The main template opened up the individual .html files he edited, parsed out the "Last updated Date" that dreamweaver automatically updated, and the two columns from the table to use in the main template.

It worked really well, allowing him to easily edit content on all pages and now have to worry about the rest of it.

(Note, some people asked why I didn't use Dreamweaver's built in template system that lets you edit a master template and have it update the individual pages. This does work pretty well for small sites, however with over 350 pages, was not practical.)

Quicksolver posted this at 15:51 — 11th October 2009.

They have: 7 posts

Joined: Oct 2009

Indeed; regardless of what you use to simplify the work, I think it's a lot simpler for the server (and the dev) to focus on the content rather than worry about what they need to include for the whole page to appear correctly. As long as the content doesn't interfere with the layout it's included in, I don't think it should be a big issue the site is entirely viewed from one 'index.php' file.

For smaller or pseudo-dynamic sites, it's better to use the individual .php file per purpose approach, with included headers and footers as outlined in the article.

sherlizz posted this at 20:35 — 25th December 2011.

They have: 1 posts

Joined: Dec 2011

wow, just tried it. Okay just did with one page, so the rest must be adjusted... Just Awesome. I'm just a hobbyist and PHP is over my head really. But just following the simple steps and BOOM it worked! Thanks so much for this neat tutorial. What a delight being able to make the changes in just one include page and have it work on the whole site. Magic!!!

shruti_gupta posted this at 12:57 — 13th January 2012.

They have: 1 posts

Joined: Jan 2012

hi
can anyone help me with this code?
i m unable to work this code online.

index.php is like this:

<?php
$page_title = “Indiadiets, diets, Blood type Diets, Specific Blood Groups.”;
?>

<?php
 include(“header.php”);
?>

-content

and header.php is like this :

<?php
 echo $page_title; 
?>

...............................

tonyrome posted this at 10:27 — 29th February 2012.

They have: 2 posts

Joined: Feb 2012

I followed the instructions in the article above but I have a problem with the final result, which I hope someone can troubleshoot.

I have an index.php file, referencing a header.htm. The header contains a logo, picture and drop-down menu. If the header.htm file is displayed alone, ie. www.mydomain.com/header.htm, it displays correctly. However, when displayed as part of the index.php file, ie. www.mydomain.com/index, the header.htm file drops approximately 21px, almost as though there's a top margin set. However, all the margins are set to 0.

This causes a problem because the background of the page has a line running through the top (horizontally) and the header contains a continuation of the line. The lines are therefore not correctly aligned.

Any ideas why this is happening and how to fix it?

Also, I noticed that using

<?php
 include(“header.htm”); 
?>

doesn't work for me. I have to use 'header.htm' rather than "header.htm". Is this an error in the article or does it depend on the version of php being used?

Megan posted this at 14:46 — 29th February 2012.

She has: 11,421 posts

Joined: Jun 1999

tonyrome wrote:

Also, I noticed that using

<?php
 include(“header.htm”); 
?>

doesn't work for me. I have to use 'header.htm' rather than "header.htm". Is this an error in the article or does it depend on the version of php being used?

I really don't know about this. The official documentation uses single quotes, but I've used double quotes before without a problem ...

Could you post a link to what you're working on? Then we can see what's gong on. If you haven't already, look for the developer tools that come with your browser. In Firefox you need the add-on Firebug, which can tell you exactly where margins and padding are being applied, and lets you change the values in the browser.

Megan
Connect with us on Facebook!

JeevesBond posted this at 15:36 — 29th February 2012.

He has: 3,956 posts

Joined: Jun 2002

This:

<?php
include(“header.htm”); 
?>

has proper speech marks, instead of the " characters (that are actually inch marks) everyone usually uses. So, yes, it was a problem with the original article. I've fixed it now and thank you very much for pointing this out, hopefully not too many people were hurt by that!

a Padded Cell our articles site!

tonyrome posted this at 20:01 — 2nd March 2012.

They have: 2 posts

Joined: Feb 2012

Many thanks for your reply, Megan. I have uploaded a quick example of the problem. Please go to http://www.anokhi.co.uk/test/header.htm and you will see the header and menu as it should appear. If you then go to http://www.anokhi.co.uk/test/index, you will be able to see the issue I mentioned.

Ron Wolpa posted this at 19:38 — 13th September 2013.

They have: 1 posts

Joined: Sep 2013

Quote:

(sic )Once you have mastered the technique you can revisit this tutorial and move on to the next section.

Very didatic the article. So that I expected the sequel on the next section as mentioned.
This method goes well with repetitive content pages. However most sites have a landing page with a different layout than the linked pages. That means I will have to create a 2nd 'includes' for the other pages.
On 2005 I took a too fast paced PHP maraton course ( 8 hours per day during 5 days ! ).
I remember the guy who was teaching showed us a way to modify sites with different layouts employing functions. I haven´t learned too much of course , it was too fast.
I have tried to find a tutorial on this matter.