So, the stats are out. WordPress owns 64.3% of the market share. If your website is still running on HTML, now is the perfect time to convert HTML to WordPress.
Although there is nothing wrong in using a HTML-based website, in order to take full-advantage of the tools and plugins, you need to switch to WordPress CMS.
In this blog you’ll learn how to convert HTML into WordPress.
HTML File: What is it?
HTML stands for Hypertext Markup Language. Tim Berners-Lee developed it in 1990. HTML can be referred to as the code used to create electronic documents on the web, also known as webpages. Almost all web pages visible on the internet have been written with HTML code.
The HTML code present on your site’s web pages makes sure your content’s text and images have the right kind of formatting.
In the absence of HTML, web browsers can’t visually display the website structure to visitors. However, the right HTML code creates the webpages’ foundation and optimizes the website to appear in the desired way for the site visitors.
What is an HTML Template?
An HTML template comprises text, images, and files that support the various font styles and Javascript. One can also assume that an HTML template is a ready-made package of HTML code that can be easily uploaded to your website for use.
Utilizing the HTML template on your WordPress site requires uploading the file and plugging in the text and images you require to be displayed on the front end by the template.
However, it’s essential to recognize the difference between HTML templates and WordPress themes.
- WordPress Themes: You plug in text and images into the WordPress themes, as they contribute towards your entire website’s appearance. Most element changes in your site’s theme are global, which means that they are applicable to your entire site.
- HTML Templates: They are standalone zip files that you upload to the website on an individual basis. They only contribute to the look and feel of a single webpage on your site. You can also say that the changes you make to a single uploaded HTML template only affects that particular webpage.
However, many people fail to comprehend the distinction between themes and HTML templates and end up using both of the terms interchangeably.
1 Platform to manage everything WordPress so you can focus on what matters.
Launch your first site for free
Why convert HTML to WordPress
The web has progressed significantly, but there are still sites made exclusively with HTML. If you run one of them, you may be considering how you can convert an HTML template into a WordPress theme.
There are various ways through which you can convert HTML to WordPress. Some quick and simple, others not so much.
Today, we are going to focus on three best ways to convert HTML to WordPress :-
- Method 1: Convert HTML Manually
- Using WordPress Child Theme
- Method 3: Importing HTML Content by using Plugins
- Method 1: Convert HTML Manually
a) Create A Theme Folder
Create a folder for your new theme files, and put a label on it. Then, with the code editor, create five files – style.css, index.php, header.php, footer.php, and sidebar.php.
b) Copy and paste your existing CSS code
Customize the Cascading Style Sheet (CSS) file outlining your site’s different style elements. Add some information about the file – some pieces are needed for the theme to feature on your entire website’s Theme Directory.
Beneath that information, paste in the existing CSS styles from the original website you want to carry over.
c) Isolate Existing HTML
The HTML code that labels your header, footer, sidebar, along with the main content areas will likely reside in the index.html file. Portion out all of these elements in the latest files you created for the WordPress theme.
For example, in the original website’s index.html file, you can locate the first <div> tag with the class ‘main’. Everything before the <div> tag can be copied and pasted into the new header.php file.
Afterward, repeat the same process for the ‘sidebar’ and ‘footer’ tags. Copy the code within each of those elements, and paste it into the particular PHP files.
The primary portion of the index.html file will be left, which makes up the main content layout.
d) Configure Your Index.php File
Now you need to ensure that your new index file locates the files required to enable your theme to exhibit the site’s structure & style. For that purpose, you’ll need to use the WordPress template tags to retrieve the header, footer, and sidebar files.
For example, you can use the following tag:
get_header();
Place it in your index.php template file, or on subsequent pages on whom you need the header to be visible. The same is also applicable to your footer.
e) Upload Your New Theme
Since the new theme is now ready, you’ll need to place its folder into the wp-themes/content/ directory for the website:
After uploading the files, log in to your WordPress dashboard and go to Appearance > Themes. Your new theme will be listed here. Just click Activate and begin utilizing it.
1 Platform to manage everything WordPress so you can focus on what matters.
Launch your first site for free
- Method 2: Using WordPress Child Theme
a) Pick an appropriate theme
You can choose from a myriad of well-built, free themes in the WordPress Theme Directory.
b) Customize a new theme folder
Access your files with an FTP application, and create a new folder in the wp-content/themes directory. This file will have a similar name as the parent theme, and “-child” will appear towards its end.
With this setup, your child theme could pull functions and styles from the parent theme in an automated way after setting up the remaining necessary theme files.
c) Set Up a Style Sheet
Now, set up the style.css file which may need some detailed information present in the style sheet.
d) Create a Function.php
After having two themes to work with, you need to communicate to WordPress that the child theme is reliant on the parent CSS by using the wp_enqueue_style() PHP call. Firstly, you need to create a function.php file and then put it in the child theme folder.
e) Activate The Child Theme
After uploading the new files to the server, go to the WordPress dashboard and then Appearance > Themes. Your child theme will be visible here. Click on Activate to set it as the website’s theme. Once you do, you will be ready to begin copying the HTML content on the new WordPress site.
- Method 3: Importing HTML Content by using Plugin
You have two choices once you enter the file manager:
- Add a new folder – Establish a new folder in the site’s root folder to upload the HTML file.
- Direct Upload to the Root folder – Instead of creating a new folder, you can directly upload the HTML to WordPress. Now, unzip the HTML file in the location where you have it saved and change the index.html to a new name. Rezip the file for continuing the WordPress upload. Not doing so will result in the HTML template overriding the site’s homepage.
To create a new folder, go to your site’s root folder, which contains the web content. After that, click New Folder.
After naming the new folder, click on Create New Folder. Now, double click the new folder and then click Upload for the HTML file. After getting this done, you will see the zipped HTML file in the folder. Unzip the file by right-clicking and selecting Extract. Once the modal window comes up, click on Extract files to conclude the unzipping process. Once it has unzipped completely, all the different files in the template will become visible.
At this point, you need to ensure that the HTML template and files get uploaded. To do that type the site’s URL in the browser and add the new folder’s name towards the end.
Final Thoughts
WordPress continues to be one of the most relied upon content management systems worldwide due to its flexibility for creating unique websites that offer an edge over the competition. The ability to upload an HTML file to WordPress with the methods discussed presents another example of how WordPress fulfills website owners’ needs while giving them the freedom to customize their sites.
The knowledge of uploading HTML files to WordPress is essential should the need arise. You never know when you may encounter an HTML template you like or a particular kind of page layout that is unsupported by your current theme.
We hope that this article will have provided you with enough information to aid you in converting HTML to WordPress. Don’t forget to check out other articles on our blog for more WordPress updates and fixes!
Let us manage your WordPress Website and attain true peace of mind.
Scale your business today.
Sign up
