Include same header and footer in multiple html files

Question

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?

Answer 1

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>

Answer 2

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.