In the beginning, all websites were made with text and static HTML. There was no WordPress and need to convert HTML website to WordPress or any other CMS system.
Many businesses are still relying on simple HTML websites for their online presence. These HTML sites are usually static in nature.
This means that even changing a minor detail on the website is done by editing the coding file.
Now over 20 years later, the web is a much different place.
Powering over 25% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user.
Web sites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.
Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website?
No matter how your site is coded, once a visitor loads a page on your site, the browser takes all the bits and pieces (server-side includes, images from another directory, etc.) and puts them all together in a final static HTML page.
Even if some elements on the page are still dynamic, the code itself is all together in one spot that can be moved into a WordPress page that would still work.
There may be some exceptions to that but for most of the sites out there, that would be true.
Even if your site consists of somepage.php, which calls a file named header.inc, and a file named footer.php, when the user views somepage.php in a browser, the resulting source code is all in one place, as though it were hand-coded as a static HTML page.
This is the type of code that is needed to convert a site to WordPress.
Anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality.
Migrate from Static HTML Site to WordPress Pre-steps
If you’re ready to switch to WordPress, below are four steps to take into account:
#1 Analyze Your Existing HTML Site
Check your site for irrelevant or outdated content and if found, clean it up. Examine the current navigation system and think how it can be improved.
Doing your HTML site analysis would help you decide what content, features, and functionalities should be migrated to WordPress.
This will give a clear idea about what plugins you need to install for getting the same functionality on WordPress platform.
#2 Get to Know WordPress
WordPress installation is a quite easy process. Most web hosts offer one-click install.
If not familiar, it would be good to read and inform about new platform your site will be working on.
#3 Do a Backup of Your HTML Site
It is strongly recommended to take a complete backup of your static site to avoid any risk of data loss while migrating.
#4 Convert HTML Website to WordPress
Assuming you have sufficient coding knowledge, and your site is small, the best option possible in front of you is to divide your existing HTML code into four sections (header, footer, sidebar, and content) and then copy the content of each section into its respective PHP file.
In case your site is large, you can take advantage of an HTML to WordPress plug-in, like HTML Import 2 or hire someone to convert HTML into WordPress.
How to Convert HTML Website to WordPress Tutorial
How you choose to convert your static HTML site into a WordPress site will no doubt depend on your personal preference, desired time/monetary investment, and skill level with code.
Convert HTML Into WordPress Method #1
With this method to Convert HTML Website to WordPress, you will keep same design and look of the site.
1. Download the HTML pages from your current host. Use WinHTTrack for doing this.
It’s a great free tool which is very easy to use. Make sure you grab the image folder too (or wherever you have your images on the old site).
2. Install WordPress at your new web host.
a. Set your permalink structure to “Post name” (/%postname%/)
b. Check the box, “Discourage search engines from indexing this site” (just until everything is done)
c. Install some Maintenance Mode plugin (if you wish) so that nobody but you can access your new WordPress.
d. Install free WordPress plugin HTML Import 2. Use it to “upload” old site to your new site. User guide to import your entire directory of HTML pages.
3. Upload the content that you just downloaded from step 1 into your new web host file structure. Put them in a folder called, for example, “html-files-to-import”.
a. Upload all the old images to your Media Library in WordPress on your new site.
4. Run Import
5. Prepare your DOS command prompt and Excel
a. At the DOS prompt, navigate to where you placed your HTML files (it’s easiest to put them in a folder named “yourwebsite” and put that folder in the C:\ drive).
Then, initiate this command: i. dir > files.txt
b. Open the files.txt file in Excel.
c. Now to Excel. Essentially, you’re going to use a couple of Excel functions, including “concatenate” to render the “canonical” code that you will put in the HTML files.
d. Place the corresponding canonical code in each HTML file. You could do this, hire it out to an outsourcer, or hire somebody to write the PHP code that would do this automagically.
6. Upload the HTML files to your web host. Put them in the ROOT (i.e., highest up) folder for your new website.
Don’t forget to upload the images folder, too, to the ROOT.
7. Make sure everything still works on the new site.
8. Uncheck the box from Step #2 – “Discourage search engines from indexing this site” and disable the HTML Import 2 plugin.
9. Change DNS at your registrar.
10. Make sure that your site’s URL resolves to the right IP (your new IP not the old IP) and that ALL pages load correctly. You may have to wait few hours for nameservers to get updated.
11. You can remove the old HTML pages after a while, but there isn’t any need to. You won’t get hit with “duplicate content” penalties because the canonical references take care of that.
You’ll want to add redirects in your .htaccess file that point your old “.html pages” to your new WordPress pages.
Convert HTML Website to WordPress Method #2
If your goal is to not only get your content from your static HTML site into WordPress but also duplicate your current design, this means you will need to create your custom theme.
It only involves creating a few folders and files, a bit of copy and paste, and then uploading the result.
You’re going to need a code editor such as Sublime or Notepad++ and access to both your HTML site’s directory and your new WordPress install’s directory.
1.Create a new theme folder and necessary files.
On your desktop, create a new folder to hold your theme files. Name it whatever you’d like your theme to be identified.
Next, create a few files (which all go in your new theme folder) in your code editor:
2. Copy existing CSS into new stylesheet
If you’re looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file you’re going to want to edit is your Style.css file.
To begin, add the following to the top of your file.
/* Theme Name: Replace with your Theme's name. Theme URI: Your Theme's URI Description: A brief description. Version: 1.0 Author: You Author URI: Your website address. */
After this section only paste your existing CSS below. Save and close the file.
3. Separate your current HTML
Here comes the process of cutting and pasting parts of your existing code into the different files you created.
A) First, open your current site’s index.html file. Highlight everything from the top of the file to the opening div class=”main” tag.
Copy and paste this section into your header.php file, save and close.
B) Go back to your index.html file. Highlight the aside class=”sidebar” element and everything inside it.
Copy and paste this section into your sidebar.php file, save and close.
C) In your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.
D) In your index.html file, select everything that’s left (this should be the main content section) and paste it into your index.php file. Save, but do not close yet.
You can close your index.html file now however and move on to the final steps. Almost done!
4. Finalize Index.php file
To finalize your new theme’s index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files you’ve created.
At the very top of your index.php file, place the following line of php.
Then, at the very bottom of your index.php file, place these lines of php.
Now you have “The Loop”. This is the primary bit of php that WordPress uses to display your post content to visitors.
So the final step in creating your new theme’s index.php file is adding the code below within the content section.
Save your index.php and close.
Your theme is now finished! All that’s left is to upload it to your WordPress website.
5. Upload your new theme
Now you will store created theme files within your new theme folder. Install WordPress.
Place your new theme folder inside /wp-content/themes/. Navigate to WP Admin > Appearance > Themes and you should see newly created theme there. Activate it!
All that’s left to do at this point is populate your new WordPress website with your old site’s content.
6. Copy content from HTML site to WordPress
In WP Admin go to Plugins > Add New. Search for a plugin called HTML Import 2 by Stephanie Leary.
Once this plugin is installed and activated, follow its user guide to import your entire directory of HTML pages.
After this your site should look like it did before, just running on WordPress.
#3 Using Existing WordPress Theme to Convert HTML Site (easiest method)
If the steps above seem too intensive or time-consuming, there is another way. This is the easiest way.
Instead of converting existing HTML design to look the same on WordPress, you can take advantage of any one of the thousands of themes available in WordPress marketplace.
Once you’ve chosen a theme you like (and have its zipped file package downloaded), install/activate your new WordPress theme.
Once this is done, you will have a new WordPress website and theme. When you preview your site, it will be empty.
It is time to import content and finish process to convert HTML website to WordPress site.
In WP Admin go to Plugins > Add New and search for a plugin called HTML Import 2. Follow user guide to import your entire directory of HTML pages.
After this, you will have all of your old content but new look.
#4 Convert HTML to WordPress With Theme Matcher
You could also use Theme Matcher. It offers automatic HTML to WordPress conversion. Just enter your site and select the appropriate area.
Theme Matcher takes images, styles, and layout from your existing website.
#5 HTML to WordPress Converter Service
HTML to WordPress converts your HTML designs into WordPress themes without the need for you to write a single line of PHP.
You can choose service plan where they will convert your static HTML website to WordPress. This option can add up in price.
You can also choose Converter option which is significantly cheaper.
The conversion is fully automated, and the theme’s functionality can be extended just by adding “wp-” prefixed converter classes into your HTML.
The converter creates templates for each HTML file and references your assets and fills in all those necessary php functions.
Use Bootstrap, Webflow, Dreamweaver or whatever tool/framework you’re already comfortable with to create websites.
As long as the website is made using HTML you can convert it into a theme.
HTML to WordPress After the Migration
Once the conversion is completed, you need to do a few things to give your WordPress site the final touch.
- Install Necessary Plug-ins – To supercharge your brand new WordPress site with same functionalities as HTML site, install plug-ins that you found handy.
- Check and Fix Broken Links – Check your website for broken links (404 errors) and if found, fix them.
- Set-up a Custom 404 Error Page – Add a custom 404 error page to take your visitors to relevant sections of your WordPress site, in case they try to access any URL that doesn’t exist.
- Redirect Links – To inform search engines that your website’s content has been moved to a new web address, set up 301 redirects. For this purpose, you can use Simple 301 Redirect.
- Enable Search Engine Indexing: Go to “Settings –> Reading” in your WordPress dashboard and check “Allow search engines to index this site” to get your site indexed by search engines.
- Generate and Submit XML Sitemap: To ensure your site would be included in search engine results as fast as possible, create an XML sitemap and submit it to Google.
WordPress vs HTML – PROS and CONS
Launching a business website is not an easy process. One of the biggest dilemmas is whether to choose a static HTML site or to go for WordPress.
WordPress –WordPress is perceived to be a CMS (Content Management System). Simplified HTML version for non-techie users to add and modify stuff on their websites.
CMS sites are usually dynamic, meaning that there are no restrictions to how often you change your content.
You can change everything from pictures to entire texts.
The interface is very simple and user-friendly, and nobody needs any special training to learn it.
The CMS market is highly competitive, but WordPress beats competition every time.
Another thing to remember before you start is that there is a significant difference from WordPress.com to WordPress.org because the latter is an open source CMS. WordPress.com, on the other hand, works as a blog-hosting service.
Advantages of using WordPress:
- It provides you with thousands of plugins to add to the site the functionality that it’s missing.
- A modification is possible at any time, and nobody is limiting you.
- Compared to HTML setup, WordPress takes significantly less time to be setup.
Disadvantages of using WordPress:
- You can’t just set it up, and forget it. It requires full-time attention and constant updating of software, plugins, and themes.
- Hackers will attack poorly protected and non-updated websites. You risk that your website will not work at all if you don’t keep up with the updates.
- WordPress is easy, but not that much for beginners. There are many online tutorials and comprehensive materials to help you go over then learning curve.
HTML static websites – Before there was no such thing as templates, and the only way to make a website was to hire a professional in programming to do it for you.
Therefore, all websites were built as Static HTML (Hyper Text Markup Languages). The point was to have a website.
Not to modify the content or its layout, because you would have to hire the HTML developer all over again.
On HTML websites, content is stored in static files, which makes it incredibly difficult to modify it.
HTML website advantages:
- Once the website goes online, you’re not required to update it or to back it up. Most of the time, nothing ever has to be changed on that website.
- HTML websites are basic and easy to set up.
- Their size and the fact that they use fewer resources than dynamic sites give them a significant speed advantage compared to dynamic sites, making them load much faster.
HTML website disadvantages:
You need to be professional in markup languages.
Otherwise, you won’t be able to do any significant update to your website.
Hiring a web developer over and over again will cost, even if your website is a really small one, or displays just trivial information.
Another important disadvantage is that you can’t add plug-ins, meaning that you’re facing a severe lack of functionality.
How to Convert HTML to WordPress Step by Step
Whether needing more from your site or building a new one with a template in mind, the conversion process can seem quite complicated to a novice.
Patience and knowledge will allow you to do what you need to do with some level of success.
Once your site is live, you can take pride in knowing that you learned how to do something new and were able to apply that knowledge to your website.
Hope at least one method above helped you to convert HTML website to WordPress. If you have any other method or tutorial, let me know.
Did you ever convert HTML into WordPress and what are your experiences with it?
Let me know in comments below or if I made any mistake, feel free to unleash your rage on me.