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.
- Open the folder with Brackets.
- Click on Find > Replace In Files (or right-click a folder and select Replace In… to limit the scope)
- 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 Gulp.