How to put the same element on every page

Reading time: 1 minute(s)

Using JQuery to load HTML on any page (header, navbar, sidebars, footer)

Instead of manually placing a header, navigation and footer in your code (and then having to edit every single page in order to make a single change that reflects everywhere) you can dynamically load these pieces from a single file.

  • Create HTML files for each of these ‘pieces’ (you can have as many as you’d like!)
Example: header.html, navigation.html, footer.html, sidebar.html, etc.
  • Inside of each of these HTML files, place the code for each of these pieces.
For example, you might want a div class="header"></div> in header.html, or a div class="navbar"></div> in navbar.html, with your code inside of them.
  • Create a file called load.js (this can be named anything) and copy the following code in it (you may need to modify it a bit for the id/path names):
$(function(){
      $("#header").load("https://yourwebsite.neocities.org/header.html"); 
      $("#navigation").load("https://yourwebsite.neocities.org/header.html"); 
      $("#footer").load("https://yourwebsite.neocities.org/header.html");
    });
Please note: The part that comes after .load is the path of these html files. I have had the best luck using this with fully qualified URLs (beginning with https).
  • Step 4: On each of your pages that you’d like these elements to show up on, paste the following code in between your <head> tags:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- if you changed your file name be sure to change it here below -->
    <script src="/load.js"></script> 
Note: The /load.js will only work if your load.js file is in the root (home) directory. If it isn't, you must include the path of the file
  • Step 5: Create an empty div on the page which matches the ID (the part with the #) specified in the JQuery code. For example:
<!-- keep these empty! -->
<div id="header"></div>
<div id="navigation"></div>
<div id="footer"></div>
  • Note: When previewing your page, you may need to do a hard refresh with ctrl+F5 to refresh everything.
  • Tip: When you update the individual .html files, Neocities will push an ugly update thumbnail to your feed. To remedy this, I always try to make two changes at one time – one in the template files, and another on a different page that I want my thumbnail to be.

1 thought on “How to put the same element on every page”

Leave a Comment