The road from sites built with pure HTML to WordPress was not a short one. From an all-text experience, web design has moved on to a highly interactive web presence. In addition to that, we no longer have to write markup ourselves but can let content management systems do the heavy lifting.
However, that doesn’t mean that static HTML websites don’t exist anymore. In fact, HTML5 is very powerful and allows you to build quality websites without a CMS behind them.
Yet, the dominant market share of WordPress shows just how entrenched the platform has become. According to W3Techs, WordPress powers approximately 43% of all websites on the internet as of early 2026 – and holds around 60% of the CMS market among sites using a known content management system. No other platform comes close, with its nearest competitor, Shopify, sitting at just over 5%.
For some of them, it means moving from static HTML to WordPress. This can be a daunting task, but this post will explain how to do it in several straightforward ways.
Below, we will show you four methods to convert from HTML to WordPress. First, you will learn what the different options are as well as their pros and cons. After that, we will show you how to execute each of them step by step. We will also cover what to do before and after the migration so nothing falls through the cracks.
Let’s get going.
Why Convert From HTML to WordPress?
Before diving into the how, it helps to understand the why. A static HTML website works, but it has limitations that become more apparent as your site grows. Here are the main reasons to make the switch:
- Easy content management – With WordPress, you can update pages, publish blog posts, and manage media from a user-friendly dashboard. No need to open a code editor or FTP client every time you want to change a paragraph.
- Extensibility with plugins – The WordPress ecosystem includes thousands of plugins for SEO, security, contact forms, ecommerce, and more. Adding functionality that would take hours to code by hand often takes a few clicks.
- Design flexibility – WordPress themes let you completely change your site’s look without losing your content. You can redesign on the fly, test new layouts, and adapt to trends far more easily than with hand-coded HTML.
- Scalability – What starts as a simple five-page site can grow into a full blog, online store, or membership site, all on the same WordPress installation.
- User roles – You can let other people contribute content without giving them access to your site’s code or settings. WordPress has built-in roles like Editor, Author, and Contributor.
In short, moving to WordPress turns a static “brochure” into a dynamic platform you can manage and grow for years to come.
Before You Begin: Planning Your Migration
A successful migration starts with preparation. Skipping these steps is the fastest route to headaches later on.
1. Back Up Your Existing HTML Site
Before you touch anything, download a complete copy of your current website to your computer. Connect to your server via FTP (using a client like FileZilla) and download every file and folder. Store this backup somewhere safe. If anything goes wrong during the migration, you can always re-upload these files to restore your old site.
2. Analyze Your Site Structure
Open your HTML site and take inventory. Identify:
- Repeating elements – The header, navigation menu, sidebar, and footer that appear on every page.
- Unique page layouts – Your homepage, standard content pages, contact page, blog index (if any), and individual blog post layout.
- Assets – Images, downloadable files, custom fonts, and JavaScript files you will need to bring over.
This inventory becomes your blueprint regardless of which conversion method you choose below.
3. Set Up a WordPress Environment
You need a place for your new WordPress site. You have two practical options:
- Local development – Install WordPress on your own computer using a tool like LocalWP. This lets you build and test privately before going live.
- Live server in a subdirectory – If you prefer to work on your actual hosting, install WordPress in a subdirectory (for example,
yoursite.com/wp/) so your current HTML site stays live while you build.
Either way, install a fresh copy of WordPress using your host’s one-click installer or by following the WordPress installation guide on WebsiteSetup.org.
The 4 Ways to Move from Static HTML to WordPress
To move from HTML to WordPress, you essentially need to get your design and your content into the WordPress environment. A theme controls the look and the feeling of a WordPress website, while the functionality is provided by the CMS itself as well as additional plugins.
Which approach is right for you depends on factors like the time and money you are able and willing to invest, your coding skills, and personal preferences. The following are the main options.
A) Manually Convert HTML to a WordPress Theme
The first option is also the most technical. If you go this route, you will take your existing code and use it as a starting point to create the WordPress theme files.
It’s not too complicated, especially if you have coding experience. You can pull it off with a bit of HTML, CSS, and some PHP knowledge. A lot of it is copy and paste.
The downside: while you will end up with a working WordPress theme, it won’t have all of the capabilities WordPress has to offer. For example, unless you build it in after the fact, your site will be without widget areas or the ability to change your menu from the WordPress backend.
While your site will do its job, you won’t be able to manage it completely via WordPress. For that reason, we personally prefer the next option.
B) HTML to WordPress via WordPress Child Theme
In our opinion, this is probably the easiest and most reasonable road in terms of effort and monetary investment. Instead of using your existing site as the jumping-off point, you use a ready-made WordPress theme instead. You then adjust only its design so that it resembles your old website.
Doing so lets you take advantage of WordPress fully while still retaining your old site’s look. You also won’t have to add WordPress features afterward. Instead, you can build on an existing theme – something that the WordPress platform is explicitly made for.
C) Import Content from HTML to WordPress Using a Plugin
If you don’t insist on using your current design and are open to changing it, things get even easier. In that case, all you need to do is set up a site, install a theme, and import your HTML content. As you will see below, this can be a quick and painless process, though results vary.
D) Rebuild Your Site Visually With a Page Builder
This is the most popular method for non-developers in 2026 and beyond. Rather than converting old code, you install a visual page builder plugin on a fresh WordPress site and recreate your design by dragging and dropping elements. You get a modern, responsive site without writing PHP.
A) How to Manually Convert HTML to a WordPress Theme
If your goal is to start from scratch and create your own WordPress theme that resembles your existing HTML website, start from here.
Don’t worry if it sounds intimidating, you’ll see that it is anything but. Just a few files and folders, as well as some copy and paste, is all it takes.
1. Create a Theme Folder and Basic Files
The first thing you need to do is create a new theme folder. You can do that on your desktop as you would for a directory on your computer. Name it whatever you want your theme to be called.
After that, go to your code editor and create a number of text files. Name them the following:
style.cssindex.phpheader.phpsidebar.phpfooter.phpfunctions.php
Don’t do anything with them yet, keep the files open in the editor. You will need them soon.
2. Copy Existing CSS to the WordPress Style Sheet
Now it’s time to prepare the WordPress style sheet (the file style.css you just created) to copy your old site’s CSS into it. For that, open the file and paste the following:
/* Theme Name: My Custom Theme Theme URI: https://example.com/my-custom-theme Author: Your Name Author URI: https://example.com Description: A custom WordPress theme converted from my static HTML site. Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: custom Text Domain: my-custom-theme */
This is the so-called style sheet header (Important: don’t leave the comment /*...*/ tags out!). Fill in each part like this:
- Theme Name – Here goes the name of your theme. It can be anything you want but it’s usually the same as the name of your theme folder.
- Theme URI – You would usually post the theme’s homepage here but you may use your own site address.
- Author – That’s you. Put your own name here or whatever you want to be called.
- Author URI – A link to your homepage. It can be the one you are building or whatever makes sense.
- Description – An optional description of your theme. This will show up in the WordPress backend.
- Version – The version of your theme. Since you are not publishing it, it doesn’t really matter. We usually put 1.0 here.
- License, License URI, Tags – These things are only important if you are planning to submit your theme to the WordPress theme directory. You can leave them out in this case, we just included them for the sake of completion.
After the header, copy and paste the existing CSS from your static HTML website. Then, save the file in your new theme folder and close it. Time to move to the rest.
3. Separate Your Existing HTML
For the next part, you need to understand that WordPress usually uses PHP to pull information from its database. For that reason, you need to chop up your existing HTML into different pieces so that the CMS can put them together properly.
While this sounds complicated, all it means is that you copy and paste parts of your HTML document into several PHP files. To demonstrate this better, we have put together a simple example page that you can see below.
As you can see it’s very much a standard HTML template that includes a header, content area, a sidebar, and a footer. The accompanying code is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Title</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">nav item #1</a></li>
<li><a href="#">nav item #2</a></li>
<li><a href="#">nav 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 Title</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. 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">© 2025 My Imaginary Website</p>
</footer>
</div>
</body>
</html>
If your design is different, you might have to somewhat adjust the steps below. However, the overall process stays the same.
First, open your current index.html (your HTML site’s main file). After that, go through your newly created WordPress files and copy the following into them (the examples below are our markup):
header.php
Everything from the beginning of your HTML file to the main content area (usually signified with <main> or <div class="main">) goes into this file. In addition to that, right before where it says </head>, copy and paste <?php wp_head();?>. This is crucial for many WordPress plugins to work properly.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Title</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<?php wp_head();?>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">nav item #1</a></li>
<li><a href="#">nav item #2</a></li>
<li><a href="#">nav item #3</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<main class="main wrapper clearfix">
sidebar.php
Everything belonging to the section <aside> goes into this WordPress file.
<aside> <h3>Sidebar</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p> </aside>
footer.php
Now, all that’s left from the end of the sidebar to the end of the file should be the footer information, which goes here. After that, add a call for <?php wp_footer();?> just before the closing bracket </body> for the same reason as you added wp_head in the header.
</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2025 My Imaginary Website</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>
After that, you are done with index.html and can close it. Save all other files to your theme folder and close them except for header.php and index.php. You have some more work to do with them.
4. “WordPressify” Header.php and Index.php
For the header, all that’s left is to change the call for the style sheet from HTML to WordPress format. To do so, look for an existing link in the <head> section. It might look something like this:
<link rel="stylesheet" href="style.css">
Replace it with this:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
**Note:** The more modern WordPress approach is to “enqueue” your stylesheet from functions.php instead of linking it directly in the header. If you are comfortable with PHP, create a functions.php file and use wp_enqueue_style() to load your CSS. This is considered best practice and is what most modern themes do. The direct link method above still works for simple conversions.
Cool, now you can save and close header.php. Then turn to index.php. It should be empty at the moment. So, first, copy and paste these lines of code:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
These are the calls for the other files that contain the rest of your site. You might notice the space between the call for the header and the sidebar. That’s where you will add The Loop.
The latter is the part of WordPress where the CMS outputs content created in the backend. It’s crucial if you want to have WordPress adding content dynamically to your pages which you will import later. To that end, paste this here right after <?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; ?>
Now, save index.php file and close it. Well done! Your basic theme is ready. Now you can add it to your new WordPress site.
5. Create a Screenshot and Upload Theme
Now you will add a theme screenshot that, together with the information from your style sheet header, will serve as a preview of your website in the WordPress backend.
To do that, open your existing site in a browser and take a screenshot with your preferred method. After that, open the image editing software of your choice and crop it to 1200×900 pixels (the recommended size for modern WordPress). Save it as screenshot.png and add it to your theme folder. Now you are ready to upload your theme.
To get the new theme onto your WordPress site, you have several options. However, the prerequisite is that all files reside inside your theme folder.
The first option is to create a zip file out of it. After that, go to your WordPress site and then to Appearance > Themes. Here, click Add New Theme at the top and then Upload Theme.
In the upcoming menu use the button to browse to the location of your zip file. Mark it and click Open, then Install Now. When it’s done, activate the theme.
Alternatively, you can connect to your server via FTP (or just go to the local directory on your hard drive) and navigate to wp-content/themes. Then, upload your (unzipped) theme folder there. After that, activate the theme from the same place as before.
Nice! Your new site’s front end should now look like your old site. All that’s left to complete the move from HTML to WordPress is to import your existing content. We will cover this further below when talking about using an existing WordPress theme.
Be aware, however, that while the basic theme works now, there are more things you can do to integrate your HTML better with WordPress. This includes making your blog title and description editable, adding widget areas, registering navigation menus, adding comments support, and much more. You might also have to add CSS markup because the content is not part of your original design like images.
As it is a lot of work, we personally like to use a solution that already has all that functionality and only needs a design change. That’s what we will show you next.
B) HTML to WordPress via WordPress Child Theme
If the above seems too intense for you, the next method might be more manageable. It allows you to take advantage of thousands of existing WordPress themes while still retaining your original design.
That’s by using a so-called child theme. These themes are built on top of another theme (the parent) that don’t stand on their own but merely modify the parent theme to fit your needs. Easy enough to do though it takes a bit of detective work.
1. Pick a Suitable Theme
The first step is to pick a suitable theme to base your design on. For that, it helps to find a theme that is close to your existing design or use a theme framework or a starter theme, which both are made to work as a base for custom themes.
Check the WordPress theme directory, our list of awesome themes, or look into premium themes to find a suitable candidate. For a simple site layout, one of the default WordPress themes like Twenty Twenty-Five works well as a starting point.
**A note on block themes vs. classic themes:** Modern WordPress now supports “block themes” that use Full Site Editing (FSE). These let you customize your header, footer, and templates entirely from the WordPress dashboard using the block editor – no code needed. If you pick a block theme as your parent, you can make many design adjustments directly in Appearance > Editor without even creating a child theme. For the classic child theme approach described below, you will want to choose a “classic” theme as your parent.
Once you have taken your pick, install the theme on your WordPress website like you would install any theme. No need to activate it. As mentioned, it’s just there to provide a base for you to work with. The rest happens in the child theme.
2. Create a New Folder
Similar to the earlier method, for the child theme, you need to create a theme folder. Here’s where you will put all the files belonging to it.
When creating child themes, it’s common to call the folder the same name as the parent theme plus -child. So, if your child theme is based on the Twenty Twenty-Five theme, you would call its directory twentytwentyfive-child.
Whatever name you choose, just be sure not to include any spaces as it won’t work that way.
3. Set Up the Style Sheet
The child theme also needs a style sheet. This one will work almost the same as the style sheet created above. However, it has a slightly different header and will contain less code.
We will get to the second part later. For now, create the usual style.css and place it in the theme folder. Then, add the following:
/* Theme Name: Twenty Twenty-Five Child Theme URI: https://example.com/twentytwentyfour-child/ Description: Twenty Twenty-Five Child Theme Author: Your Name Author URI: https://example.com Template: twentytwentyfour Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyfour-child */
As you can see, it’s very similar to the style sheet header you used before with one exception: it contains the Template tag.
In that section, you should put the name of the theme that will function as the parent. Without it, the child theme won’t work. To avoid this, input the folder name of the parent. So, for Twenty Twenty-Five, that would be Template: twentytwentyfour.
4. Create Functions.php and Inherit Parent Styles
With just the style sheet and the folder, it’s already possible to activate the child theme. However, that wouldn’t do much good since right now your site would look like an HTML page without any styling.
To change that, you first need to inherit the parent’s styles and for that, you need functions.php. This file is an important part of any WordPress installation and allows you to make sweeping changes to your website.
However, in this case, you will only use it to call the parent’s styling. For that, create a new file and call it functions.php. The first thing you will add at the very beginning is this:
<?php
With an opening PHP tag, the file is theoretically ready but it doesn’t do anything yet. So, additionally, you will have to input this:
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' );
This piece of code tells WordPress to go to the template directory (aka parent theme) and use the styles included there. It also makes it possible to modify the theme via your child theme (more on that later).
5. Activate the Child Theme
At this point, the child theme is ready to be activated.
You can add a screenshot to it as in the instructions above if you want. Aside from that, you can either zip it up and add it to WordPress via Appearance > Themes > Add New Theme > Upload Theme or by simply adding the folder as is to wp-content/themes.
In both cases, when you activate the theme, your site should now look exactly like its parent.
6. Adjust the Design
Here’s where the aforementioned detective work begins. It’s now time to change the design of the existing theme so that it resembles your original HTML site.
For example, one of the first things that might stand out is spacing differences between your HTML site and the WordPress theme – extra padding above the header or below the footer that your original design doesn’t have.
To remedy this, you can look at the HTML site with your browser developer tools to find the markup responsible. When you do so, you might encounter something like:
body {
margin: 0;
}
Then, you do the same with your new WordPress theme where you might find different margin or padding values. Your objective is to apply the styling from the HTML site to the WordPress theme. You can achieve this by adding the appropriate overrides to your child theme’s style.css:
body .site {
margin: 0 auto;
}
After saving, the WordPress theme has the new styles applied to it:
That’s because anything you add to the child theme’s style sheet overrides the styles in its parent. However, the rest of the markup stays intact, so you are only able to change the things that are relevant.
Plus, if you are using an HTML5 template as a starter and a modern WordPress theme as your parent, a lot of the basic markup will correspond, making your life much easier.
Once you are done adjusting the design, it’s time to import your content. Let’s get to that now.
C) Import Content from HTML to WordPress Using a Plugin
Next on the list of moving from HTML to WordPress is using an existing theme as is and simply migrating your content from your HTML site into it. This is the simplest option when you don’t need to keep your old design – all you need to do is install and activate the theme of your choice and then follow the steps below.
**Important:** Be aware that content import plugins don’t convert your design. They copy text and images from your HTML files and save them as WordPress posts or pages. Your site will look like whatever WordPress theme you have active, not like your old HTML site. If you need to keep your design, use Method A, B, or D instead.
By the way, though this process isn’t super hard, there are things that can go wrong. For that reason, make sure you back up your WordPress site before going through with it.
1. Install the Import Plugin
The plugin HTML Import 2 has been a common choice for this task. The easiest way to find it is to go to Plugins > Add New and search for it by name. When you find it on the list, click on Install Now. Activate it when it’s done.
Please note: HTML Import 2 was last tested with WordPress 5.3 and is no longer compatible with newer versions. If you are running the latest version of WordPress, attempting to use this plugin is likely to produce a fatal error.
2. Prepare the Import
To import several pages at once, you need to upload them to the same server as your WordPress installation. The plugin will propose something like html-files-to-import as the folder name but you can choose whatever you want. Just make sure to remember the pathname.
As you will see in the following, you can also import single pages one by one. For either method, go to WordPress and Settings > HTML Import. We will go over the most basic settings now. If you need additional information or if anything is unclear, refer to the official user guide.
Files
Configure this screen as follows:
- Directory to Import – Enter the path that you just copied your existing files to.
- Old site URL – Used for redirects. Enter your old URL. We will deal with this again later in this article.
- Default file – The default file for directories on the old site, usually
index.html. - File extensions to include – The extensions of files you want to import.
- Directories to exclude – If you have any directories in the old site that you don’t want to import, enter them here.
- Preserve file names – To have the plugin automatically using your file names as the new URL, check this box. This makes sense if your titles are very long because usually, the importer will use them to create the slug.
Content
Under content, you need to configure the HTML tag that contains your site content.
To do that, choose the option HTML tag at the top. Then configure the tag in the following three fields. For example, if your content is contained in a tag called <div id="main">, the information you input would be div, id and main.
The other settings on this page should be self-explanatory and enable you to import images, documents, update internal links, and more.
Title & Metadata
This part is similar to the content part before. However, it’s dealing with page titles. In the beginning, you need to tell the plugin how titles are marked in your HTML template so it can import them into the right place.
In addition, you are able to filter out redundant things like the site title as that’s often displayed by WordPress themes by default. If your titles reside inside the content, you can also tell the importer to delete them so they are not included twice.
What’s important is that you decide whether to import your old content as posts or pages. The rest is rather self-explanatory and lets you configure WordPress settings for new pages.
Custom Fields
If you have any data that needs importing into custom fields, you can configure this here.
Categories & Tags
Here you can assign categories, tags, and post formats to your imported content. The plugin will show the existing taxonomy on your site to make this step easier.
Tools
This screen lists a number of useful tools for successfully importing from HTML to WordPress.
3. Start Importing
Once you are done, save the settings. This will enable the Import Files button. Click it to get started.
(Note: you can also get here via Tools > Import and then picking Run Importer under the HTML option.)
Next, choose whether to import a directory of files or a single file (you need to browse to it), then hit Submit. The plugin will then go to work.
Once done, you should have all existing content on your WordPress site and formatted by the new theme. Or, if you went one of the other routes, your site should look basically the same as your former HTML website. Nicely done!
D) Rebuild Your Site Visually With a Page Builder
This method has become the most popular path for non-developers. Instead of converting old code line by line, you install a visual page builder plugin on a fresh WordPress site and recreate your design by dragging and dropping elements. The result is a modern, responsive, and easily editable site.
Who Is This For?
Business owners, freelancers, and anyone who values speed and ease of use over pixel-perfect code control. If you can drag and drop, you can do this.
How It Works
- Install WordPress and a lightweight starter theme. Many page builders come with their own starter themes designed to stay out of the way (for example, Elementor has “Hello Elementor,” and Astra works well with most builders).
- Install a page builder plugin. Popular choices include Elementor, Beaver Builder, and Brizy. Most offer a free version that covers basic page building. Premium versions add features like theme-wide header/footer builders and template libraries.
- Set your global styles. Before building any pages, match your old site’s branding. Set your colors, fonts, and default heading styles in the builder’s global settings. This saves time on every page you create afterward.
- Recreate your header and footer. If your builder supports it (most premium versions do), use the theme builder feature to visually create your site-wide header and footer. Drag in your logo, navigation menu, and footer content. This replaces the need to hand-code
header.phpandfooter.php. - Rebuild your pages one by one. Open your old HTML site on one screen and the page builder on the other. Recreate each section by dragging in the appropriate widgets – headings, text blocks, images, buttons, columns. Copy and paste your text content and upload your images to the WordPress Media Library as you go.
- Handle forms. If your old site had a contact form, use the builder’s built-in form widget or a plugin like WPForms or Contact Form 7 to recreate it. No PHP needed.
Pros and Cons
Pros:
- No coding required – entirely visual
- Fast: you can rebuild a five-to-ten-page site in a few hours
- The result is fully responsive and modern out of the box
- Easy for you (or a client) to edit later
Cons:
- Your design depends on the page builder plugin – if you ever deactivate it, you lose your layouts
- Premium builder features (like theme-wide header/footer design) usually require a paid plan
- You are “rebuilding” rather than “converting,” so it is a manual recreation
When to Choose This Method
If your old HTML site is relatively simple (under 20 pages), you want a clean modern codebase, and you don’t want to touch PHP, this is likely your best option. It also combines well with Method C – you can use a content import plugin to pull your text into WordPress, then use the page builder to arrange it visually.
Post-Migration Checklist
No matter which method you chose above, there are several important steps to complete after moving from HTML to WordPress. Skipping these can cost you search engine rankings and frustrate your visitors.
1. Configure Permalinks
Go to Settings > Permalinks in your WordPress dashboard. Change the structure from the default (“Plain”) to “Post name.” This creates clean, SEO-friendly URLs like yoursite.com/about/ instead of yoursite.com/?p=123.
2. Check and Clean Up URLs
Go through your newly imported posts and pages to make sure their URLs are search engine friendly (i.e., include the keywords you want to rank for). In the block editor, you can edit the URL slug in the post settings panel on the right side.
3. Set Up 301 Redirects (Critical for SEO)
Your old site had URLs like yoursite.com/about.html. Your new WordPress site has URLs like yoursite.com/about/. Search engines treat these as completely different pages. If you don’t redirect the old URLs to the new ones, you will lose your existing SEO value.
If you used the HTML Import plugin and filled in the old site address, it will create redirect code for you. You can copy and paste this into the .htaccess file that resides on your server (usually in the root directory). You access it via FTP – you might have to enable seeing hidden files as it isn’t visible by default.
If you need to set custom redirects or didn’t use the import plugin, install the Redirection plugin. It provides a comfortable interface for creating redirect rules and also tracks whenever somebody lands on a non-existent URL on your site so you can fix those too.
4. Set Up Navigation
Go to Appearance > Menus (for classic themes) or Appearance > Editor (for block themes) and create your site’s main navigation menu. Make sure all your important pages are linked and the menu is assigned to the correct theme location.
5. Test Everything
Before considering the migration complete:
- Click every link on your site and fix any that are broken.
- Fill out and submit every form to confirm it works.
- Test your site on mobile, tablet, and desktop.
- Check that images display correctly and are not broken.
6. Install Essential Plugins
Your new WordPress site will benefit from a few key plugins:
- SEO – An SEO plugin (like Yoast SEO or Rank Math) to manage sitemaps, meta descriptions, and on-page optimization.
- Security – A security plugin (like Wordfence or Sucuri) to protect against common threats.
- Backups – A backup plugin (like UpdraftPlus) to schedule automatic backups of your new site.
- Caching – A caching plugin (like WP Super Cache or WP Rocket) to keep your site loading fast.
7. Delete Old HTML Files
Once your WordPress site is fully tested, your redirects are in place, and you are confident everything works, you can remove the old HTML files from your server. If you installed WordPress in a subdirectory, work with your hosting provider to move it to the root directory.
Frequently Asked Questions
Will converting from HTML to WordPress affect my SEO?
It can, both positively and negatively. If you fail to set up 301 redirects from your old URLs to the new ones, you risk losing your search rankings. However, WordPress makes SEO much easier to manage long-term through plugins, blogs, proper meta tags, and sitemaps. Done correctly, the migration should preserve your existing rankings and give you better tools to improve them.
How long does it take to convert an HTML site to WordPress?
It depends on the method and the size of your site:
- Method A (manual theme) – For a five-to-ten-page site, expect 15 to 30 hours of development work.
- Method B (child theme) – Roughly 5 to 15 hours depending on how different your design is from the parent theme.
- Method C (plugin import) – The import itself takes minutes, but cleaning up the content and configuring a theme can take several hours.
- Method D (page builder rebuild) – A five-to-ten-page site can typically be rebuilt in 2 to 6 hours.
Do I need to know PHP to convert HTML to WordPress?
For Methods A and B, yes – at least basic PHP knowledge is needed. For Methods C and D, no coding is required at all.
Can I keep my exact same design after converting?
Yes, but the amount of effort varies. Method A (manual conversion) gives you the closest 1:1 match since you are directly converting your code. Method B (child theme) gets you close with less effort. Method D (page builder) lets you visually recreate your design without code. Method C (plugin import) does not preserve your design at all – only your content.
What happens to my old HTML site after I move to WordPress?
Your old files stay on your server until you delete them. We recommend keeping them as a backup until your new WordPress site is fully tested and all redirects are confirmed working. After that, you can safely remove them.
Did You Successfully Move from HTML to WordPress?
And that’s it. You just learned how to convert a static HTML site to WordPress. As a consequence, you have become part of one of the largest communities on the web and gained access to thousands of resources to make your site even better.
Depending on which solution you picked above, you have already gotten an impression of how WordPress works. From here on, it’s quite easy to branch out and dive deeper into creating websites with the WordPress platform.
