Converting HTML Templates to WordPress Themes

At the beginning of the web, all websites were made with nothing but static HTML. Although web technology has come a long way, there are still websites that are created entirely with HTML. And if one already has a website running on static HTML, it can be a subduing task to convert it into WordPress. But with the increasing popularity of WordPress, it has led many people to switch to WordPress. Fortunately, there are several options if we want to convert HTML templates to WordPress like from hands-on manual conversion to partnering with experts who can handle all the heavy lifting. Let’s take a look at these points. 

Ways to move from Static HTML Template to WordPress Theme:

Firstly, if we move HTML to WordPress, we need to turn HTML design into a WordPress theme. A theme controls the look while the functionality is provided by the CMS itself as well as additional plugins. To make the switch to WordPress we have several options and they are:

Manually Convert HTML to a WordPress Theme 

This option is technical. It’s not very complicated. We will have to access our current site directory via FTP and use our existing code as a starting point.This is quite simple and straight forward if we have coding experience with some knowledge of HTML, CSS and some PHP. Now first we need to know how to convert html site to wordPress manually.

  • Create a Theme Folder and Basic Files: The first thing we need to do is to create a new theme folder. After that go to the code editor and create a number of text files. Name the following like style.css, index.php, header.php, etc. Keep all these files open in the editor.
  • Copy Existing CSS to the WordPress Style Sheet: Prepare the WordPress style sheets to copy the old site’s CSS into it. After the header, copy and paste the existing CSS from the static HTML website. Then save the file in the new theme folder and close it. 
  • Separate Existing HTML: For this, we need to clearly understand that WordPress usually uses PHP to pull information from its database. For that reason, we need to chop up our existing HTML into different pieces so that the CMS can put them together properly. This is not complicated, all it means is that we have to copy and paste parts of our HTML documents into several PHP files. 
  • “WordPressify” Header.php and Index.php: For the header, we have to change the call for the style sheet from HTML to WordPress format. This will be available in an existing link in the head section. Now save and close header.php. Now for index.php, these are the calls for the other files that contain the rest of the site. We will notice the space between the call for the header and sidebar. We will add Loop here. Now save the index.php file and close it. The basic theme is ready. 

HTML to WordPress via WordPress Child Theme

These themes are built on top of another theme that doesn’t stand on their own but solely modify the parent theme to fit all needs. 

  • Pick a Suitable Theme: First thing is that we have to pick a suitable theme. Now once we have chosen the theme, install the theme on WordPress. But there is no need to activate the theme as it is just base. 
  • Create a New Folder: When creating Child themes, it’s common to call the folder the same name as the parent’s theme and make sure that name we choose should not include any spaces as it won’t work in this manner.  
  • Adjust the Design and activate Child theme – It’s now time to change the design of the existing theme so that it corresponds to the original HTML site. We can also add a screenshot to WordPress via Appearance, Themes, Add new, etc. 

Import Content from HTML to WordPress using Plugin 

Lastly moving from HTML to WordPress is using an existing theme and simply migrating content from HTML site into it. This is the simplest way all we need to do is install and activate the theme of our choice. Let’s have a look at some points

  • Install the Import Plugin: The first thing we have to do is install any type of Plugin. When you find it on the list, click on install now and activate it.
  • Prepare the Import: To import various pages at once we need to upload them to the same server as WordPress Installation. The Plugin will offer a name but we can select whatever we want. 
  • Additional Steps: If we are planning to expand the WordPress site then we have to add a few more things. The first one is to check the URLs of newly imported posts and pages to make sure they are search engine friendly. Now, the second thing is to implement redirects from the old URLs to the new ones. So in this way, we won’t lose out on existing SEO values. 

Thus these were some of the points about converting HTML to WordPress. However, that doesn’t mean that static HTML websites don’t exist anymore. In fact, HTML5 allows us to build quality websites without a CMS behind them. 

Finishing Up

And That’s it. From the above points, it is clear about every point. HTML websites are not as functional and performing as a full-fledged WordPress site. But converting HTML Template to WordPress themes can be time-consuming and also challenging. However, it will end up with a decent unique WordPress website.     

Author Bio

Hermit Chawla is the MD at AIS Technolabs which is  Web Design and Web Development Company, helping global businesses to grow. He loves to share his thoughts on convert html to wordpress service.

For More: