Creating your own website was not always this easy. If you are not experienced in coding then it was almost impossible to launch your own website.
Thankfully, we live in the age where people invented software apps, website templates, and automatic CMS. Thanks to them, designing a website has become not such a daunting task. There are a number of tools you can use when it comes to coding and design.
WordPress
What if your website was created years ago? You would still need to make updates by using HTML coding. This could be extremely expensive and time-consuming. But that doesn’t mean you have to start from the beginning.
You can just convert your old HTML website into a WordPress website.
HTML static websites still exist, but if you are not a coding expert and you wish to have full control over the site, it’s best if you move your HTML website to WordPress.
Why do you need to convert HTML into WordPress?
If your website is a static HTML site, why do you need to convert it?
To answer it simply, it’s far easier to manage. If you’re not a coding expert, you need to hire developers for any minor change you wish to do. Aside from that, you need to closely monitor your SEO and make site updates constantly. This is where WordPress comes in.
These changes are possible with just a few simple clicks.
In order to convert your website into WordPress, this means that you would need to take your already existing data from the static HTML website and transfer it to a WordPress theme.
There are 3 ways you could do that:
Manual conversion
This method is highly complicated, which is why we do not recommend it for everyone.
With manual conversion you use your websites HTML code in order to begin. Is highly recommended that you have some experience in HTML, CSS, and PHP.
Creating a new theme folder
First, you need to create a new theme folder on your desktop. Next, go to the code editor and create the following 5 text files:
Style.css Header.php Footer.php Index.php Sidebar.php
Copying the CSS Code
Next step is copying the CSS code from your website onto a WP style sheet.
The style sheet is the same style.css file you created previously.
Copy and paste the CSS code into the style sheet.
Now, fill in the style sheet header for the new WP theme.
They are:
Theme name Theme URL Author Author URL Description Version License, Tags and License URL.
Paste the CSS code from the static HTML website to the file. Save the changes.
Separating existing HTML
WP can access database information by using PHP. The result is that your HTML code needs to be chopped into pieces which will be strung together by WordPress.
To achieve this, copy some of the original HTML document into different PHP files.
Open the index.html file. Copy the code in the following places:
Heather.php – It includes the beginning of the HTML code up to the area with the main content. Prior to the section , copy and paste <?php wp_head();?>
Sidebar.php – Here you need to paste the code from the section with
Save all changes.
Screenshot and Upload
The final step is creating a screenshot of the theme and uploading it. It will show a preview of your website and WP backend. Make the screenshot and adjust it to 880 x 660 px. Save the file as screenshot.png. Add it to the theme folder.
Next, you need to upload and activate the theme to WP.
Converting HTML to WordPress using a Child theme
When using a WordPress child theme to convert your HTML website into a CMS one, you will receive a lot more freedom and not need so much technical knowledge. It can also be a lot cheaper and easier.
You can also make adjustments to the design of your current theme so that it looks you’re your old website as close as possible. Meaning, that while using WordPress you can still retain the original site’s feel. As you will be creating a new website on an already existing theme, there is no need to add additional WP features.
Child themes are created on top of another theme, modifying it in a way suitable for the specific website.
1. Choosing a Theme
The first step, is naturally, choosing a theme. Find one, which is similar to your current design.
Install the theme but don’t activate it just yet.
2. Add a new Theme Folder
Very much like in the previous steps, create a new folder on your desktop. As a name of the folder use the parent theme and “- child” next to it. There should not be any spaces in the name.
3. Create a style sheet
As we did in the previous method, this step is identical. Only this time, add a tag to it, titled template. The name of the parent theme should be included as well.
4. Create e Functions.php file
Create a functions.php while inheriting the parent styles for the child theme. To achieve this, add a file named functions.php. It needs to start off with <?php.
Add the following code:
5. It’s time to activate the child theme
Next step, activate the child theme. Make sure that you make a screenshot for the WP backend. Create the zip file which includes everything and add it to WP. You can now make changes to the design so that it matches the original HTML.
Importing content from HTML into WP with the help of a plugin
We recommend using this only if you would like to make changes to the design of the website. If you’re looking for a more different look, plugins can be a very useful tool. This can be done in the following way:
1. Setting up a new website
Set up a new website and install the WP theme you have chosen. It needs to be a template which you like and can be easily edited.
2. Installing the plugin
You now need to install the plugin. For our example we will be using the HTML import 2 plugin.
Install and activate it.
3. Uploading pages
Now that your plugin has been activated, upload the pages to the same server as the WP installation.
Enter the following information in the files tab:
Directory to import
Old site URL
Default file
File extensions to include
Directories to exclude
Preserve file names
Once you are done, go to the Content tab in order to configure the HTML tag holding your website’s content.
Conclusion
If you are still using a static HTML website, it’s probably a good idea to change this and move to a more effective CMS, such as WordPress. Although, it does require some efforts, it’s all worth it. Uploading HTML to WP can be helpful when you decide to implement a HTML module or verify ownership of your website.
Thanks to the easy-to-use dashboard, converting your HTML website to WordPress will make managing your website a lot easier and cheaper.