Despite the advancement of web technology, HTML is still the primary language used for most websites. To avoid editing the code to change even minor details on your HTML website, you can convert it to WordPress. HTML websites are usually static, meaning you would have to edit the code for every minor change.
You may be wondering how you can convert an HTML template into a WordPress theme if you own one of them. Converting HTML files to WordPress is not a difficult task since you have several options. You can either perform hands-on manual conversions or work with experts who can do all the hard work for you.
In this article, I'll show you how to convert an HTML template into a WordPress theme with a step-by-step process. The tutorial is suitable for those who have experience with HTML and WordPress.
So, let’s get started!
Ways To Convert HTML Websites To WordPress
There are 3 methods to convert HTML to WordPress;
- Convert HTML to WordPress manually.
- Convert HTML to WordPress using a child theme.
- Convert HTML to WordPress using the plugin.
So, let's learn them.
Method 1: Convert HTML to WordPress manually
Step 1. Convert HTML Template Into a WordPress Theme Manually
Since conversion is a pretty hands-on process, you'll need access to both your original and new website's files. The first option is to convert manual-style, which is a pretty easy process. For this purpose, you will typically use a Secure File Transfer Protocol (SFTP) application, and when you have accessed your website, you can proceed as follows.
- style.css
- index.php
- header.php
- footer.php
- sidebar.php You can leave all these files blank and save them to the newly created folder at this stage.
Step 2: Copy & Paste Your Previous CSS
You can now customize the Cascading Style Sheet (CSS) file, where you will lay out all the different style elements for your site. Adding some information at the top about the file is a good idea. It’s a fact that some elements in WordPress are required to get a theme featured in WordPress Theme Directory. Your next step is to copy your existing CSS styles from your original website and paste them.
Step 3: Separate Existing HTML
You'll likely find the HTML code that defines the header, footer, sidebar, and main content area of your original website in the index.html file. To make your WordPress theme look great, you'll need to break out each element into its file. For instance, you can locate the first
This process should be repeated for the 'sidebar' and 'footer' tags, and the code will need to be copied and pasted into the PHP files. The main content layout of your HTML-based website comes from the index.html file, which is the primary portion. To create an index.php file, you will need to copy the remaining code.
Step 4: Configure Your Index.php File
Now that you have your new index file ready, you need to ensure it can find the files necessary to display the structure and style of your site. WordPress template tags can tell the theme where to find headers, footers, and sidebars. The following tag will allow you to display the header file you created in your template:
get_header();
And this will be placed in your index.php template file, or on subsequent pages. It will be the same for the footer as well. And there's another thing you'll need to know about your new template - the WordPress loop, which tells it to fetch posts from your blog. Moreover, you can customize it to see how to display commands.
Step 5: Upload Your New Theme
Once you have your new theme ready to use, make sure its folder is placed in your website's wp-themes/content directory. After uploading the files, log in to the WP dashboard and go to Appearance > Themes. The new theme should appear here, and you can activate it by clicking Activate.
Method 2: Import HTML Template to WordPress With a Child Theme
A child theme is another way to convert your HTML template into a WordPress theme. Even when you update the parent theme, you'll be able to maintain all the tweaks and customizations you've made.
Step 1: Choose a Theme
You can find various well-designed free themes in the WordPress Theme Directory. After you choose your preferred theme, you will need to install it so, you can view its file in your website’s file directory. However, there’s no need to activate this parent, and you can still view it properly.
Step 2. Create a new theme folder
The new theme folder will need to be created just as in the previous scenario. It's the same as the parent theme, only you need to add the suffix "-child" and name the folder the same way as the parent theme. For example, if your theme is called Twenty Nine, you can name the folder “Twentynine-child”. Be sure there’s no space within the name.
Step 3. Set up a new stylesheet
Now, you will need to create the style.css file inside the folder and add the following code:
/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twenty nineteen
Version: 1.0.0
License: v2 GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/
Ensure that this is just an example. You must have to replace the info with the theme you are going to use. Once you are done, save the file.
Step 4. Create the functions.php file
Now that you have access to the style.css file, you can activate the theme the way it is. It will be necessary to use the parent theme's functions and styles to enhance the website's appearance and functionality. To accomplish this, you will need to create the functions.php file and add the following lines of code:
/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twenty nineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/
Once done successfully, save the file.
Step 5. Activate the child theme
Finally, it’s time to activate the theme and make it work. You can upload the zip file to WordPress by navigating to the Appearance menu, Themes, and then clicking on “Add New ”. Afterward, you can then upload the zipped file. If you wish to drag the theme folder into the wp-content/themes directory, another option is to do so. That’s it!
Method 3: Import HTML Web Content into WordPress using a Plugin
Step 1: Set up a new site
Download the WordPress theme of your choice on your new site. Ensure that the theme is easier to customize and make the changes seamlessly. You will then need to customize the theme based on your custom preferences or likes to meet your requirements.
Step 2: Install the Plugin
Here, you will need to download and install the HTML Import 2 plugin. To do so, navigate to Plugins > Add New and search the plugin’s name in your WP Admin Panel. Now click Install When it’s finished, activate it.
Step 3: Upload pages
When you have installed the plugin, you can publish your pages to the same server as your WordPress installation. You will need to fill in the following information:
- Directory to Import
- Old site URL
- Default File
- File extensions to include
- Directories to exclude
- Preserve file names The next step is configuring the HTML element carrying your site's content under the content tab. In the next step, you will need to redirect the old URLs to the new ones. And the SEO value you currently have will not be lost in this process. Once you have gone through each tab and saved your options, click Import Files. That’s it!
Conclusion
The process of converting HTML to WordPress may take some time, but it is worth it in the end. It takes a bit of your time, but the result will be a well-designed site that is unique and much easier to maintain a website. You will never have any problems if you follow the steps outlined above. Any company needs to have a flexible WordPress website in today's ever-changing competitive market. The WordPress community support forums can assist you if you encounter any issues.
Top comments (0)