As of February 2021, 40% of all websites run on WordPress. It dominates the content management system (CMS) market by a large margin. 64.3% of all websites based on a CMS runs on WordPress, while the second CMS is Shopify with a 5.3% market share.
Surprisingly or not, as of February 2021, 37.8% of all websites don’t run on a CMS. This means that there are still many websites built on HTML and CSS, eventually spiced up with JavaScript snippets. It makes sense to show you how to convert an HTML theme to a custom WordPress theme design. In this way, you get extended functionality and a simpler environment to update the site.
So roll up your sleeves, and let’s start converting your site. There are two methods to convert an HTML theme to a WordPress theme and each has its pros and cons.
Convert an HTML Theme Manually
The advantage of this method is that you will get a perfect replica of your HTML site at the end. To some extent, you create a custom theme for your HTML website. It may sound terrifying for less experienced users, but it’s not as complicated as it seems.
The disadvantage of manually converting an HTML theme is that it requires basic coding skills. However, most operations can be reduced to copying and pasting. Follow the next steps to convert your site.
1.Create a Theme Folder
Open up your code editor of choice and chose a name for your WordPress theme. Create a folder on your computer hard drive and name it as the WordPress theme to develop and create five blank .txt files inside it. Name them as the following:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
2.Copy + Paste CSS the Existing CSS
Open up the style.css file with your code editor, paste the following lines of code, and replace some theme details to match your theme information:
/*
Theme Name: Keen
Theme URI: https://www.keentodesign.com.au
Author: Keen To Design Team
Author URI: https://www.keentodesign.com.au
Description:Custom theme for Keen To Design
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keentodesign
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/
It’s good practice to fill in the header part of the style.css file with the required data. Some items are mandatory to get your theme approved in the WordPress repository. Here is what you have to fill in:
- Theme Name: replace Twenty Twenty with the name of your theme. It’s mandatory to name your theme and it’s good practice to choose the same name as the folder name.
- Theme URI: the URL to a webpage that provides more information about the theme (optional).
- Author: you must specify the author’s name.
- Author URI: the website of the theme’s developers (optional).
- Description: a short description of the theme.
- Version: the version of the theme – it’s mandatory to fill in the version for published themes. In our situation, 1.0 is enough.
- Requires at least, License, License URI, and Text Domain are important items if you intend to publish your theme (which is not the case for us).
Copy the CSS file of your HTML theme, paste it in the style.css, save and close the file.
3. Separate Existing CSS
Your HTML theme includes the header, sidebar, and footer in the same file – index.html. Chop up the index.html to create a few WordPress-specific files. It’s about header.php, sidebar.php, and footer.php. Practically, we transform the HTML file into a few PHP files.
Let’s start with header.php. Select all the lines of code from the beginning until the first line of the content area of the index.html file. Before </head> tag, place this line of code:
<?php wp_head();?>
sidebar.php is the next file. Go to index.html, copy everything between the <aside> tags and paste it in the sidebar.php. Next, copy everything from the end of the sidebar to the end of the file and paste it into the footer.php file.
4. Edit header.php
Search in header.php for this line of code:
<link rel=“stylesheet” href=“style.css”>
Replace it with the following:
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />
In non-developers’ language, you replace the way HTML calls the styling file with the way WordPress does.
5. Edit index.php
Open up index.php (it should be a blank file) and paste the following line of code:
<?php get_header(); ?>
Next, paste the following snippet of code:
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“<?php post_class(); ?>” id=“post-<?php the_ID(); ?>”>
<h2 class=“entry-title”><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<div class=“entry-meta”>
<p>Post date <?php the_date();?>. Posted by <?php the_author();?></p>
</div>
<?php endif; ?>
<div class=“entry-content”>
<?php the_content(); ?>
</div>
<div class=“entry-meta”><?php if ( count( get_the_category() ) ) : ?>
<span class=“category-links”>
Posted under: <?php echo get_the_category_list( ‘, ‘ ); ?>
</span>
<?php endif; ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
This snippet represents the Loop, which PHP code uses to display posts. Skilled coders may edit the above sequence of code to exclude categories or style the layout. Save your work and close the file.
6. Upload the Theme
At this stage, you have to upload the theme into the wp-themes/content/ directory. Head to the WordPress admin dashboard and click on Appearance > Themes. It should display your theme – install and activate it.
Keep in mind that your new theme lacks a lot of WordPress features and customization options. It’s a basic theme, but a skilled coder will know how to make it more powerful. Check the next method if you aren’t confident in your skills or you don’t have money to hire a WordPress developer to tweak your theme.
Other Method- Use A Child Theme
There is a less laborious way to convert an HTML theme to a WordPress theme. The advantage of this method is that even non-coders can use it to convert an HTML template. The disadvantage is that you won’t achieve a perfect replica of your site. People who want their WordPress theme to resemble the initial HTML theme pixel for pixel may be disappointed. Still, coders work miracles and they may be able to tweak the WordPress theme to look 99% identical to your HTML theme. Here is the complete algorithm to follow:
Pick The Parent Theme
Look for a theme, theme framework, or starter theme that looks similar to your HTML theme design. It takes time, but the more similar they are, the less work you will need to put in. Install the theme on your WordPress setup. We will call this the parent theme. For learning purposes, I will use Twenty Fifteen as a parent theme (it’s the theme chosen in the WordPress Theme Handbook to create a child theme).
Create a Folder
Use an SFTP client to log in to your WordPress setup and create a new folder on the wp-content/themes directory. Name the folder the same as the parent theme name and add “-child”. Create two blank files within this folder – functions.php and style.css.
Edit style.css
Open style.css in your code editor and paste the following snippet:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
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: twentyfifteenchild
*/
Replace the items descriptions to match your theme selection. Pay close attention to the Template item – put the name of the parent theme here. It won’t work unless you did it correctly. In non-coders’ language, this code introduces your theme and informs everyone that it’s a child theme.
Edit functions.php
Open functions.php and paste the following snippet:
<?php
function enqueue_parent_theme_styles() {
$parent_style = ‘parent-style’;
wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_styles’ );
By pasting this code, your child theme inherits the parent theme’s styling.
Activate the Child Theme
Go to your WordPress admin dashboard and activate the child theme.
Adjust the Site and Import Content
You have created the WordPress theme for your site, but it needs small adjustments and content import. The depth of the adjustments depends on your HTML theme design and the parent theme customisation options. If you found a WordPress theme similar to your HTML theme, you are lucky. Otherwise, you have more customization work to do.
Next, you have to import the content. Use the Custom HTML Gutenberg block and paste the needed sequences of code from index.html. Another way is to create a new page from the WordPress dashboard and paste items from index.html step by step. You have full control over each item and the freedom to make improvements on the go.
Bonus: Two Alternatives
People without budget limitations may hire WordPress agencies to convert an HTML theme to a WordPress theme. It’s comfortable and hassle-free, but the price tag isn’t for every budget, especially for complex sites.
You know the saying that there is a plugin for every WordPress issue. Well, there is a plugin that considerably streamlines the conversion. HTML Import 2 is relatively simple to use and it has done good jobs in the past. However, it hasn’t been tested with the latest three major WordPress releases. As a result, it may not work for your site or conflict with other plugins. Also, this un-updated plugin is a vulnerability for your site security. Sadly, we didn’t find a plugin replacement for HTML Import 2. Did you find a plugin alternative? Please let us know by leaving a comment and we will update the post.
Over to You
You now have a clear overview of the ways to convert an HTML theme to a WordPress theme. The correct method for you depends on your preferences and coding skills. It’s not rocket science to convert your site, but it needs a lot of time, patience, and eventually a few cups of coffee.
