Skip to main content

How to create Sidebar and Footer files in static HTML page

Do you want to create custom, standard footer and sidebar files to be served constantly and uniformly on all your web pages just like in WordPress?

Perhaps, creating a sidebar.html and footer.html is a good idea for your static HTML site. It will save you time and effort.

Here is the script. Place it before the </body> tag of every HTML pages:

First, make sure you've loaded the JQuery file in your HTML page.


<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>

And here's the code to call your sidebar and footer in your HTML pages.


<div data-include="sidebar"></div>
<div data-include="footer"></div>

Then upload your sidebar.html and footer.html files to your main root directory.

Using the same method, you can also have notification bar on top of your webpage. You can edit this particular file, only when needed, and not all the pages, and it will be served uniformly on all your web pages - saving you enormous time.

Are you thinking of the 'Header' file? Sorry about that, you can't because you'll need to change the meta tag content for every article you publish. If you are not using the meta tags, then perhaps you can choose to have a header file too.

Update: You can use JavaScript to change the meta-tags of your page. I have verified that Google does index these client-side changes for the code below.


<script type='text/javascript'>
document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";
</script>

If you find this post helpful, kindly consider sharing it on social. If you face any problem, let me know in the comment below.

How to create Sidebar and Footer files in static HTML page

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM