How to Convert a HTML Site to WordPress (Step by Step)

Are you considering converting your rather static HTML site to a more dynamic WordPress site? Certainly, that is good thinking! WordPress currently powers 35% of all websites on the internet and has surely grown to be the most popular among other website builders.

Converting HTML to WordPress may seem like a very daunting task. However, we’ll teach you how shortly.

In this HTML to WordPress tutorial, you’ll definitely learn two (2) ways of doing it. Firstly, it is the manual method. Secondly, it is the child-theme method.

Feel free to try any of the methods depending on your coding skills, time, money, as well as personal preference. So, let’s go.

Content

WordPress vs HTML
Before you convert HTML to WordPress
First method: Convert HTML to WordPress with a theme
Second method: Using a child theme
Completing your site
Technical Aspects of Conversion: Navigating CSS, JavaScript, and Images
Troubleshooting and Common Errors
Finally

WordPress vs HTML

Before we go into how to convert HTML to WordPress, let’s first make a brief comparison between them.

Coding skills

To begin with, anyone can use WordPress. Yes, definitely anyone. Important to realize, it requires little or no coding skills. HTML sites, on the other hand, require an in-depth knowledge of coding. If you love to code and are willing to spend time making every change, then using an HTML site may be a good option. Otherwise, save yourself some stress and use WordPress.

Ease of Usage

To point out, WordPress uses an easy drag and drop interface. As a result, this makes content creation and management a walk in the park. However, we can’t say the same thing about an HTML site. So many lines of code aren’t so easy to handle, especially for a beginner.

Flexibility

There are thousands of WordPress templates to choose from – free as well as premium. Furthermore, with just a few clicks, you can give a WordPress website a new look. The case is rather different with an HTML site.

Functionality

For the most part, with WordPress plugins, you can add more functionality to your WP site. Altogether, no coding is required. Just search for the plugin, install, and then activate it. Improving the functionality of an HTML site is also possible. Though, it’s just more difficult to achieve.

Additionally, WordPress sites have great SEO and Security features.

Before you Convert HTML to WordPress

So far, we have dealt much on how beneficial WordPress is over a static HTML site. But before you move to WordPress, you need the following:

Web Hosting provider

First thing to remember, you need a hosting service for your new WordPress site. Take note that your website’s stability, speed, as well as security largely depends on your web host. So, be sure to go for the best. We have made a list of the best WordPress hosting providers in order for you to make the most informed decision. On the other hand, you can install WordPress on localhost and then go live later on.
WordPress installation

If you haven’t installed WordPress yet, do so. At the same time, read our WordPress resource on how to create a WP site in three easy steps.
Code Editor

To point out, this will be useful for handling your HTML codes. Notepad++, Sublime, as well as Aptana Studio are great examples.

We’ll be explaining how to convert HTML to WordPress using 2 methods, viz Manual and Child Theme. For many users, however, the child theme method will be easier to follow. But if you have WP experience, you may prefer the manual method.

Side Note: In case you do not feel comfortable working with codes or WordPress, you can hire an expert to do this for you. Otherwise, roll up your sleeves and let’s get to work.

First Method: Convert HTML To WordPress With A Theme

For the most part, you may decide to retain the design on your HTML website. That’s often because you want your site visitors to have the same experience as they did on your HTML site. If that’s so, follow this procedure.

As we mentioned, this method requires more experience, and more work to make complete. That means you do not get the full features of a WordPress theme unless you code them in one after the other later on (info that cannot be covered here).

On the plus side, this option gives you full customization of your theme as you will be putting all parts in there.

Ideally, only use this option if you are quite confident in coding, or if you want to get a developer to help you with it.

Ready to start? Let’s go.

Step 1: Create a theme folder to hold your theme files

Firstly, create a new folder on your computer and give it a name such as my-theme. Then, open your code or text editor and create five (5) files namely;

style.css
header.php
sidebar.php
Footer.php
index.php

We’ll work with these files one after the other, starting with style.css

Step 2: Create a WordPress Stylesheet from the Existing CSS – HTML to WordPress

The style.css file we created in the previous step is indeed our WordPress style sheet. Since we intend to maintain the style of the existing HTML site, we’ll use its CSS code. CSS is in fact what determines how your website looks. So, open your style.css file and paste the following header code:

/*
Theme Name: (fill in the name of your theme).
Theme URI: (here goes the theme’s homepage or your site’s address)
Author: (Fill in your name here)
Author URI: (your site’s address)
Description: (you may choose to leave this out, it’s just a brief description of your theme)
Version: (what’s your theme’s version? This is optional as well.)*/

Say, we’re creating a theme for FixRunner. Therefore, the header would look like this:

/*
Theme Name: FixRunner
Theme URI: https://www.fixrunner.com
Author: Rumide
Author URI: https://www.fixrunner.com
Description: This is FixRunner’s default WP theme
Version: 1.0.0*/

Afterward, copy and paste the existing site’s CSS in the WordPress style sheet. Then save the style.css file and close it. Easy, right! Let’s move on.

Step 3: Create your header, sidebar, and footer from existing HTML

As you recall, we created four .php files in the first step: header.php, sidebar.php, footer.php, and index.php. WordPress uses the first 3 PHP files to determine which part of the code is the header, sidebar or footer.

This method certainly makes managing your code easy. As you know, every page on your site must have your header items, such as the navigation menu. The same goes for footers. Furthermore, these parts do not change from page to page. Hence, it makes sense to keep them in their own file and pull them into pages.

That way, if you need to adjust your nav menu structure or something else in your header, you edit just one file (header.php), and that does it for your entire site.

With that said, we’ll now show you how to divide your HTML code into parts (header, sidebar, footer).

Let’s see an example using the following code (you should use your site’s HTML in your index.html file for this).

HTML Code – HTML to WordPress

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>internetPhenomenon</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”wrapper”>
<div id=”leftcol”>
<h1 id=”websitetitle”><span>internet</span>Phenomenon</h1>
<div id=”nav”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”services.html”>Our Services</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
<li><a href=”privacy.html>Privacy Policy</a></li>
</ul>
</div>
<div id=”maincontent”>
<div id=”welcomebox”>
<img src=”images/sheep.jpg” alt=”” />
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id=”contentheading”>
<h3>Home</h3>
</div>
<img src=”images/undercontentheading.jpg” alt=”” />
<div id=”contentbox”>
<div id=”content”>
<p>
<strong>internetPhenomenon</strong>, my first template contributed
to <i>open source web designs</i>.
</p>
</div>
</div>
<img src=”images/leftcolfoot.jpg” alt=”” />
</div>
<div id=”rightcol”>
<div class=”section”>
<h2>Search</h2>
<form action=”http://all-free-download.com/free-website-templates/”>
<input type=”text” id=”searchInput” />
<input type=”submit” value=”Go!” id=”searchSubmit” />
</form>
</div>
<div class=”section”>
<h2>News Update</h2>
<p>Lorem ipsum dolor sit amet.</p>
<div class=”posted”>Posted by <span>Admin</span></div>
<div class=”date”>June 02, 2007</div>
</div>
</div>
</div>
<!– Footer –>
<div id=”copyright”>
Copyright © Your Company, 2007-2008 <br />
Designed by <a href=”http://aquaticus.us.to”>Aquaticus Studios</a>
</div>
<div align=”center”>
This template downloaded form
<a href=”http://all-free-download.com/free-website-templates/”
>free website templates</a>
</div>
</div>
</body>
</html>

Now it’s time to divide the codes into parts for HTML to WordPress

Header.php file:

Paste everything from the beginning of the code to the start of the main content area (that’s the section from the start to the end of the yellow highlights). In addition, you should add this line of code: <?php wp_head();?> right before the </head> tag. The purpose of this action is to ensure that WordPress plugins work as they should.

Sidebar.php file:

Then copy and paste the section that starts with <div id=”rightcol”> into the sidebar.php file (the section from the start to the end of the green highlights). This section is what displays the sidebar (or in this case, right column) of your HTML site.

Footer.php file:

Further on, copy all lines of codes from the end of the sidebar to the end of the file and paste in the footer.php file (the section from the start to the end of the blue highlights).

Also, add this line of code <?php wp_footer();?> right before the </body> tag. This will ensure that your WordPress plugins work as they should.

That’s all for step 3. You can close all other files but we still have some work to do in header.php and index.php files.

Step 4: Edit the Header.php – HTML to WordPress

Look through the header.php file, as you’ll come across this line of code within the <head> section:

Now replace it with the following:

That’s great! We have successfully converted the ‘call for style sheet’ from HTML to WordPress format. We are done with the header.php file so you can save and close it now.

Step 5: Edit the Index.php files

Next, copy and paste this code on top of the index.php:

<?php get_header(); ?>

Leave a space, then paste these lines of code.

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

As you may be able to tell already, the first one (get_header) pulls in the header.php file into the index.php file we’re editing. Likewise, the next 2 pull in the sidebar and footer.

All your main content is generally placed between the header and sidebar (the space we left above).

For index.php, we will next paste the Loop within this space. The loop is a PHP code snippet that displays your posts.

So, paste the following after <?php get_header(); ?>

<?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; ?>

All in all, save the index.php file. Now, to the final step.

Step 6: Upload theme

Now that we have successfully completed the theme folder, it’s time to upload it to WordPress. To do this, paste or upload the theme folder in /wp-content/themes/ (in your WordPress folder). Now go to your WordPress dashboard and open Appearance >> Themes.

If you have followed our steps accordingly, your new theme will appear in the list of themes. Since that’s the case, go on to activate it.

If you are not comfortable with the amount of manual work involved in this method, the next method is surely less daunting.

Second Method: Using a Child Theme

In this method, we’ll be using a WordPress Child Theme. A child theme is one that exhibits the styling and functionality of another theme (parent theme).

Aside from being easier, you also end up with a more robust theme with important functions like controlling menu items from the “Themes” menu.

Without delay, let’s see how to convert your static HTML site to WordPress via a child theme.

Step 1: Choose a theme

First, select a theme that is similar to your existing HTML design. In order to see your options, check our list of the top 10 free WordPress themes. Then again, you could go for a paid theme. Once you have made a choice, install the theme but don’t activate it. This theme only acts as a base as we will work more with the child theme.

Step 2: Create a theme folder

That is to say, the theme folder will contain files relating to the child theme. Give the folder a name that is related to the parent theme (e.g. “parent theme’s name-child”). Assuming we’re creating a child theme for the Twenty Twenty WP theme, the folder should rather be named twentytwenty-child.

Within this folder, we will be creating our style.css as well as functions.php files.

Step 3: Create a Style Sheet – HTML to WordPress

Open a new file in your code editor and save it as style.css. Then copy and paste the following lines of code (edit as required).

/*
Theme Name: Fill in the name of your theme
Theme URI: Your theme’s URI
Description: A brief description
Author: you
Author URI: your site’s address
Template: Enter parent’s folder name
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, three-columns, right-sidebar, mobile-responsive
Text Domain: parent-theme-child (e.g. twenty-seventeen-child)
*/

To illustrate this section properly, we will assume that we want to create a child theme for Twenty Twenty WP theme. In that case, here’s how this header would look:

/*
Theme Name: Twenty Twenty Child
Theme URI: https://www.fixrunner.com
Description: A child theme based on the WP 2020 theme
Author: Rumide
Author URI: https://www.fixrunner.com
Template: twentytwenty
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, three-columns, right-sidebar, mobile-responsive
Text Domain: twenty-twenty-child
*/

Of all these, take special note of the template item. The value must be the folder name of the parent theme, otherwise, your theme won’t work.

With this part added, copy and paste all your site styles from the HTML site. Then save this file.

Step 4: Create functions.php file

It’s time to inherit the styling of the parent’s theme. To do this, create a new file and name it functions.php. Then, paste the following code into the file.

<?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, the child theme automatically inherits the styling of the parent theme.

Step 5: Activate the Child theme

Now it’s time to activate your child theme. Simply add the theme folder to /wpcontent/themes/. Then, visit your dashboard and activate the theme.

Completing Your Site

Whether you choose to use the manual or child theme method, you would need to move over the rest of your content when done.

Since you are now in WordPress, they will be done via the dashboard.

For example, to create a page, go to Pages > Add New in your dashboard.

Next, enter your page title (e.g. About Us), and begin creating your content.

Alternatively (and often easier), you can switch the content editor from Visual to Text. Then copy the About Us code from your HTML site to this page, taking care to ensure you exclude the header, sidebar, and footer parts (as these are already in your theme).

As you do, some things like images will become broken links, for these, switch back to the Visual editor and upload these images in the right places.

Note: If you are using Gutenberg editor (which will be the case if you just installed WordPress), you cannot switch from Visual to Text. Instead, add a new “Custom HTML” code block and paste in your HTML.

Technical Aspects of Conversion: Navigating CSS, JavaScript, and Images

Embarking on the journey from a static HTML site to a dynamic WordPress platform encompasses more than just transferring content. It’s about ensuring your website’s aesthetics and functionality transition seamlessly.

Let’s dive into the crucial technical elements, CSS, JavaScript, and images, that play pivotal roles in this transformation.

CSS: The Style Behind the Substance

CSS, or Cascading Style Sheets, is the backbone of your website’s design, dictating everything from layout to font styles.

When converting your site, it’s essential to integrate your existing CSS into WordPress to preserve your site’s unique look and feel. Here’s a step-by-step guide:

Preserve Your Style: Begin by locating your HTML site’s CSS file. This file contains all the style rules for your website.
Incorporate into WordPress: Create a new file in your WordPress theme directory named style.css. This will be your primary stylesheet in WordPress.
Transfer Styles: Copy the contents of your original CSS file into the newly created style.css file within your WordPress theme. This action ensures that your site retains its original styling post-conversion.

JavaScript: Enhancing Interactivity

JavaScript adds interactivity and dynamic content to your site, from simple animations to complex user interfaces. Integrating JavaScript into your WordPress site involves:

Identify JavaScript Files: Locate the JavaScript (.js) files used in your HTML site. These might include custom scripts or libraries such as jQuery.
Upload to Your Theme: Place these .js files within your WordPress theme folder, ideally in a subdirectory named js to keep things organized.
Link Scripts in WordPress: Use the wp_enqueue_script function within your theme’s functions.php file to properly link these JavaScript files. This ensures they are loaded correctly on your site.

Images: Visual Continuity

Images are the visual pillars of your site, and maintaining their quality and placement is crucial. To manage images during the conversion, do the following:

Gather All Images: Collect all images from your HTML site. This includes icons, backgrounds, and content images.
Upload to WordPress: Within your WordPress theme directory, create an images folder and upload all your images here.
Update Image Paths: Ensure all image paths in your CSS and HTML (now PHP) files point to the new locations within your WordPress theme. This might involve updating URLs to reflect the WordPress structure.

Troubleshooting and Common Errors

While converting HTML to WordPress offers a plethora of opportunities to enhance your website’s functionality and user experience, the path may occasionally present obstacles.

Here are some common hurdles you might encounter, along with practical solutions to overcome them.

File Type is Not Permitted for Security Reasons Error

This error often occurs when trying to upload custom HTML files directly into WordPress. WordPress restricts certain file types for security reasons.

To avoid this, you can insert your HTML code into a WordPress page using the ‘Custom HTML‘ block in the Gutenberg editor. This method allows you to safely include custom HTML without altering the core files or compromising security.

CSS and JavaScript Not Loading

After migrating your HTML content, you might notice that some styles or scripts aren’t functioning as expected. This issue usually stems from incorrect paths to CSS and JavaScript files.

Ensure that these files are correctly enqueued in your WordPress theme’s functions.php file. Utilizing the wp_enqueue_style and wp_enqueue_script functions allows WordPress to manage these resources effectively, ensuring they load in the right order and only when needed.

Broken Links and Missing Images

Links to internal pages or images might break during the conversion process, leading to 404 errors or missing media. This typically happens due to absolute paths in the HTML that no longer align with the WordPress structure.

To fix this, update all links and image paths to reflect their new locations within the WordPress directory. Plugins like ‘Search and Replace’ can automate this process, helping you update paths in bulk.

Theme Compatibility Issues

Custom HTML elements might not display correctly with your chosen WordPress theme. If you encounter layout breaks or styling issues, consider creating a child theme to implement custom templates or styles.

This approach preserves your modifications and ensures compatibility with future theme updates.

Plugin Conflicts

Plugins enhance WordPress functionality but can sometimes conflict with custom HTML or scripts. If you notice new issues after installing a plugin, deactivate it temporarily to see if the problem resolves. Identifying and replacing conflicting plugins can restore site functionality.

Finally – HTML to WordPress

In the final analysis, converting an HTML site to WordPress seems like a daunting task. However, with some work and dedication, you can migrate your site from HTML to WordPress without issues.

As you move to WordPress, you will need to get up to speed with the WordPress platform. Without delay, check our WordPress tutorials to learn more about WordPress.

Equally important, you can extend your site’s functionalities by installing and activating WordPress plugins. Wondering which plugin to download? Read our list of the best WordPress plugins every site should have.

Did you have any issues while converting from HTML to WordPress? Let us know in the comments below.