Convert HTML Site to WordPress Site

Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript are the building blocks of the World Wide Web. This is why earlier all websites were based on HTML. However, since HTML is not completely secure and requires a lot of coding to create only static pages, most websites today have switched over to either a reliable CMS like WordPress or a Website Builder like WordPress.com. This is primarily because WordPress is based on PHP and MySQL. For those of who you don’t know, PHP is a server-side programming language that enables you to create dynamic interactive websites. This implies that all the sections of your web pages in WordPress are saved in PHP rather than HTML.

Even better, WordPress and PHP are both open source and free to use. Hence, if you are still stuck on HTML, we would help you with some simple techniques that would help you to easily convert your simple HTML website to a fully functional WordPress Site. However, before that take a look at what you need before starting the conversion process.

Things You Need Before Converting HTML to WordPress Conversion

 

Convert HTML Site to WordPress Site
Convert HTML Site to WordPress Site

The methods that we will discuss below require no coding knowledge. However, if you know anything related to coding, you will understand the process better. Although, coding knowledge is not must and there are only two things that you need to do before converting your HTML website to WordPress. These are:

  • Choosing a hosting plan or create a local WordPress installation
  • Install WordPress and log into WP Admin

Ways To Convert Your HTML Website To WordPress Site

If you are the owner of an HTML website, you may have reasons like your site content remains unchanged or you are happy with the old simple design of your site. You might also think that updating WordPress regularly is a tedious task that you would not need if you have an HTML website. All these are valid reasons and reinstate the fact that there is no need of fixing things that are not broken. However, the primary reason that has come forth among those still using HTML is that they actually do not know the procedure to convert HTML website to a WordPress site. Additionally, most of them think that this is an extremely lengthy process and cannot be achieved without losing your valuable content. Hence, to clear all your misconceptions, here are the three easiest ways to convert your HTML website to a WordPress site.

1. Manual Creation Of A WordPress Theme As Per Your Current Html Website

 

Convert HTML Site to WordPress Site
Convert HTML Site to WordPress Site

Creating your custom theme manually on WordPress may sound difficult, but believe us it isn’t. If you have any coding knowledge, you’ll find it even easier and if you don’t, we’ll make it easier for you. You just need your existing HTML code and that’s enough to take the conversion process forward. Rest everything is just copied and paste. Hence, if you want to get an exact copy of your HTML website on WordPress, the first thing you need is a code editor. You can use Notepad++ or Sublime as per your convenience. Also, make sure that you have access to your HTML website’s directory as well as the new WordPress directory. Once you are ready with these, follow the simple steps given below and you will be able to easily create a WordPress theme based on your current static HTML website.

S1: Make a New Theme Folder To Save Essential CSS and PHP Files

This is the easiest step of all. You have to begin by creating a new folder on your desktop with a desired theme name to store all files of your theme. After this, create some files in the code editor with the following names.

Style.css – To customize and define the CSS for your website

Index.php – To create and define the structure of your website

Header.php – To customize and define the header of your website

Footer.php – To customize and define the footer of your website

Sidebar.php – To customize and define the sidebar of your website

Do not write anything in these files. Just save and don’t close them as further editing will be needed.

S2: Paste Old CSS Into The New CSS Stylesheet

Since you want the same design to be inculcated in the new website, you have to begin by editing the Style.css file. This is done to use the old CSS you already have with you and acquire the same old design. However, before pasting the old code in the new Style.css file, place the following code at the beginning of your code editor file.

Convert HTML Site to WordPress Site
Convert HTML Site to WordPress Site

Once you have added this code, paste the older code. Now save the file and close it.

S3: Segregate Your HTML Components Into Individual Files

As already mentioned earlier, WordPress works using PHP for calling and retrieving data from the database. Here, the database has been created by you in the form of the desktop theme folder you have already created. Now all you need to do in this step is to sort the data that you have on your existing site so that WordPress knows where to display them. In simple words, you have to copy and paste specific pieces of your old code into different files that you had created earlier. To begin this, open your existing site’s index.html file. Then follow these steps.

Copy the code from starting to first div class = ”main” tag of the file. Paste this code into the header.php file. Close this file after saving.

Similarly, copy the code from aside class= ”sidebar” element. Paste it in the sidebar.php file. Close this file after saving too.

Similarly, copy the code after the sidebar. Paste this code in the footer.php file. Close this file after saving.

This is the last step where you have to copy the code that is now left. Now, paste what you have copied into your new index.php file. Close this file after saving.

S4: Arranging Your New Index.php File

Arranging your new Index.php file is the second last step of this conversion process. This is extremely important as it informs your website to call for sections other than the main content of your site. These other sections are made up of all the files you have already created. Hence, to call these we will arrange them in almost a similar way as in the older folder. To undertake this, begin by pasting the one line code mentioned below at the beginning of your new index.php file.

Now move to the end of your new index.php file and paste the following one line code at the end of the file.

And, the process is almost over.

S5: Creating The Loop

The Loop is the same technique that WordPress utilizes to show your site content to the visitors. Hence, the last step in converting your HTML website to WordPress is going to your new theme’s index.php file’s content section and pasting the code given below.

Convert HTML Site to WordPress Site
Convert HTML Site to WordPress Site

Once you paste this code, save your new index.php before closing it. Now you can upload your finished theme to your own WordPress site.

S6: Uploading The New Theme To Your WordPress site

Congratulations on the creation of your first theme. Now since your theme files are ready, it is the time to visit your WordPress install directory and move your complete new updated theme folder in /wp-content/themes/.

Once you do this, go back to the WordPress Admin dashboard and Click on Appearance and then select Themes. When you will click on this, your new theme will appear with all other themes. Activate this theme and see the magic happen.

Now the only thing that is left is the migration of content. To do this you can follow the steps given after installing a premade theme under the next point or click here and you will be redirected there.

2. Install A Premade Theme And Simply Migrate Your Content

Convert HTML Site to WordPress Site
Convert HTML Site to WordPress Site

This is the undoubtedly the best option in terms of ease of implementation and future value. It is so easy to implement that you just need to download an exclusive premade theme that suits your business and use a simple plugin to import content directly from your HTML website to your WordPress Theme.

This way instead of converting your old design step by step into WordPress, you can save your time and efforts and give your site an elaborate look using any beautiful WordPress theme. What’s better is that you can go with a general theme like Reign or dedicated themes like JobMate (for job listings), LearnMate (for learning solutions based on LearnDash and LifterLMS) and StoreMate (for marketplaces like Amazon). There are many other options too, so don’t restrict your site design and explore as much as you want to.
Once you’ve picked the perfect theme, download the zipped file of that theme. Now go back to your WP Admin and click on Appearance. Then go to ‘Themes’ and select ‘Add New’. Browse and upload the zip file here.

Click on install and activate your desired WordPress theme. As soon as you click on Activate, your new WordPress site and theme will be displayed. However, the complete conversion still remains as you need to export all your older content to this new site. For this, you simply need to go to the massive Plugins Directory of WordPress and download the free plugin, HTML Import 2. After downloading and installing this plugin, activate it and go to Settings. Then click on the option, ‘HTML Import to begin’. Then click on the option, HTML Import to begin. Remember, to save these settings before moving on to Tools and clicking Import and HTML.

After completing this step, you will see that all your old content including images and text has been automatically shifted to WordPress and formatted as per your new theme.

3. Hire An Exclusive Service For Html To WordPress Conversion

Convert HTML Site to WordPress Site
Hire to Convert HTML Site to WordPress Site

The easiest process to convert your HTML website to a WordPress site is to hire a dedicated web service to deal with this. This may be a bit costly but it certainly is the best option if you want WordPress experts to deliver you a seamless site that can be scaled later if needed. It is also a good option for those who neither have the time nor the patience but have the money. You can find many excellent service providers that can be hired to take complete care of your site conversion. Indeed, you can contact us if you need a site conversion or any other help related to WordPress and we will be happy to help.

Which Method Should You Choose to Convert HTML Site to WordPress Site?

All the three methods mentioned above have their advantages as well as disadvantages. Hence, there is no particular method that we would recommend you to choose or follow out of these. However, to make this decision easier we have listed a few pros and cons of every method.

HTML Site to WordPress Site
HTML Site to WordPress Site

We will begin with the first method that is a bit intensive and time-consuming. Also, even though you are able to develop your own WordPress theme, it won’t have all the capabilities that WordPress offers. However, it is a simple and straightforward method to get an exact replica of your HTML website and can be used effectively if you know to code.

The second method is the choice that most users would make. This is because you are able to add new features and present your older content in a new way that attracts customers in an easy way. Also, with friendly CMS like WordPress and dedicated themes, development is just like simple editing these days. However, this method is not preferred by users who want the exact copy of their HTML website as it becomes difficult to create a theme that replicates so well. Also, since HTML websites are static, some users complain about the extra features in a WordPress theme that are not needed and that may slow their website.

The third option is the best option if you want work to be completed but don’t want to work yourself. It is quite effective as WordPress experts work on your site and you can modify most things that you need with just a mail or call. The downside with this method is that it requires you to spend money for this convenience.

Now, that you know everything you need to know about the methods to easily convert your HTML website to WordPress site, you can take a decision and start the process of your HTML site migration today itself.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Welcome to Wbcom Designs!  - Get 10% off on all plugins & themes
Coupon : HELLO10