How to manually convert HTML to WordPress theme?

Over the year, one of the best open-source platforms like WordPress has grown in popularity thanks to its simple and flexible CMS, which has become much easier for its user. Gone are the days when you needed a coding master to build your business website.

Fortunately, we are now living in a highly technological age, where there are dozens of frameworks that provide us with excellent content management system platforms.

The main one is, of course, WordPress.

As a software development company, we get a lot of inquiries where customers want to switch from HTML to WordPress to have better control of the CMS.

So in this blog, we are going to let you know how you can convert your static HTML site to WordPress; you need to have basic knowledge of HTML, CSS, and PHP.

There are three ways to do this conversion, but in this blog, we're going to show you the manual way to do it so that you can get a feel for the changes you've made and how they're reflected.

1. Manual conversion from HTML to WordPress
2. Converting HTML via a WordPress child theme
3. Importing HTML content into WordPress using a plugin

Manual conversion from HTML to WordPress

Step 1: Create New Theme Folder and Base Files

The first thing to do is create a theme folder on your desktop or in any directory on your computer. Then, you can name it whatever you want your theme to be called.

After that, go to one of your code editors and create some text files and name them as follows:

i) style.css
ii) index.php
iii) header.php
iv) sidebar.php
v) footer.php

Step 2: Copy the existing CSS to a new stylesheet

You will need to copy the CSS coding from your existing HTML site to a WordPress stylesheet for the next step.
Now before copying the HTML CSS, open style.css and paste the following:

/*Theme Name: Twenty TwentyTheme
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor
URI: https://wordpress.org/
Description: Twenty Twenty
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/

This is the header of the stylesheet, you will need to copy the whole line of code including the comment /…../

The detailed description of these lines of code follows:

✔ Theme name : This can be anything you want

✔ Theme URL : Site address or homepage information

✔ Author : Can be your name

✔ Author URL : Can be as we added it above or you can add a link to your homepage or whatever makes sense.

✔ Description : Optional, can be as is, or you can add any description you want. It will appear in the WordPress backend.

✔ version : This is basically your theme version. Since this is not a post theme, you can start with 1.0 here.

✔ License, License URI & Tags : Only required if you are going to submit the theme to the WordPress directory for others to use. If you keep it to yourself, don't worry. Keep as is.

Once you are done, add the above to your style.css file; copy and paste the CSS from your existing HTML site into this file. Save the file and close it.

Step 3: separate your existing HTML code

In WordPress to access database information, PHP is used. As a result, your existing HTML code which resides in index.html must be separated into parts, so that the WordPress CMS can combine them properly.

To do this, you will need to copy parts of the original HTML document into different files that you created in the first step.

First, open your index.html file, then browse your newly created WordPress file:

header.php:

From the start of your HTML file to the main content area i.e. or go to the header.php file. So copy and paste the code after that just before it is displayed copy and paste after

Sidebar.php

Check your index.html file again; find and search or and notice the closing tag. Now, whatever is inside this section, copy and paste inside the sidebar.php file; save and close.

Footer.php

Now, whatever is left from the end of the sidebar (i.e.) to the end of the index.html file should contain footer information. It will be added to this file. After that just before the closing hook tag copy and paste after

save file

Once you are done with the index.html file, save it and close it as well

Step 4: Finalize your header.php and index.php files for WordPress

Now the last steps for header.php and index.php are in the following format:

Look for the link in your section that looks like this:

<link rel=”stylesheet” href=”style.css”>

Replace the link with the link below:

<link rel=”stylesheet” href=”<?php
echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

Now save and close the header.php file.

In your index.php file; enter the following, exactly like this:

<?phpget_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Make sure the space between the two lines of code above is as is, one after the other.

The loop starts here:

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>"<?php post_class(); ?>>
<div class="post-header">
<div class="date">
<?php the_time( 'M j y'); ?>
</div>
<h2><a href="<?php the_permalink(); ?>"rel="bookmark"title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?>
</div>
</div><!--endpost header-->
<div class="entry clear">
<?php if( function_exists( 'add_theme_support') ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--endentry-->
<div class="post-footer">
<div class="comments">
<?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
</div><!--endpost footer-->
</div><!--endpost-->
<?php endwhile; /* rewind or continue if all posts have been fetched */?>
<div class="navigation index">
<div class="alignleft">
<?php next_posts_link( 'Older Entries'); ?>
</div>
<div class="alignright">
<?php previous_posts_link( 'Newer Entries'); ?>
</div>
</div><!--endnavigation-->
<?php else: ?>
<?php endif; ?>

After that save and close the file. The basic theme is ready.

Step 5: Download your new theme

To download your theme, follow these steps:

1. Create a zip file from your folder

2. Go to WordPress

3. Select Appearance-> Theme-> click Add New at the top

4. Click Download Theme.

5. Download your zip file and click Install Now.

Once done, you can easily activate your theme.

These are the basic steps to take if you are manually convert your HTML site to a WordPress theme. Although a lot of work remains to be done to fully migrate content from HTML to WordPress in terms of pages.

If you have been following our blog as a guide for migrating from HTML to WordPress, then welcome aboard, you have joined one of the largest open source CMS communities in the world.