Include Same Header And Footer In Multiple Html Files

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 foot

Solution 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>

Solution 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.