How to find and replace code in HTML templates?

The idea of this short tutorial came to me after a support request. I think more people can benefit from the answer to:

What is the best way to replace the same menu in all pages (HTML template)?

Indeed, with an HTML you cannot dynamically change the look of your web as you would easily do with a WordPress website. With static HTML pages, you can’t do anything dynamic, so if you change an element in header, sidebar, footer, you must then replace the new element in each file of the HTML template. This may not be a big deal when there are a few files involved but what do you do when you manage tens of files? There must be a different, more “dynamic” way, right? So, this takes us back to the initial question, how do we replace the same menu in all HTML pages?

Best solution to find and replace code in HTML templates

First, download Brackets. Brackets is an open source text editor which I highly recommend for editing your HTML templates.

  1. Open the folder with Brackets.
  2. Click on Find > Replace In Files (or right-click a folder and select Replace In… to limit the scope)
  3. Review changes and replace.

To help you better understand how to find and replace blocks of code in HTML templates, here’s a quick demonstration video using our free HTML template Mediumish. We will make a simple menu item replacement.

This is a beginner’s tutorial. You can use much more advanced solutions, such as Jekyll.

Tips & Tricks Tutorials

Let's stay in touch, please! We'll send you stories similar to "How to find and replace code in HTML files" if you join our newsletter. It's free and you can unsubscribe at anytime!

You may also like:


WowThemesNet membership

We create themes & templates
Take a look at our
newest themes

wow thems Join our free newsletter

Let's keep in touch! Get new themes, updates, discounts and important news for your website straight to your inbox. You can unsubscribe at anytime!

Yes, I'd like to hear about your products and news. Privacy Policy