Question

[Solved] 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 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?

Enquirer: Knocks X

||

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>
Respondent: phpsmashcode

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.

Respondent: carloswm85

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy