How to Convert HTML to WordPress

To convert HTML pages to WordPress is not an easy task to perform. If you are not aware of the WordPress framework, you might face issues while converting HTML pages. It is very important to understand the default folder structure of WordPress to go ahead with conversion. 

In all, you need to be very careful in migrating your static HTML website to WordPress.

Before we proceed to see how to convert HTML to WordPress, we need to understand the scenarios in which the need to do this conversion arises. We will start with a simple, plain HTML site and move towards WordPress.

Simple Website using HTML

Let us take a scenario of a company setting up a new business. As a part of building its corporate identity, putting up a website on the Internet is essential. At the initial stage of business, the budget is economic and you would not want to spend much on the website development cost. The cost of building a plain HTML website is much lower than the cost of building a WordPress website.

To start off with putting up the website for a new business, an HTML Website is fair enough to showcase the entity. At this initial change, you will not keep updating your content frequently. So, deployment of the website is not so frequent. 

Let’s say you have started with just the following sections in your HTML website.

• Header and Footer – Static header and footer across all pages
• Home – stats about your company and overall picture of your business
• About us – The team who have started the company and details about core team members
• Solutions / Services – The business you are offering to the customer(s) in the form of solutions or services. 
• Contact us – The company information, location, and inquiry form.

All of the above sections are created with the text, images, and videos using HTML layouts. Each page has a different layout based on the content available. 

As your business is growing and at an expansion stage, you would want to make your website more fancy and attractive as per the current trends. More colorful, animations, and creative in terms of UI widgets and elements. All of these are not possible to build with a Static HTML website. You start to find limitations to your existing Website and explore options to revamp the website.

The challenging part starts with the HTML website when you need to enhance the website with the following requirements:

• Regular updates on the website
• Add new pages to it or introduce new sections such as blogs, portfolio
• Show clientele as and when your business is growing
• Add Maps to locate your business
• Add social media presence to the website
• Make your website mobile-friendly
• Add an eCommerce module to your website if you are selling the products
• Add a chatbot component to your website
• Apply SEO features to your website

Another limitation you will find in HTML-based static websites is updating the content based on special business events or extending your business lines or adding blogs to your website on a daily basis or integrating your website with social media websites. All of these demand conversion of your website to CMS that is the most appropriate for your entity. 

Content Management System (CMS)

The below picture shows the most popular CMSes to build wonderful websites.

As per the statistics available here – https://hostingtribunal.com/blog/wordpress-statistics/#gref, the most used CMS for building wonderful websites is WordPress.

WordPress is the choice to migrate your HTML website with a lot of features available. Let us see some of the best features of WordPress before we see the steps of “convert HTML to WordPress”.

Let us see some of the features that are just awesome in WordPress.

• Themes – WordPress comes up with thousands of themes out of which many of them are free and the rest of others are paid. Themes are nothing but readymade website layouts with color themes, responsiveness, and many more features. All you need to pick is the theme appropriate to your Website and get your content structured in the theme.

• Plug-ins – WordPress offers a wider range of free plug-ins to incorporate many functionalities that are not available in the theme you have chosen. For example, social media icon integration and update of reviews and posts on your site. Another example is – you want to add a different layout/element to the website which is not available in the theme. You can install a plug-in that offers more layout and widget options to incorporate into the website. You also can add analytics-related plug-ins to see the visitors of your website and so on.

• WP-Admin Panel – WordPress provides you with an easy-to-use interface to update content quickly and publish it to Live. Create a post, insert an image/video using Media Library and publish it. It is that simple.

• Woocommerce Module – Anytime during the development, you can add the eCommerce module that allows you to maintain the product catalog and integrate the payment modes with a few clicks. Entire order management process with email templates are available ready-made and you can put up a new store in just one day.

• Language Support – WordPress provides you with an i18N feature that supports more than 11 languages. You can select the language and the website content will be shown in the selected language.

Above features are mandatory to have in any CMS to choose and these are found in WordPress. In addition to that, the technical expertise in WordPress is easily available. The WordPress Developers can customize the or create plug-ins on the top of existing resources and fulfil your website requirements.

Now, the next section is to describe how to convert an HTML website to WordPress without losing your content and images. There are three different ways of doing this.

• Create WP theme to replicate the layout of your HTML Website – This is a manual theme creation
• Use an existing WP theme and move your content of HTML website
• Use conversion service or HTML to WordPress converter

Way 1 – Convert HTML to WordPress by creating WP theme manually

1. Make sure you have a code editor (Sublime Text, Notepad++) available in your system. 
2. Go to your HTML website folder. 

3. Create a new folder.

4. Give the WP folder a name. For example: New-Transpire.

5. Create the following files under this folder.
   • index.php
   • style.css
   • header.php
   • footer.php
   • sidebar.php
6. Now, we will copy code of each file from HTML websites files to the above newly created files.
   • Open your old site’s style.css file.
   • Copy and paste into your new created style.css file.
   • Copy the below text and paste in the file on the top.

/*Theme Name: New-TranspireTheme URI: https://transpire.co.in/themes/New-Transpire/Author: team XAuthor URI: https://transpire.co.in/Description: Description of the websiteVersion: 1.3Requires at least: 5.0Tested up to: 5.4Requires PHP: 7.0*/

7. Save your new style.css file and close it.
8. Next, open your newly created header.php file.
9. Copy your existing code till the <!–Main–>  from the index.html file from the older site folder and paste.
10. Save the header.php file and close it.
11. Now, again go back to the index.html file of the older site.
12. Copy your sidebar section and paste it to the sidebar.php file.

7. Copy your footer section and paste it to the footer.php file.

7. The last copy-paste we will do is from index.html to index.php. Copy the main body container section and paste to a new index.php.

7. Once copy of content for each section of your HTML side is done, you need to add PHP related structure to your index.php file.
8. Add the below line above your <!–Main–> tag.

9. Now, add the get_sidebar function under the container tag.

10. Add the footer function at the bottom of the file.

11. In the main body, add the below code under the main body section. This is a post component of WordPress. 

12. After putting the above code, your index.php’s main body section will look like this.

13. Save the file and now, you are ready to upload this new directory in your WordPress hosting server.
14. Connect to FTP server using your credentials.

15. Open the wp-content folder. Under that, you will find the themes folder.
16. Open the themes folder and copy your New-Transpire folder into it.
17. Now, log into your wp-admin panel using the correct credentials.
18. From the left click Appearance and choose Themes.

19. You will see the New-Transpire theme available in the themes list.
20. Click on the theme and you will see below.

21. On the above page, you will see 2 actions as below.

22. Click Activate. You will see the preview as below.

23. The WordPress layout is ready for you to extend it further.

Way 2 – Convert HTML to WordPress by using the existing WP theme

This method is used when you want to change your HTML website’s layout and placement of sections in the new site. In this case, you can choose the pre-defined WordPress theme, install it and move your content in the appropriate section.

1. Log into your wp-admin panel.
2. Go to Appearance → Themes. You will see the list of already available themes.

3. Choose the theme from the list.

4. Click Install. Once installed successfully, you will see the preview without content.
5. Now, the next step is to import your HTML website’s content to this newly installed theme. To do that:
   • Go to the Plugins menu from left. 
   • Search for plugin by entering the text – HTML Import 2 in the Search Plugins box.

6. The plugin will be shown. Click Install Now.

6. Once installed successfully, it will be listed in the list of plugins you already have.
7. Click Activate.

6. Click Activate. Follow the instructions given on importing HTML content of your older Website to the new theme layout.
7. You will be able to successfully import your Website content.
8. From here on, you can enhance your website in terms of content, layout, widgets and menus with easy steps in wp-admin.

Way 3 – Convert HTML to WordPress by using the converter

This is the way where you can use a converter to migrate your HTML site to WP structure. Usually, it is a paid service to get this job correctly. But, if your HTML website is plain and contains only 3 to 4 pages, you can try an online converter.

1. Go to https://htmltowordpress.io/

2. Create a zip file of all your HTML site’s folders.
3. Click UPLOAD ZIP TO CONVERT. 
4. Choose the zip file of your HTML files. Once selected, it will start the conversion process.

5. Once done, you will get a success message. If there are any errors, it will not be able to convert the files to WP.

Recommendations

We have seen multiple ways of how to convert the static HTML to WordPress. With the experience, it is suggested to choose Way 2 where you will choose and install the pre-defined WP theme and import your content the newly selected theme. The chance of errors will be minimal, you will get a better, responsive layout with a wider variety of plugins, widgets and layout options to make your website look professional and competent in the market.

WordPress is the best option to create, deploy, maintain and update your website regularly. It’s user interface is so easy to use that once you have setup and configurations available, updates can be done by yourself without depending upon the vendor or agency you have given the contract to.

In case you want to keep adding new layouts, change the color theme, logo or your brand identity with expansion of your business, it can be quickly done in WordPress. You do not have to really worry about the change.