This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Cloudways Copilot is here. Get Access to your Intelligent Hosting Assistant Today! Learn More

How to Convert HTML to WordPress (All Methods Covered)

Updated on December 8, 2024

12 Min Read

Imagine you’ve spent countless hours making the perfect design for your website. The colors, fonts, and layout are just right. But then you realize: it’s static. Every change, no matter how small, requires diving back into the code.

Wouldn’t it be great if your website could be as dynamic as your business?

That’s where WordPress comes in. By converting your HTML design into a WordPress theme, you can enjoy the flexibility, customization, and ease of use that WordPress offers.

In this tutorial, we’ll guide you through the process step-by-step, ensuring your website not only looks great but also functions seamlessly. If you are a newbie, try doing this with a dummy website on your localhost, like XAMPP.

Preparing HTML Design for Conversion

Before diving into the conversion process, preparing your HTML design is essential. Here are some key steps to ensure a smooth transition:

1. Optimize Your HTML Code

Ensure your HTML code is clean, well-structured, and adheres to HTML standards. Use a validator to check for errors and remove unnecessary elements. Compress images to improve loading times.

2. Structure Your Content

Organize your content using appropriate HTML elements like <header>, <nav>, <main>, and <footer>. Divide your content into clear sections with headings to improve readability and SEO.

3. Consider Responsive Design

If your HTML design isn’t already responsive, make the necessary adjustments to ensure it looks and functions well on different devices. Consider using a responsive framework, like Bootstrap, to streamline the process.

4. Backup Your Design

Always create a backup of your original HTML files before making any changes to have a safety net in case something goes wrong.

Managed WordPress Hosting Starting From $11/Month

Pay just for the resources you use with the pay-as-you-go plans, and get outstanding cloud hosting services with added benefits. No hidden charges.

Methods for Converting HTML to WordPress

There are multiple ways to convert your HTML website to WordPress. The right choice for you will depend on factors such as your available time, budget, coding skills, and personal preferences.

Method 1: Using a WordPress Theme Framework

The first option is the most technical. It involves using your existing code as a foundation to create the WordPress theme files from scratch.

1. Creating a Theme Folder and Basic Files

To create your theme, first make a new folder and name whatever you want for your theme’s name. Then, inside this folder, create five files: style.css, index.php, header.php, sidebar.php, and footer.php.

Keep these files open in your code editor because you’ll be editing them soon. If you’re more comfortable, you can start by creating these files as .txt files and then change their extensions to .php or .css. This will automatically convert them to the correct file types.

2. Copy Existing CSS to the WordPress Style Sheet

Focus on the CSS file to start designing your theme. If you’re moving from another website to WordPress, copy the CSS code from your old site and paste it into the style.css file you created. CSS is crucial for how your site looks.

Add the CSS code to the style.css file to apply your design. This will make your WordPress site appear exactly how you want it.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

To complete your theme, add the necessary information about the theme you’re using and include any remaining CSS lines. Then, save and close the file.

3. Separate Your Existing HTML

Now, you need to divide your HTML document into different sections, turning each of those parts into PHP files.

Although this may seem complex, it just involves copying sections of your HTML document and pasting them into different PHP files.

<!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="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">© 2024 My Test Site</p>
</footer>
</div>
</body>
</html>

As you can see, it is a standard HTML template that includes a header, a sidebar, and a footer. The accompanying code is this:

If your design is different, you might need to tweak the steps. However, the core process will remain the same.

To continue working on your theme, open the index.html file, which is the main file of your HTML website. Then, look at the WordPress files you just created and copy the following code into them.

3.1. Header.php

Everything within your HTML file from the main content area <main> or <div class=”main”> goes into this file.

End the code by closing </head> copy and paste <?php wp_head();?>. This is important 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">
3.2. Sidebar.php

All content within the <aside> section should be placed in 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>
3.3. Footer.php

The final step is to add the footer information from the sidebar’s end to the file’s end. After that, insert <?php wp_footer();?> just before the </body> tag, similar to how wp_head was added in the header.

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

4. Link Your header.php and index.php Files

You’ve already added the header.php file, but still need to do a few more things. Basically, you need to modify the call in the stylesheet from the HTML to match the WordPress PHP standard format.

In the header.php file, find the <head> section and call the stylesheet. It looks something like this:

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

Open the newly created index.php file, and you’ll find it empty. Now, copy and paste the following code into this index.php file:

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

Once you’ve completed these steps, you’ll have a WordPress theme based on your original HTML website that is ready to be uploaded to your WordPress site.

5. Create a Screenshot and Upload Theme

Create a screenshot that represents your theme’s appearance. This, along with the information in your stylesheet header, will give a preview of your website in the WordPress dashboard.

To create a screenshot for your theme, open your website in a browser and take a screenshot. Crop the image to 880×660 pixels and save it as screenshot.png. Then, place this screenshot in your theme folder. You can now upload your new WordPress theme in two ways.

The first method is by using FTP to drag the theme files directly into the wp-content/themes directory. There’s no need to compress the files into a zip format for this. Simply use an FTP client like FileZilla to move the folder into the wp-content/themes directory.

To upload your theme, first compress the entire theme folder into a .zip file. Then, go to Appearance → Themes in your WordPress dashboard.

Click on the Add New button.

Click on the Upload Theme button.

Click on Choose File and find the .zip file you created. Select the file so it appears on your WordPress dashboard.

Choose the theme file and click Install Now. This will install the theme into your WordPress website.

Click Install Now after the theme is uploaded. WordPress will confirm the installation and show a success message. Then, click the Activate button to make your new theme active on your website.

Click the Activate button after installation. Your new theme will now be listed as the Active theme in the Themes list.

Method 2: Manual Conversion via Child Theme

As done previously, Instead of starting with your existing site, you can use a pre-designed WordPress theme as the foundation. Here is how:

1. Pick a Suitable Theme

Choose a theme that matches your HTML design. Look for a child theme with a layout and structure similar to your current website.

2. Create a New Folder

You’ll need to create a new theme folder. This time, name the folder after the parent theme your child theme is based on, adding -child as a suffix.

For example, if your theme is named inshal-wordpress-theme, the folder should be named inshal-wordpress-theme-child. Ensure there are no spaces in the folder name.

3. Create the Style Sheet

Next, create the style.css file inside the folder and add these lines of code:

/*
Theme Name: inshal-wordpress-theme-child
Theme URI: http://example.com/inshal-wordpress-theme-child/
Description: inshal-wordpress-theme Child Theme
Author: WPZOOM
Author URI: http://example.com
Template: inshal-wordpress-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, 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
*/

4. Create Functions.php and Inherit Parent Styles

To use a child theme with the stylesheet and avoid an unstyled HTML page, you’ll need to create a functions.php file to inherit the styles from the parent theme.

Create a new file named functions.php in your child theme folder.

/*
Theme Name: inshal-wordpress-theme-child
Theme URI: http://example.com/inshal-wordpress-theme-child/
Description: inshal-wordpress-theme Child Theme
Author: WPZOOM
Author URI: http://example.com
Template: inshal-wordpress-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, 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
*/

5. Activate the Child Theme

To activate your child theme, first compress the theme folder into a .zip file. Then, go to the WordPress dashboard, navigate to Appearance → Themes, and click Add New.

Click on the Choose File button and upload the .zip file.

After uploading the .zip file, click on the Activate button.

💡 Note: You can manually drag the folder into the wp-content/themes directory.

6. Adjust the Design

To create a WordPress site that looks like your original HTML website, the final step is to manually transfer your HTML content to WordPress. While there are plugins that can automate this, they might not work with the latest WordPress versions. So, it’s safer to do it manually.

Method 3: Using a Plugin for Theme Conversion

To import your HTML website into WordPress, here’s the easiest method:

1. Install the Import Plugin

  • The first step is to install the HTML Import 2 By Stephanie Leary.
  • The simplest way to do this is by navigating to Plugins → Add New in your WordPress dashboard and searching for the plugin by name.
  • Click Install Now.
  • After the installation is complete, activate the plugin.

💡 Disclaimer: The plugin may not be compatible with the latest versions of WordPress. It hasn’t been updated in a while. I tested it with WordPress 6.x, and it worked fine.

Files
  • Enter the path where you copied your existing files.
  • For redirects, input your old URL.
  • Specify the default file for directories on the old site, typically index.html.
  • Enter the file extensions of the content you want to import.
  • If there are any directories from the old site that you don’t wish to import, list them here.
  • To have the plugin automatically use your file names as the new URLs, check the appropriate box.
  • This is useful if your titles are long, as the importer usually uses them to create the slug.

Content
  • To set this up, select the HTML tag option at the top. Then, configure the tag in the following three fields:
  • If your content is within a tag like <div id=”main”>, enter div in the first field, id in the second field, and main in the third field.

Title & Metadata

This part is similar to the content part before. However, it’s dealing with page titles.

  • Start off by specifying how titles are marked in your HTML template so the plugin can import them correctly.
  • You can also filter out unnecessary elements, such as the site title, which is often included by default in WordPress themes.
  • In case titles are within the content, you can instruct the importer to remove them to avoid duplication.
  • The remaining settings allow you to configure WordPress options for the new pages.

Custom Fields

If you have any data to add to custom fields, you can set it up here.

Categories & Tags

Here, you can choose categories, tags, and types for the content you imported. The plugin will display the existing taxonomies on your site to simplify this process.

Tools

This screen lists a number of useful tools for successfully importing from HTML to WordPress.

3. Start Importing

  • After you’re done with the configuration, save the settings.
  • Click on “Import Files” button.
  • Next, choose whether to import a directory of files or a single file you need to browse to it,
  • Then hit Submit.

And You’re all done!

Once everything is set up, your WordPress site should display all the existing content formatted by the new theme.

Troubleshooting Common Issues

During the HTML to WordPress conversion process, you may encounter some common issues. Here are some potential problems and solutions:

1. Image Path Issues

If your images are not displaying correctly, double-check the image paths in your WordPress theme files. Ensure they are relative to the theme’s directory.

2. CSS Styling Problems

If your CSS styles are not applied correctly, inspect the theme’s CSS files to identify any conflicts or errors. You may need to modify or override existing styles.

3. Plugin Conflicts

Some plugins may interfere with your theme’s functionality. Try disabling plugins one by one to identify the culprit and resolve the conflict.

4. Template Hierarchy Issues

If your theme’s template hierarchy is not working as expected, review the WordPress template hierarchy documentation and ensure your template files are named and placed correctly.

Summary

Converting your HTML website to a WordPress theme offers many advantages. You can customize it easily and manage it more efficiently.

Follow the steps in this tutorial to change your static HTML design into a dynamic WordPress website. Before starting, optimize your HTML code, structure your content well, design it for different screen sizes, and back up your design.

If you have problems, refer to our troubleshooting section. With a little work, you can create a beautiful and functional WordPress website that showcases your business.

Q. Conversion of HTML to WordPress?

The process of converting HTML to WordPress involves the following steps:

1) Step 1: Create a new folder for the theme
2) Step 2: Copy the CSS code in the styles.css file
3) Step 3: Separate the HTML code into header.php, sidebar.php, and footer.php files
4) Step 4: Convert the header.php and footer.php files into the required WordPress format
5) Step 5: Generate a screenshot (this will be used as a theme preview)
6) Step 6: Zip the folder and upload it to the WordPress website

Q. How do you add HTML to WordPress?

A) To add HTML to a WordPress page or post, go to the page/post and add the HTML code to the text tab.

Q. How do I open an HTML file in WordPress?

A) To open and use an HTML file in WordPress, follow these steps:

  • In your WordPress dashboard, go to Media > Add New.
  • Upload the HTML file like any other media file.
  • Once uploaded, click on the file in the Media Library to get its URL.
  • You can link to the HTML file from any post, page, or menu by inserting the URL.
  • You can also open and view HTML content by directly embedding it into a post or page.
  • In the post or page editor, switch to the Text (HTML) view and paste your HTML code.

Q. Does WordPress use HTML?

A) Yes, WordPress uses HTML to structure content on web pages. While WordPress generates HTML dynamically from the content you create in posts and pages, it also allows you to directly edit or add custom HTML through the block editor, theme files, or custom HTML widgets.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Owais Khan

Owais works as a Marketing Manager at Cloudways (managed hosting platform) where he focuses on growth, demand generation, and strategic partnerships. With more than a decade of experience in digital marketing and B2B, Owais prefers to build systems that help teams achieve their full potential.

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour