Skip to main content
WordPress Development

How to convert HTML website to WordPress seamlessly?

By February 23, 2022April 11th, 2022No Comments
How to Convert HTML to WordPress

Do you want to convert your HTML website to a WordPress website?  This blog will tell you three simple ways to convert your HTML website to a WordPress theme.

Introduction

Twenty years ago, developers made all websites with nothing but text and static HTML. Though websites are much more complex, this is largely due to open-source platforms like WordPress.

WordPress allows people to create websites with no coding experience. Most people who still use HTML websites don’t know- how to convert them into a WordPress site, especially without losing content or needing to do excessive formatting on a page-by-page basis.

Thankfully there are many ways to move from Static HTML to WordPress. This blog will see three different options to convert HTML to WordPress.

Option 1 Manually Convert HTML to WordPress

Create a WordPress theme based on your current static HTML site. It will require you to get into your code. You’ll have to access your current site directory via FTP and use your existing code as a starting point. Then, you’ll need to create the necessary files for a WordPress theme and copy bits of code from the WordPress codex.

It is simple if you have some experience with HTML, CSS, and a bit of PHP. Below are the steps to manually convert an HTML website to a WordPress theme.

Step 1: Create a New Folder for Theme

First, create a new folder for the theme on your desktop, just like your directory folder on your PC or laptop. Second, go to the code editor and create text files; you will need five different files:

  1. css
  2. php
  3. php
  4. php
  5. php

Step 2: Copy CSS Code

Prepare the WordPress style sheet- style.css file you created in the last step. Now, copy the entire CSS coding from the website you want to convert onto a WordPress Style Sheet.

Next, fill in different parts of the style sheet header for your new WordPress theme.

They are:

  • Theme Name – the name of your new website
  • Theme URL – The website address
  • Author – Your name
  • Author URL – Link to the homepage of the website
  • Description – A brief description of the theme (optional)
  • Version – Start with 1.0.

It will look something like this:

Once you fill in the header details, please copy and paste the existing CSS from your static HTML website to your new theme folder and close it.

 Step 3: Separate your Existing HTML Website

WordPress usually uses PHP to get the information from the database. As a result, you need to break your HTML into multiple pieces so that CMS can bind them together properly. You can do it by copying different parts of the original HTML document into several PHP files.

Next, open your index.html file.

Copy the code from your newly created WordPress files and paste it into the following areas listed below:

  1. Header.php – From the beginning of your HTML code up to the main content area will come under this category. Copy and paste <?php wp_head();?> right before this designated section </head>
  2. Sidebar.php – Paste all the code from the portion marked as <aside> here.
  3. Footer.php – This section starts from the bottom of the sidebar and covers up to the end of the file. You have to add this <?php wp_footer();?> before using </body> to close the bracket.

After finishing, close the “index.html” file and save data to the theme folder. Close all the files and keep header.php and index.php open.

 Step 4: Convert the Header.php and Index.php Files for WordPress

Convert header.php and index.php files to make them compatible with the format of WordPress.

 For this, search for the link in the <head> section similar to this:

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

Replace that link with this link:

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

The next step is to save and close the header.php file.

Open your index.php file. Currently, it does not contain anything.

 Enter the following in this manner:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Put space between the first and second lines of code to paste your Loop code in that space. WordPress uses this PHP form to display posts:

Next, save and close the file, and the basic theme is ready. Add it to your WordPress site.

 Step 5: Screenshot and Upload

Take a screenshot of your theme of about 880×660 pixels and upload it for the WordPress backend to recognize your site. The screenshot will act as a preview of your site.

Save the file as a screenshot.png and add it to your theme folder.

Now time to upload the theme to WordPress through the following steps:

  1. Create a zip file of the theme.
  2. Go to WordPress, select appearance themes, and click add new at the top.
  3. Select upload theme here. You can add the zip file.
  4. Click Install Now and activate.

Option 2: Converting HTML through a premade WordPress theme

You can install a premade theme and migrate your content in this method. It’s probably the simplest option because you can use one of the thousands of current WordPress themes while preserving your original design..

Below are the steps to convert HTML to WordPress using a child theme.

 Step 1: Pick a Theme

Choose a theme from the WordPress theme directory that you think resembles your existing design. You can choose from hundreds of themes available.

Next, install the theme on your WordPress site but don’t activate it.

 Step 2: Create a New Folder for Theme

You created a new folder on your PC in the previous method. You have to do the same in this method too.

Use the same name of the folder as that of the parent theme and add “-child” at the end.

 Step 3: Create a Style Sheet

This step will create style sheets the same way we did in the previous method.

Now, you have to add a tag called “template.” Make sure that you include the name of your parent theme. Only then the child theme will function.

 Step 4: Create a Functions file

We can activate the child theme with just the style sheet and the folder, but the site would look like an HTML page without any styling.

To add the styles, you will have to inherit the parent’s styles, and for that, you need functions.php for the child theme. Please create a new file and name it as functions.php.

Start the file with <?PHP. Now, add this code written below:

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 code will inform WordPress to go to the parent theme and use the styles listed there for the child theme.

 Step 5: Activate the Child Theme

Now you can activate the child theme. First, take a screenshot to add to the WordPress backend. Second, as we did in the last method, create a zip file containing all the necessary items and upload it to WordPress.

Once the theme is active, you’ll be able to adjust the design to make it resemble your original HTML.

Option 3: Import your content from HTML into WordPress using a plugin 

You can seamlessly convert HTML websites to WordPress using WordPress plugins if you want a completely new design.

You can move from HTML to WordPress using an existing theme by migrating your content from your HTML site into it. 

Install and activate the theme of your choice. Choose a theme that you can easily edit and change to match your branding.

Below are the steps to import your content from HTML into WordPress with the help of plugins.

 Step 1: Install the Plugin

First, install the plugin HTML Import 2. For this, go to Plugins > Add New and search for it by name. Once you find it on the list, click on Install Now. After installation, activate the plugin.

 Step 2: Upload Pages

After installing the plugin, upload the pages of your HTML site to the same server as your WordPress installation.

Enter the following information:

  • Import Directory – It is the location where you copied your existing HTML code.
  • The old site URL – Enter the URL of the old site.
  • Default File – Enter your index.html file
  • File extensions to include – Add extensions of the files to import
  • Directories to exclude – Everything from the old site that you want to exclude
  • Preserve file names – The plugin will use the filenames from the new URL by default.

Next, navigate to the content tab and configure the HTML tag that carries your site’s content.

You’ll need to get used to the following tabs: 

  • Inform the plugin how your titles are on the HTML template.
  • Add the data you want to import into custom fields in the custom fields tab.
  • In the categories and tags tab, assign categories to the imported content.
  • You can learn about some of the built-in tools on the tools screen.

Finally, save your settings, and click on Import Files.

Conclusion

Choose the way that you find easier and suitable for you to convert your HTML website into WordPress. If any of the above methods are not suitable for you, there is one simplest way to migrate from HTML to WordPress.

You can avail professional WordPress migration services for you. It doesn’t require you to do much of anything as the service providers will care for everything.

We are a top WordPress development company and offer end-to-end WordPress services. We offer all types of WordPress migration services including PSD to WordPress, Illustrator to WordPress, Adobe XD to WordPress, and more.

You can rely on our custom WordPress services, from designing and development to migrations and support. It is simple and affordable to hire WordPress developers from us.

Leave a Reply