3

I am editing about 60 html files by hand and want to include an identical header and footer in each file. For maintenance purposes, I want to be able to update the header and footer on all pages simultaneously as needed. I think the old-fashioned way to do that was using frames, and the new one is PHP.

The problem is that I need to maintain the current URL structure of the site, and all current pages have a .html extension, which seems to bar using PHP without changing server settings.

I found this answer (Make header and footer files to be included in multiple html pages) which suggested using jquery, but the code is not working for me.

Am I stuck editing every file by hand with every header/footer update?

Community
  • 1
  • 1
Knocks X
  • 772
  • 1
  • 10
  • 22
  • 1
    `but the code is not working for me.` is not gonna help us. Can you brief on that ? – Shankar Damodaran Dec 01 '13 at 06:45
  • Nothing happens. It doesn't seem to be calling the header.html. If you look in the comments of that question, it wasn't working for other users either. – Knocks X Dec 01 '13 at 06:46
  • Did you put the Jquerys includes in your pages? And did you edit your htmls to put the divs with the header and footer ids ? – Jorge Campos Dec 01 '13 at 06:48
  • I used the exact code provided in the answer. – Knocks X Dec 01 '13 at 06:49
  • Thats why isn't working. You should put the include for some version of the JQuery. Your html pages doesn't know that it exists. It is something like: `` – Jorge Campos Dec 01 '13 at 06:54
  • You really can't just create a new .htaccess file ? what web host do you use? – Ohgodwhy Dec 01 '13 at 06:54
  • Jorge Campos: I am not familiar with jquery and was not aware of that. Should I have a copy of that javascript file residing on my server? – Knocks X Dec 01 '13 at 06:56
  • Ohgodwhy: I have my own server. It just doesn't seem to be a good practice to run php files with a html extension, at least intuitively – Knocks X Dec 01 '13 at 06:57
  • why is it not good practice...it's done all the time outputting `.html` extension from multiple different server languages and it's not difficult to configure server to allow php compiler to run in `html` extension either – charlietfl Dec 01 '13 at 07:15
  • If you have to maintain 60+ pages I recommend you to use master page system, you'll have to change `index.html` to `index.php` but other pages could keep `.html` extension, if you're interested in this you can look at my answer to similar question [HERE](http://stackoverflow.com/questions/18937026/insert-page-in-html-design/18937678#18937678). – mdesdev Dec 01 '13 at 07:31

2 Answers2

4

jQuery's load() function can be used for including common headers and footers. The code should look like:

<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>

Check the following URL for more description:

http://phpsmashcode.com/tips-and-tricks/include-common-files-in-html

Or you can use AJAX to load common headers and footers:

  $.get('header-menu.html', {}, function(response) { 
    $('div#nav').append(response);
  });

  $.get('footer.html', {}, function(response) { 
    $('div#footer').append(response);
  });

It will load the footer and header into the following <div>s respectively:

<div id="nav"></div>

<div id="footer"></div>
Sebastian Zartner
  • 16,477
  • 8
  • 74
  • 116
phpsmashcode
  • 796
  • 6
  • 16
  • this way it seems we are loading the same stuff again and again. Why not load the content that has to be changed selectively using Ajax and leave header and footer intact? Wouldn't it save some bandwidth? – Sudip Bhandari Jan 21 '16 at 10:11
0

You can also use a non-technical technique. For example, use the ADVANCED search-replace tool from VSCode (Ctrl + Shift + H, or Edit → Replace in files), and look for the piece of code you need to change in ALL your files in your project folder (for example, the footer). Once you find it, replace it with the "Replace All" mini-button.

If you want to replace the portion of code at the end of the project, you could add a marksman-tag to your code. For example" <footer>ChangeMeLater</footer> Then, at the end of your project, you look for that mark with the search-replace tool and you make the change with you already finished footer. You can change the code even including spaces and enter lines, just be careful how you target the code/words.

I know this is not PHP, but you may find it handy.

carloswm85
  • 326
  • 3
  • 10