A Detailed Guide for Uploading and Converting HTML

Uploading and converting HTML to WordPress is done for a wide variety of reasons. You may want to convert an old, static HTML site and run it on the WordPress content management system. There’s also the possibility that you simply need a place to store or share an HTML file, and WordPress provides a viable solution for both of those.

Switching from HTML to WordPress often feels intimidating or unproductive. We’re here to guide you through the process to ensure that you learn the tools required to convert HTML files and complete a conversion on your own.

HTML is a simple markup language, and WordPress, although powerful and filled with features, is fairly simple and intuitive. Therefore, the conversion between HTML and WordPress shouldn’t feel like a chore either.

Keep reading to learn more about HTML basics to WordPress conversions, along with the real-world situations in which you may consider such a move.

Primary Reasons to Upload or Convert HTML to WordPress

If you’re wondering why you may convert or upload HTML to WordPress in the first place, take a look at the following examples to understand the reasons for completing a task like this.

• Convert an old HTML website to run on the WordPress system. Maybe the old design is one of your favorites or you just don’t want to go through the work of redesigning. This is also important for retaining your brand image.
• Convert a single HTML webpage or blog post and publish it on your current WordPress site. This is particularly useful if your current theme doesn’t have a custom page layout you want.
• Change an HTML website template into a theme format that can be installed on WordPress.
• Upload an HTML verification file, proving ownership of your website to a search engine or other service.
• Store an HTML file on your website for use later.
• Generate a link to that file so you can share it or have users download the file to their own computers.
• Generate an HTML design component on a WordPress page or post, like a custom author box or email subscription form.
• Match your WordPress theme with an HTML website design that you found online but don’t have access to.

As you can see, the reasons for adding an HTML file to WordPress vary based on your goals. Sometimes the process is rather simple, like uploading an HTML file to a WordPress blog post or page. Other times there’s a lengthy process of converting an entire HTML website with dozens of files and side jobs that must be completed, like transferring over the website content along with the HTML.

For this guide on converting and uploading HTML to WordPress, we’ll start with the basics (how to upload an HTML file to WordPress,) then we’ll move into the more in-depth requirements for duplicating or converting full HTML websites to function on the WordPress system.

Finally, we’ll talk about the pros and cons of automated HTML converters and which tools are available on the market.

Read on to get started with your first HTML to WordPress upload or conversion!

How to Upload an HTML File to WordPress

The first step in learning how to turn an HTML file into a WordPress page or full website is to view how the HTML file upload process works.

Go to this guide for an in-depth look into how to upload an HTML file to WordPress.

We’ll give you a quick summary of that process below to ensure that you’re on the right track as we move to other steps further down in this article.

There are three methods for uploading an HTML file to WordPress:

1. Through the WordPress dashboard.
2. With an FTP client.
3. Using cPanel.

Uploading an HTML file to the WordPress dashboard is done in the Media Library. We’ll cover some of the routes to take in the tutorials below, but keep in mind that uploading a file through the WordPress dashboard can be done on a page, post, or directly through the Media Library.

An FTP client (like FileZilla) links to the live files for your WordPress site, along with the files on your computer. This allows you to transfer local files to the hosted site files as long as you log into the FTP Client with your SFTP hosting credentials.

Finally, a hosting cPanel offers access to an online file manager. It functions much like an FTP Client, giving you control of all the same files. The main difference is that the cPanel is a web app online, requiring you to upload your files to the cPanel instead of instantly transferring them from a local environment to a live site in an FTP client.

Each method has its pros and cons. Kinsta Hosting doesn’t offer a cPanel experience, so it’s best to upload smaller HTML files you want to store or share through the WordPress dashboard.

An FTP/SFTP Client is the chosen method for creating an entirely new website from a static HTML website. The reason for this is because an FTP/SFTP Client provides an incredible amount of control over your site files and can transfer anything from media files to HTML folders directly from your computer.

How to Add HTML Code to a WordPress Page or Post

There are a few methods for uploading an HTML file directly to a WordPress post or page. The first is the process of actually uploading an HTML zip or TXT file as a media element. This method works similar to uploading an image to the media manager, except you’re doing it through a page or post, and it’s an HTML file instead of a photo.

You may want to complete this method to have a link for people to download the HTML file or access the file yourself on your site’s backend.

Another option is pasting an HTML block into a page or post to add some design elements. For instance, you may have a custom sign up form made just for this page that you’d like to insert with a small bit of HTML.

Both methods have different purposes and processes to achieve the final results.

To upload an HTML file to a post or page, follow these steps.

Go to Pages > All Pages in the WordPress dashboard. If you’d like to start with a blank page, go to Pages > Add New.

Choose the page where you’d like to upload the HTML file. You may also click the Add New button if you’re making a brand new page.

These steps are virtually the same for adding HTML files to WordPress posts. We’re simply walking through how to do it with a WordPress page. If you’d like to use a post instead, go to Posts > All Posts or Posts > Add New.

This part depends on whether you’re using the Gutenberg Block Editor or the Classic WordPress Editor.

In Gutenberg, you can find the + sign button and click on that to search for a new visual building block. Search for the File block, which you can either type into the search field or scroll through the list of blocks to locate.

Select the File block to place it on your page or post.

Note: If you’re using the Classic WordPress Editor, simply click on the Add Media button and upload your HTML file using that. It creates a link to your file for people to download on the frontend of your site.

For the Gutenberg block, the File module should show an Upload button. Click the Upload button and locate the desired HTML file on your computer. These are usually stored as TXT files, collections of TXT files in a folder, or in ZIP files.

Once it’s uploaded to your website, the file is revealed as a link. Any user can now come to your website and click on the link from that page or post to view the HTML file and even download it to their own computer.

Besides, that file gets stored in your media library, so you can go to the library to get the file’s URL at any time and place it anywhere else you want. You can also just use WordPress as storage for the file.

If you only want to store the file in WordPress and not have a downloadable link for all of your users to click, simply delete the link created on the page or post.

You might see an error that tells you the file type is not permitted for security reasons. This is rather common, so take a look at this guide to remove that error and allow most file types into your WordPress media library. Overall, the process involves either editing your wp-config.php file or using a plugin to eliminate the error.

Add HTML Code to the Design of Your Page or Post

As mentioned earlier, one of the reasons you may consider adding an HTML file to a page or post is to render a simple design on that page or post.

The previous method is more for storing HTML files on WordPress and adding a link for people to download them.

This is a more functional solution, seeing as how you have the opportunity to copy-and-paste or make your own HTML code for things like forms, author boxes, banners, and more.

Go to the page or post of your choice and choose the section you’d like to place the bit of HTML code.

Click on the + sign to see the selection of blocks. Find the Custom HTML block by either typing it into the search field or scrolling through the list of blocks.

Choose the Custom HTML block to insert it into the page or post.

That block provides a simple, blank code field for you to paste or type, whatever HTML code you have available.

I’ll paste in a straightforward contact form with an email field and a Submit button for this particular tutorial.

Once you have the HTML code in the block, click the Update or Publish button for it to render on the frontend of your page or post.

If you go to the frontend of the page or post, the HTML should do its work and reveal whatever design or functionality you were attempting to add to the layout.

In this case, you can see the form where I ask for an email and also have a Submit button.

The process and result aren’t much different in the Classic WordPress Editor, except you won’t use a drag-and-drop Gutenberg block. Instead, navigate to the Text tab in your editor (instead of the Visual tab) and paste the HTML code wherever you want it to appear on the page.

How to Upload an HTML Verification File to WordPress

Another reason you may want to upload HTML to WordPress is for search optimization requirements. Google, and some other search engines, offer consoles and webmaster tools to view your site performance and optimize your content with the help of analytics and reports that check-in on issues and fixes for those issues.

However, Google can’t assume you’re the owner of a random website simply because you claim you are. That’s where an HTML verification file comes into play.

Simply put, Google provides an HTML file that you must upload to your website. Only the site owner should have access to the website files, so Google uses this as a way to ensure you’re not trying to control someone else’s webmaster tools.

The uploaded HTML verification file then sends a message to Google indicating that the file was added to that domain and that you are, in fact, the owner.

It’s prudent to learn about uploading an HTML verification file since Google and the search engines aren’t the only services that ask you to verify your identity or ownership with files like these. Some third-party plugins, directories, and plugins also want to ensure that you’re not an intruder.

Reasons for Uploading an HTML Verification File

• To verify that you own a website for search engine optimization tools.
• When proving ownership for certain online directories.
• If you need to link to a third-party integration or plugin, you need to figure out if you actually maintain ownership of your site.

As you can see, this HTML file may come from different sources. You typically don’t have to know anything about the HTML file’s content, but only that it’s utilized for sending out that pingback to the service to indicate you have control over the site files.

Having said that, our demonstration of uploading an HTML verification file to WordPress will involve the Google Search Console, seeing as how that’s one of the most common reasons for using a verification file.

To begin, register your website with Google. This is done by going to the Google Search Console tool. Click the Start Now button and either log into your Google account or register an account with Google.

Once logged into the Google Search Console, you may see a list of properties that you’ve either managed or tested in the past. On the other hand, you may see an empty list.

Regardless, go to the Search Property tab in the upper left-hand corner of the dashboard.

In the dropdown menu, select the Add Property choice to move forward. This allows you to add your website as a managed property in the Google Search Console.

The next popup window asks you to select a property type. The Domain option allows you to verify all URLs across all subdomains. This is often the easiest way to verify a page, but it requires DNS verification – which is found in your hosting account.

However, we’re currently talking about HTML file uploads, so we’ll walk through the URL prefix option, which is an older, yet still reliable method for verifying that you own a website. What’s more, is that this method helps with identifying specific URLs under the address you enter.

Therefore, take the URL from your website and paste it into the URL Prefix field.

Click the Continue button.

Now the Google Search Console requests that you verify ownership of the website.

There are several other verification methods, but this is the one that uses an HTML file upload.

Click on the button that asks you to download the file.

Save that HTML file on your computer in a folder that you’ll remember.

The next step is to upload the file to the WordPress website you pasted into the Google Search Console from before.

As previously mentioned, there are three options for uploading an HTML file to WordPress.

The first method, uploading through the dashboard, is definitely a viable option. Many people still get side-tracked when a common error comes up for uploading an HTML file to the Media Library. Because of this, it’s often faster to make your uploads with an FTP Client. If, however, you plan on uploading to the WordPress dashboard, and you see the “Sorry, This File Type is Not Permitted” error, use this guide to fix the problem.

Now you have the other two solutions: using an FTP/SFTP Client or uploading to the cPanel from your hosting account.

The cPanel isn’t a bad choice for some hosts, but again, Kinsta doesn’t offer a cPanel. Therefore, we’ll primarily focus on uploading the HTML file through an FTP/SFTP client. The detailed steps are outlined in the linked article above, but here’s a quick recap to guide you along your way.

To begin, download FileZilla to your computer. You can also try other FTP/SFTP clients.

Note: We recommend you make a backup of your website before this process. It’s uncommon to cause problems with a site while transferring files via FTP/SFTP, but it’s absolutely possible. You don’t want to crash your site or lose data, so create a backup site file.

Open the FTP/SFTP client and type in your FTP/SFTP credentials to connect to the web host.

The credentials required include the following:

• Host
• Username
• Password
• Port

Where do you find the credentials for your WordPress site?

They’re typically located in your hosting dashboard, so you can either reach out to your host or look for them yourself.

Kinsta has an easy route to locating the FTP/SFTP credentials by going to the Sites tab in your Kinsta hosting panel and selecting your desired website.

Under the Info tab, look for the SFTP/SSH area. Copy over the corresponding credentials into the FTP/SFTP client.

For instance, you can see the Host, Username, Password, and Port items all organized nicely in Kinsta.

Paste those elements into the FTP/SFTP client and click on the Quickconnect button.

If you see an error, it’s most likely because FileZilla defaults to the FTP protocol and not the SFTP protocol. To fix that, go to File > Site Manager. Add a new site in FileZilla and select SFTP. Paste the hosting credentials into that area and try connecting again.

After connecting to your host, all WordPress site files appear for modification.

Locate your site’s root file, which contains folders like wp-content and wp-admin.

Find the HTML verification file (in this case, I renamed it to find it easier) under the area that shows your computer’s files. For instance, you might see it under Downloads if that’s where your internet downloads are going.

Drag that file over to the root file for your website. This is all done in the FTP/SFTP client.

The upload should only take a few seconds.

Once it’s in your site files, you can go back to the Google Verification page and check to see if it’s registering that you own the site. A Success message should appear on the Google Search Console, and several features will open up for you to optimize and analyze your website’s health.

Manually Converting an Entire HTML Site to WordPress

To convert an HTML site to WordPress, you can either use a plugin/app, manually convert your files, or utilize a child theme and transfer over the HTML files into that child theme.

The first is manually converting that HTML to make a WordPress theme.

Some say it’s the most daunting of the methods, but others prefer it since you gain full control over the process and don’t have to rely on apps or plugins that can sometimes be unreliable. Follow the steps below to complete a full HTML to WordPress site conversion manually.

Make a Folder for Your Theme and Add the Standard Theme Files

On your computer, create a folder to save all your theme’s basic files. Call the folder anything you want, preferably giving it a name that you can remember.

Create the following basic theme files:

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Feel free to open them in your code or text editor since you’ll be editing them in the future. As of right now, there’s no need to add any code to the files. Simply leave them in the folder.

Note: You can begin by creating them as TXT files. If you then change the file extension—like from .txt to .php or .txt to .css—your computer automatically adjusts it to the right file format. For instance, adding a .css extension turns the file into a Cascading Style Sheet.

Transfer Over Your WordPress Site’s Current CSS to the New The Folder

You should already have a theme installed on your current WordPress site. If not, go ahead and install a theme to help with this part.

You’ll use the current theme’s CSS as a foundation, building upon that in the style.css file with your HTML site’s files.

Therefore, copy the stylesheet header from your WordPress site into the new style.css file.

It should look something like this:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

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.
*/

In this case, the site being used has the Twenty Seventeen theme. If you’re using a different theme, you’ll see some variations in the stylesheet header.

Now it’s time to replace the old theme’s elements with information about your new theme.

To do so, swap out the following:

• Theme Name: Feel free to call your theme anything, but it’s not a bad idea to name it the same thing as your theme folder.
• Theme URI – You can use your site’s primary URL for this.
• Author – Type your name here, or whatever name you’d like to go by.
• Author URI – Make this a link to your homepage.
• Description – You can make a description of your theme to show up on the backend of your WordPress site.

Leave everything else as is. Most of the other elements like the License and Tags are only for if you plan on publishing the new theme to the WordPress Theme Directory.

Remember, what you just pasted and edited is your theme header.

Find the existing CSS from your HTML website. Copy and paste this CSS after the header in the new style.css file.

Save and close the style.css file.

Take Your Current HTML and Divide It Into Pieces

WordPress generally uses PHP to pull items like files and code, and media from its database. Therefore, an HTML website needs to be chopped up into separate PHP files to blend with the WordPress infrastructure.

This may sound intimidating, but all that’s required is dividing your HTML document into several parts, turning each of those parts into PHP files.

Every HTML file will look different, but it helps to get a visual example. Therefore, we’ll display a few HTML website templates to demonstrate.

The following code is a great option to cross-reference with your own HTML file. It’s a simple HTML webpage with a header, menu items, subheadings, a sidebar, and a footer. You can find a similar code in your own index.html file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

The following template is yet another example to base your own strategies.

 

As you can see, this one’s index.html file is a bit more complicated but still familiar in the way it’s structured.

Both examples include headers, content areas, sidebars, and footers.

You’ll most likely have a different design. Because of this, you’ll have to tweak the steps covered below.

Each step moving forward involves editing and adding to each of the new WordPress files you created before. Having said that, keep the index.html file from your HTML site open. You’ll be using this moving forward.

The header.php File

In your opened HTML file, look for everything at the beginning of the file and ending with the primary content area. The main content area is typically represented with a <div class="main"> or <main> tag.

Copy and paste this section of the HTML file into your new header.php file.

After that, find where it says </head>.

Right before that, paste in the following:

<?php wp_head();?>

This bit of code is important for most WordPress plugins to function.

The sidebar.php File

Look for the <aside> section in your index.html file.

Everything within the <aside> and </aside> tags, including those aside tags themselves, should be copied into the new sidebar.php file.

From our example file, it looks something like this:

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

The footer.php File

If you have a simple HTML website, you may only have your footer information left to transfer over. Other sites are a bit more complicated. Regardless, it’s not a bad idea to end with the footer modification seeing as how it’s one of the core building blocks that make up the WordPress site files.

In the index.html file, find and copy all code after the </aside> (the sidebar) tag.

Again, you may have more content after the sidebar section, but it’s possible for simpler HTML sites, only to have the footer to deal with.

In our example, the footer looks something like this:

</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

But not so fast. After pasting that footer code into the new footer.php file, add the <?php wp_footer();?> snippet right before the </body> bracket. This helps the footer function properly with WordPress.

You can see an example of the <?php wp_footer();?> code pasted into the footer file below.

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

Be sure to save all these new files into your theme folder. For example, after pasting this footer code into the footer.php file, you should click the Save button in your editor and close it.

Now that the basic files are done, close the original index.html file from your HTML website.

Link Your header.php And index.php Files to WordPress

You’ve already added it to the header.php file, but you still need to take additional actions. Essentially, you want to modify the call in the stylesheet from the HTML that’s in there right now to the standard WordPress PHP format.

Back in the header.php file, find the <head> section.

We’re looking for the call for the stylesheet. It looks something like this:

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/style.css">

Delete this call and replace it with the following:

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

That’s all you have to do to the header.php file. The call for the stylesheet is now working with the WordPress format, not HTML.

Go ahead and save and close the header.php file.

Next, open the index.php file (not the index.html file you were using before, but the new index.php file).

At this time, the index.php file is empty.

Take the following code and copy and paste it into the new index.php file. Leave the space between the first two lines. That’s there for a reason, which you’ll see soon.

These lines act as calls to your other site files, including header.php, sidebar.php, and footer.php.

<?php get_header(); ?>

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

The open space on the second line is reserved for what we call The Loop, or a dynamic process in WordPress that runs in the background for adding new posts to your site. Essentially, it’s letting WordPress know that more content is yet to come and that it should use The Loop to add that content. Learn more about The Loop here.

To add The Loop, paste the following code in the space you left in the index.php file before (right under <?php get_header(); ?>).

<?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() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>

The result should look like this:

<?php get_header(); ?>
<?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() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Go ahead and save the index.php file. You can also close the file now.

With that done, a WordPress theme based on your original HTML website is ready to upload into WordPress.

Upload the New Theme to WordPress

The last step is to upload the theme to your WordPress site. One option is to simply zip the site folder and upload it into the WordPress Theme section without adding a screenshot of your site for reference.

Although your theme still works the same way without a reference screenshot, we recommend creating a screenshot so that it’s easier for you to organize your themes and understand which one is actually active on your website.

By screenshot, we mean the little preview that appears for all themes installed on your WordPress dashboard. Even the ones that are not active have screenshots. It’s a requirement to have a screenshot if you plan on uploading your theme to the WordPress Theme Library.

You may not be publicly uploading your theme, but a screenshot helps with your own theme management. As you can see, it’s rather difficult to tell what the theme looks like if there’s no screenshot preview available. The Twenty Seventeen Child theme doesn’t have a screenshot, so it’s just a blank picture. It could confuse many in the future.

To add a screenshot, open the old HTML site in a browser and grab a screenshot of the homepage with whatever clipping tool or screenshot software you have available.

Open your favorite image editing software and crop the screenshot to 880×660 pixels. This will ensure that the screenshot isn’t stretched or disproportionate when added to WordPress.

Save the edited version of the screenshot to your new theme folder. It doesn’t have to go in any special folder – just place it right in the theme folder next to the other files like header.php and footer.php.

Now, you have two options for uploading the new WordPress theme to WordPress.

The first is by dragging those files into the wp-content/themes folder via FTP. If you follow this route, there’s no need to zip the file. Simply use an FTP client like FileZilla and drag the regular folder into the wp-content/themes folder.

The other option is to upload a zipped version into the WordPress dashboard.

To begin, compress the entire theme folder into a zip file.

Next, in the WordPress dashboard, go to Appearance > Themes.

Click on the Add New button.

Select the Upload Theme button.

Click on Choose File and search for the zipped file on your computer. Select the file so that it shows up on the WordPress dashboard.

Click Install Now to process the file into WordPress.

WordPress should tell you that the package is being installed and that it gets installed successfully.

Click the Activate button to finish the job.

Now the theme, with its screenshot, appears in the Themes list as the Active theme. You can go to the frontend of your WordPress site to now view a WordPress version of your original HTML website.

Keep in mind that no HTML to WordPress conversion is the same. You may find that yours is a bit more complex than what we just walked through. In general, several other actions need to be taken to get an exact duplicate of your HTML website.

For instance, you’ll have to add widget areas and comments and even adjust your blog title and description so that they’re modifiable in WordPress.

Much manual work goes into changing an HTML site to a WordPress site, and you may find that some changes are only possible with a little CSS markup.

Also, this tutorial has nothing to do with adding content like posts and images. This can be done manually by uploading images into the Media Library and adjusting elements like the URL structures.

Some plugins are out there for automating content importation, but most of them aren’t up-to-date with the new WordPress versions. Therefore, we suggest you maybe try them out to see if they work for you, but you shouldn’t expect much.

Converting HTML to WordPress via a Child Theme

This is debatably one of the easiest methods for converting an entire HTML website into a WordPress site. It works by using any of the already existent free WordPress themes online, so you can choose your favorite and combine that with your HTML site’s design.

Overall, you’re using the already created WordPress theme as a parent theme. Then, the HTML website gets converted to work with WordPress and linked to the parent theme as a child theme. If you have questions about parent and child themes, please read our guide on the topic here.

As a quick explanation, the parent theme manages your site’s functionality while the child theme is built on top of the parent theme. The parent theme could technically stand on its own, but the child theme cannot. Therefore, we’re using the child theme to modify the parent theme’s design while retaining the powerful functionality that’s already provided in the parent theme.

Here’s how to go about converting from HTML to WordPress via a child theme.

Choose a Parent Theme

The first course of action is to select a theme you like. The theme you decide on will function as your parent theme, and you’ll use it as the foundation of your website’s design.

Ideally, you’ll locate a theme that’s already close in design to the look and feel of your old HTML site. Another option is to utilize a WordPress framework or starter theme, seeing how both types of themes are already used for design foundations.

For instance, a quality starter theme is the Twenty Twenty theme or any of the default WordPress starter themes named after the year they were made. We recommend going back in the years (Twenty Nineteen, Twenty Seventeen, etc.) to see if any of them match your HTML site’s design any better.

We’ll go with the Twenty Seventeen theme for this tutorial due to its cleanliness and ability to match many simple HTML web designs.

Regardless, all of these themes serve as wonderful starting points.

To begin, install the theme on your WordPress website.

You can activate the theme if you’d like, but you’ll activate a new child theme later and only use the starter theme as a basis for the design.

Make a New Folder

All WordPress themes require folders to store your site files. Therefore, you must make a new folder for the child theme being created from the HTML site.

We recommend naming the folder after your parent theme and adding “-child” at the end of the folder name.

For instance, we’ll call the folder “twentyseventeen-child” in this case.

Overall, any name will do, as long as you can remember the folder’s name and you don’t add any spaces to it.

Configure Your Style Sheet

All child themes require style sheets that go into the theme folder.

Therefore, make a text document and name it style.css. Save it in the theme folder and include the following code into that text file:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://examplesite.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Jane Doe
 Author URI:   http://examplesite.com
 Template:     twentyseventeen
 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-seventeen-child
*/

Be sure to replace the elements that are custom to your site. You’ll potentially need to modify things like the Theme Name, Theme URI, Author, Template, and some other elements to ensure it matches your own file names. It’s similar to some of the steps in the section above called “Manually Converting an Entire HTML Site to WordPress,” explaining what each row means.

The most important is the Template tag. This should be named after the parent theme so that the child theme functions properly.

Make a functions.php File

If you were to just use the style sheet for the site, and activate the child theme, an HTML site without any styling would be available. However, we also want to add styling to the child theme to make it look the way we want it to.

All styling is going to be pulled from the parent theme.

Therefore, a functions.php file is needed to inherit the styles from the parent into the child theme.

Create a file called functions.php in your theme folder.

To activate the file, add an opening PHP tag, along with code that asks WordPress to use styling from the parent theme:

<?php
function child_theme_enqueue_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', 'child_theme_enqueue_styles' );

Another benefit of this bit of code is that it allows you to adjust the website design with your child theme.

Turn On the New Child Theme

Now it’s time to activate the child theme.

One way to activate the child theme is to add the folder to the wp/content/themes file in your WordPress files. This would be done by using an FTP/SFTP client.

You can also zip the folder and upload the theme under Appearance > Themes > Add New.

Select the Upload Theme button.

Click Choose File and locate the zip file for the child theme on your computer.

Once uploaded, click the Install Now button.

Click the Activate button.

You should now see the Twenty Seventeen Child Theme (or whatever theme you used) activated as your primary theme.

Regardless of the method you use to activate the child theme, your WordPress website should mirror your parent theme. In other words, it’s an exact duplicate of the parent theme.

Note: It’s possible to add a screenshot to your new theme instead of having no preview at all. We cover how to add a screenshot to the theme in one of the previous sections called ” Manually Converting an Entire HTML Site to WordPress.”

Add HTML Files

The goal is to make a site that resembles your original HTML website, not the parent theme.

Therefore, the final step involves you copying your HTML website content to your new WordPress website. Most of the time, you’ll have to walk through these steps manually. We’ve mentioned this before, but there are a few plugins that automate the process of transferring content. However, those plugins aren’t up-to-date with the newer WordPress versions, so use them at your own risk.

What’s An HTML to WordPress Converter? (And What Are the Options?)

An HTML to WordPress converter takes the steps covered above and either simplify them or completes the task for you entirely. You might consider an HTML to WordPress converter tool if you don’t have the time or experience to make the conversion manually.

Converters come in many different styles, but it’s important to remember that not all of them are reasonable alternatives to manually walking through the HTML to WordPress conversion process.

Converters are offered in the following forms:

• Third-party software converters, both online and locally.
• WordPress plugins.
• Actual human developers.

When looking at the conversion options, the third-party software/apps appear reasonable for simple jobs. You’re able to take a zip file of your website’s HTML files and upload them to the converter. Most of the third-party tools available function as online apps, so you simply open them in your browser and click on the Upload button.

We like these apps for less complicated conversions. If you have a basic HTML website and want to run it on WordPress, this may do the trick, but a smooth transition isn’t guaranteed.

As for WordPress plugins that convert HTML for WordPress, you’ll have a tough time locating plugins that take an entire HTML website and convert the files for WordPress. There were a few plugins available, but none of them are updated to work with the newer versions of WordPress, and you don’t want to use an outdated plugin.

However, a few plugins provide the features needed for basic file uploads that may make it easier than an FTP transfer or messing with your hosting account’s backend. Overall, many of the plugins only allow individual file uploads, so it’s not the greatest route for massive website conversion.

We consider the last method (actual human developers) a form of HTML to WordPress converter because it definitely automates the process for you by asking for expert help and having a person complete the job. Overall, hiring a human developer to convert your HTML website offers the lowest chance of you encountering problems, and you have someone to speak with if something goes wrong.

The Best HTML to WordPress Converter Plugin Options and Other Tools

As mentioned, HTML to WordPress converters come in many different configurations. You’re not going to find many designated WordPress plugins that aren’t either outdated or not working anymore. However, we do have some favorite converter plugins that complete smaller conversion tasks, along with web apps and manual development options that come in handy for more advanced HTML to WordPress conversion jobs.

Pros and Cons of Using an Automated HTML to WordPress Converter Plugin or App

An automated HTML to WordPress converter sounds like a blessing to some, but it’s not always the best solution. Take a look at the pros and cons below before committing to an app or plugin that’s made for duplicating or converting HTML.

Pros

• It cuts out the need to make your own new website files, often generating them for you.
• Many of the converters give you options to break up HTML elements and choose which ones will go into the right files for WordPress.
• You can make a theme from old HTML and use that on multiple websites.
• Some tools only require a URL to make a new website or theme.
• Other tools offer options to duplicate a website you don’t own, providing a starting point for a design you enjoy.

Cons

• You’re often still left with manual work for transferring over content like blog posts and photos.
• You’ll most likely have to figure out transferring links from the old site manually.
• These converters aren’t always kept up-to-date. One of the best converters was a WordPress plugin, but we didn’t suggest it in this article since the developer no longer maintains it.
• You may find that some of the web app converters can’t handle jobs with larger files.

Now that you have a grasp on the benefits and downsides of automated HTML converters, let’s take a look at our favorite automated converter apps and plugins below.

WP Site Importer

Although the WP Site Importer tool extracts and imports all sorts of content and files from older or third-party websites, you can bet that one of those elements involves HTML. In short, the WP Site Importer enables you to turn any site into a WordPress one, pulling content like images, menus, and pages from the HTML site and site files. WP Site Importer fixes broken links so that you don’t have to adjust them or add new ones manually. It even retains the SEO information built up from the previous site, including meta descriptions and keywords.

The importer saves you time and money by cutting out a developer’s costs and making this HTML and content conversion more of a one-click process. What’s more, is that it cleans out your HTML, cleansing and reformatting the source HTML. This makes your HTML files more compatible with WordPress and shows Google that you’re working with clean code, in turn boosting your SEO.

The WP Site Importer tool functions as a direct WordPress plugin, so you can download the plugin and activate its features right from the dashboard.

WP All Import

The WP All Import plugin is one of the fastest and easiest tools available for uploading XML files containing HTML data. Overall, the plugin allows you to migrate content from a previous website or a potential demo website built with simple HTML or some HTML files that you would like to duplicate and bring over to the new website WordPress.

The conversion happens within a matter of four steps, and you gain access to a beautiful drag-and-drop interface for managing your conversions and imports. What’s also interesting about the WP All Import plugin is that it handles URL imports from external websites. Therefore, you don’t even have to have a password or control over a site to transfer over those few files and potentially render elements in WordPress from that site.

A full website conversion may prove daunting with this plugin, but it’s worth a shot, especially if it’s a simple HTML file. What’s more, is that the plugin supports HTML conversions for elements like WooCommerce products and WordPress pages. A premium version is available for more advanced features, most notably the premium customer support that allows you to ask for help when making these conversions.

HTMLtoWordPress.io

The HTMLtoWordPress.io online app is one of the more popular solutions for converting an HTML file to WordPress. What’s exciting about the HTMLtoWordPress.io tool is that it primarily offers conversions for full websites, websites built with HTML.

All you have to do is pull up the homepage and upload your HTML zip file for quick conversion. The web app fully automates converting from HTML to WordPress, so there are no coding skills required or any reason to mess with an FTP Client.

You also get to view a full preview of your new WordPress site before completing the process and publishing it on the internet. The content and images from your site also get retained for the new WordPress website. They are editable through the Simple Live Editor app, and it’s supposed to reference those images, along with JavaScript and CSS, with no problems. Overall, it looks like a solid solution if you have one or several HTML websites in need of converting. As a bonus, you can add classes to your HTML to utilize advanced WordPress features.

Pinegrow Theme Converter for WordPress

The Pinegrow Theme Converter is a unique web design tool for taking an HTML website folder and instantly converting it into a complete WordPress theme. The theme converter uploads your files and presents a preview of the WordPress site in a visual interface. Following the upload, you can click different elements on the pages and assign smart actions to each item. These integrate with WordPress, so while you’re assigning actions, it adds the right WordPress features to your custom HTML structure and styling.

Once you’ve decided on the desired actions and saved the files, Pinegrow has an option for exporting the project into standard WordPress PHP files, which can be uploaded to a regular WordPress installation to test it out in real life. Besides, the content importing system ensures that you successfully transfer over the media elements like images and videos.

We especially enjoy the features that let you go back into Pinegrow and make edits. All you have to do is click on the Update button and send the new version to your WordPress theme without any advanced coding changes or adjusting the website in WordPress.

This is not a plugin. In fact, no WordPress plugins are used in turning the HTML file into a WordPress theme. Pinegrow comes as downloadable software in Mac, Windows, and Linux versions. From the beautiful visual editor to the immediate updating feature, the Pinegro software looks like one of the best options for converting a full HTML website into a WordPress theme.

Jekyll

Jekyll is a free HTML to WordPress converter that functions by changing plain text files into real websites. The project is hosted on GitHub as a free download. It presents the opportunity to cut out the need for databases and comment moderation instead of focusing on transferring your content and transferring/converting files with HTML, CSS, and markdown.

An interesting part about Jekyll is that it caters to blog-oriented HTML designs, compiling the content settings for pages, posts, and permalinks to migrate your blog and retain, or create, custom layouts and categories and plenty of other items.

You can install the Jekyll converter on macOS, Ubuntu, Windows, and even other Linux operating systems. All in all, Jekyll is a volunteer project with various resources like themes, plugins, and guides to test your knowledge and help you turn an HTML design into something special.

We particularly like the integrations with ecommerce tools like MemberSpace and form apps like Getform. The list of integrations is a long one, but it’s a true testament to how much potential you have with your website after making the HTML to WordPress conversion.

Theme Matcher

Theme Matcher is not so much an HTML file converter but an extractor of HTML files from third-party websites. It generates full-fledged WordPress themes after you paste in a URL from your personal site or from an HTML site you don’t own.

The idea behind this type of converter and theme generator is to either take one of your own HTML sites and turn it into a complete WordPress website or to make a theme that’s based on a design you’ve noticed elsewhere online.

For instance, you could navigate to your favorite online store and decide that you’d like to start your design with that formatting and structure. The Theme Matcher generates a completely new theme for your site, which obviously needs changing due to copyright issues, but it serves as a wonderful place to begin.

The process works by copying and pasting a site URL into the Theme Matcher field. Ask it to create a theme for you and select the website’s layout to convert into WordPress content. Much of the HTML to WordPress conversion goes on in the background here, and it’s important to identify those WordPress content areas to make it as close to a real WordPress theme as possible. Finally, you can download the theme and upload it to your WordPress CMS.

If your HTML site isn’t currently live, and you can’t paste in a URL, the Theme Matcher provides a way to upload a zip file of your HTML page to then walk through the same process.

Import Into Blog

The Import Into Blog website is an online app that grabs the HTML and other files from your live website to convert it into a WordPress site. Several options are available, such as creating a downloadable XML file to import into your WordPress site. You may also consider downloading the final result as a WordPress theme to upload to WordPress and see the completed website.

Automatic site recovery is available with the ImportIntoBlog tool. Not to mention, all internal links get rewritten so that they go to the right pages on your new website. The vast majority of site content is discovered automatically, and you can customize the look and style of the theme before exporting it. In general, the tool works best with static HTML files or a URL. It manages CSS files and Javascript and allows you to figure out the complete story behind your website and make it function properly.

HTML to WordPress Converter

The HTML to WordPress Converter is another solution that takes an HTML website and transforms it into a WordPress theme.

There’s one field to paste in a website URL and click on a Generate Theme button. You choose the content and sidebar areas for WordPress so that your pages and posts end up in the right locations, and you’re pulling the exact necessary data from the previous HTML website. It appears that all of your content should make the transfer over. However, you may have to double-check with your photos and other media elements and complete the occasional upload through WordPress.

This produces a theme and not a complete website. You need to activate your own WordPress site and host it elsewhere. You download the theme from this tool, a theme that looks exactly like the HTML website from before. Keep in mind that some elements won’t work as you originally had them, but it does a wonderful job of maintaining the structure and formatting of your site from our tests.

Apparently, the developers of the HTML to WordPress Converter tool also provide free CSS tweaks if something doesn’t come out the way you wanted it.

PHP Simple HTML DOM Parser

The PHP Simple HTML DOM Parser completes a necessary process when uploading an HTML file to WordPress. The Parser steps in as a way to locate, extract, and change any HTML elements on your website or in an HTML file. This way, you can identify errors, fix them before converting them to a WordPress site, or even use the tool to modify the HTML items that exist on your current WordPress website.

This is a free download from the SourceForge website, so you can check out reviews and ask for support if necessary.

Hiring a Developer

WP Geeks, WP Online Support, and Acclaim provide reasonably-priced HTML to WordPress conversion services for those who either don’t want to mess with completing a conversion themselves or one of the automated tools from above fails to produce solid results. The reason hiring a developer makes so much sense sometimes is that you could end up saving time and money on the process, especially if it’s an easy job that you simply don’t have the knowledge to complete.

Partnering with a real developer means that you don’t have to utilize any of your own technical skills—or lack of technical skills—to render a new website from the HTML files. The job is delegated to people who know what they’re doing, and it’s far more likely that you’ll be able to find the right help and ask questions and make requests when compared to a web app that might have some developers who could assist you.

Not to mention, this allows you to request which feature you’d like to maintain on the new website. And it’s almost a guarantee that the website actions will actually transfer over and function like they should.

We understand that hiring an HTML to WordPress developer isn’t always in the budget, but it’s worth a thought if you’re running into trouble and you have a little cash to spend.

How to Convert HTML to WordPress with an Automated App or Plugin

If you have questions about using one of the previously listed automated HTML to WordPress converters, here’s an example with the WP Site Importer. This is one of the more reputable solutions, and it’s a third-party WordPress plugin that brings together many of the features from other automated HTML to WordPress converters.

To begin, download, install, and activate the WP Site Importer plugin to your WordPress dashboard. You must download the zip file from the developer’s website and sign up for the free trial. There are also premium plans to consider. Click here if you have any questions about installing a WordPress plugin.

The WP Site Importer plugin offers a collection of import tools for single pages and posts, along with full websites and the additional elements required to complete the job, like image localization and internal link modification.

For this example, we’ll walk through most of the features, starting with a single HTML page. In the WordPress dashboard, go to Site Importer > Import Single Page.

The vast majority of default settings in the plugin are ready to go, meaning you typically don’t have to change anything. Unless, of course, you would like to tweak things like importing a page as a post, or removing featured images. Feel free to scroll through all of the plugin settings to ensure they fit your needs.

All you have to do for single-page imports is paste in the URL for the plugin to scan.

Note: File uploads are only available for multi-page conversions.

Click on the Import Page button to proceed.

The plugin tells you what was successful and provides several links to preview the new WordPress pages and edit them if need be.

You’ll also want to transfer any menus on the static HTML website.

Go to Site Importer > Import Menus for that.

Importing a menu is similar to the file conversion since it asks for the URL. You can also set elements like the menu density and the minimum menu size.

Click on Identify Menu to proceed.

Each menu item now appears on a list. You should also see multiple menus if you had more than one on your HTML site.

Check the menus you’d like to import and give each of them a name. Click on the Import Menu button.

With the WordPress menu imports, you still have to configure the menu location.

In the dashboard, navigate to Appearance > Menus.

Name and create a menu and save it to WordPress. You should already see the imported menu if everything worked as planned.

Click the Manage Locations tab and find the imported menu in the dropdown. You should place that new menu in the menu location of your choosing.

Be sure to Save Changes when you’re done.

Another part of importing an HTML site to WordPress is localizing the images. To complete this process, go to Site Importer > Localize Images.

All the default settings for the image localization are typically fine to use.

Click the Next button.

You’ll see a list of the images being transferred over from the previous website.

Select the ones you want to localize and click the Next button.

Within seconds, the plugin adds each image to your WordPress Media Library, giving them all URLs on the new website. You can go to the Media Library to ensure this transition occurred.

Another part of an HTML conversion involves updating your internal links. All website transfers typically result in broken links and problems with the URL structures.

We need to fix these, so go to Site Importer > Update Internal Links to get started.

The following page explains how the older links will get replaced with versions of the new website domain, adding sub-directories for a fluid user experience that resides on the WordPress site’s URL.

All you have to do is click on the button to Update Links. The plugin does all the conversions for you.

If you plan on converting an entire HTML website (as opposed to one page,) navigate to the Import Multiple Pages tab under the Site Importer menu.

This is also a wonderful option for those interested in uploading local site files instead of copying in a live URL.

The Multiple Pages Wizard has fields to paste in a URL and upload website HTML files.

Choose whichever is best for your job.

As the HTML site is converted and imported, you’ll see a list of URLs pulled into your WordPress website. You can remove some of the pages from the import if you don’t need them. You also have options for importing to posts, setting them as unpublished, and including the featured image.

The final step reveals the full list of webpages converted from the HTML site into your WordPress system. You can now click on the Edit or Preview button for each page to continue customizing your website.

Remember, a conversion like this doesn’t mean you’ll immediately see the exact design from your HTML website. You may have to import a stylesheet or even custom code the website or pages yourself.

Summary

Moving from HTML to WordPress requires a bit of work. But it’s worth the challenge. An HTML to WordPress upload can also help less involved tasks, like verifying your site ownership or implementing a simple HTML module.

The possibilities are plentiful when it comes to HTML file uploads and conversions. Just remember that you can typically complete much of the work with an automated HTML converter. After that, there’s most likely going to be manual work involved, but with the combination of the right tools and knowledge, you can duplicate almost any HTML website you want!

If you have any questions about uploading HTML files to WordPress or converting HTML to WordPress websites, let us know in the comments section below.