Convert HTML to WordPress: Step-by-Step Guide

Only master programmers could think of creating a website for their business in the past. However, since we are in the software age, creating a website is no longer difficult. There are dozens of tools that can take the bulk of your website off your hands when it comes to design and coding. One of them, of course, is WordPress. WordPress, a name not just recognized by us all but it does have a spectacular brand value in the digital world. It’s majorly known for its user-friendliness and vast features. You can easily Convert HTML to WordPress.

It has become much easier to develop website templates, software apps, and automated content management systems.  Web design has evolved from a text-only experience to a highly interactive website.

Static HTML sites still exist, and they can still be found on the modern web. However, switching from static HTML to WordPress may be a good idea if you are not a coding expert and want to manage your site yourself.

HTML5, the latest iteration of the markup language, is very powerful and allows you to create high-quality websites without a CMS. The growing market share of WordPress shows that more and more people are switching to this platform. It’s all about making the switch from HTML to WordPress.

You will need developers to make changes to your website if you are not well versed in website programming. Also, there can be a need to constantly update your website if you want to be at the top of the popular search engines for search engine optimization. This is where WordPress comes into play.

WordPress was designed so that anyone can use it regardless of their skill level. The CMS is a content management system. You do not have to hire a developer to develop WordPress, and switching is super easy. You can often make changes with just a few clicks (even via mobile).

Before you Convert HTML to WordPress –

We have discussed how useful a static HTML site can be for WordPress. However, before converting to WordPress, you will need the following:

• Provider of web hosting

Your new WordPress website will need a hosting service. Please note that the stability, speed, and security of your website depend to a large extent on your host. Therefore, make sure you choose the best one. To help you make the most informed decision, we have listed the best WordPress hosting providers. However, you can also install WordPress on localhost and go live later.

• Installing WordPress

If you have not installed WordPress yet, you should do so. Read our WordPress resource on three easy steps to creating a WP website.

• Code editor

This helps manage your HTML code. Excellent examples are Notepad++, Sublime, and Aptana Studio.

We have discussed converting HTML to WordPress using 3 methods such as manual, Child Theme, and WordPress plugins. The child theme method is easier to follow for many users. However, if you have WP experience, you may prefer the manual method.

3 Ways to Convert HTML to WordPress –

To Convert HTML to WordPress, you need to convert your HTML design into a WordPress theme. A theme controls the look and feels of a WordPress site, while the CMS itself and additional plugins provide functionality.

There are several options for the conversion. The one which is right for you depends on the time and money, your coding skills, and your personal preferences that you are able and willing to invest. The main options are:

1. Manually Convert HTML to WordPress –

The most technical option. If you choose this route, you take your existing code to make the WordPress theme files a starting point. If you have experience in coding, it will not be complicated. With some HTML, CSS, and PHP knowledge, you can do it. Many copy and paste.

The downside: while you can get done with a WordPress theme, you will not have all the WordPress features.

You can not do this completely through WordPress while your website is doing its job. So for us, we prefer the next option.

Step 1: New folder for the theme

The first thing you need to do is create a new theme folder on your desktop. Think of it as your computer’s directory folder. It has the same destination.

Now go and create text files in the code editor. You will want to create five different files:

Style.css \sIndex.php

Header.php

Sidebar.php

Footer.php

Step 2: Copy existing CSS into the WordPress Style Sheet

To copy the CSS from your old website into the WordPress stylesheet (the filestyle.css you just created), you need to open the file and paste it:

This is the header for the so-called stylesheet (important: do not leave out the /*…* tags). Fill in each part as follows:

• Theme name – This is where the name of your theme goes. You can choose it freely, but usually, it is the same as the name of your theme folder.
• Theme URI – Usually, but use your website address, you would post the theme home page here.
• Author – You can put your name or another name here.
• Author URI – A link to your website. This can be one of the links you created or something useful.
• Description – Your theme can optionally be described, which will appear in the backend of WordPress.
• Version – The version of your theme. It does not matter since you do not publish it. We usually enter 1.0 here.
• License, URI, Tags – This is only important if you plan to submit a theme to the WordPress theme directory. In that case, you can leave them out, we are just adding them together to make it complete.

Copy the existing CSS from your static HTML website and paste it after the header. Save the file and close it in your new theme folder. (Know about Convert HTML to WordPress)

Step 3: Existing HTML Separated

To access the database information, WordPress uses PHP. To properly link them together, your existing HTML code needs to be broken up into separate pieces.

To do this, you’ll need to copy the original HTML document into several different PHP files.

First, open the index of your .html file.

Go through the WordPress files you created and copy the code into the sections below:

• Header.php – Header.php This covers everything from the beginning to the main content area of your HTML code. You will need to copy and paste ?php wp head();? just before the highlighted section. 
• Sidebar.php – This is where you paste all the code that is highlighted in the section.
• Footer.php – This section starts at the end of the sidebar and extends to the end of the file. Before that,  add a call that closes the parenthesis.

Save the index.html file and then save your other information in the theme folder. Close all files except header.php and index.php.

Step 4: Paste a theme screenshot along with your style header 

Style header information will serve as a preview of your WordPress website. Open your existing website in a browser and then take a screenshot using your preferred method. Open the image editor of your choice and paste it to 880 pixels. Then save it to your theme folder and add it to it. 

Your theme is now ready to be uploaded. You have several options for placing the new theme on your WordPress site. The requirement is that your theme folder contains all the files.

The first option is to create a zip file. Go to your WordPress site and then to Appearance Themes. Here you can upload the theme by clicking Add New.

Use the button to navigate to the location of your zip file in the next menu. Click Open, highlight the theme and click Install Now. Activate the theme when it is ready.

You can also connect to your server via FTP (or just go to the local directory on your hard drive) and browse wp-content/themes. Then upload (unzip) a theme folder. Turn on the theme from the same place as before.

The front end of your new website should now look like the old one. All you need to do is import your existing content from HTML and Convert HTML to WordPress.

Since the basic theme is working, you can do more to better integrate your HTML into WordPress. This includes editing and adding widget areas, comments, and much more for your blog title and description. You may need to add some CSS markup since the content does not belong to your original design as images do.

However, this is a lot of work, we want to use a solution that has everything and only requires a change in the design.

2. Convert HTML to WordPress Child Theme –

The next method might be more controllable if the one above seems too intense. It allows you to use thousands of WordPress themes while keeping the original design.

This is done by using a well-known child theme. The themes are based on another theme (the parent theme) that is not independent but just modifies the parent theme to your liking. Simple enough, although some detective work is required.

Step 1: Choose a theme

Before you can get started, you need to choose a theme. Try to find one that is similar to your existing theme, but also looks similar. Install the theme as you would any other theme on your WordPress website. Just do not turn it on yet.

Step 2: Create a new folder for the theme.

Just like the previous method, create a new folder on your desktop. Give the parent folder the same name and add “-child” to the end. Remember, there should be no spaces in the name.

Step 3: Create a style sheet

This step is the same as creating the style sheet the previous way. However, this time, add a tag with the title “template”. Make sure to include the name of your parent. This is necessary to edit the child’s theme.

Step 4: Create a.php feature

Now, you are going to create a functions.php and inherit child theme parent styles. Creates and calls functions.php to create a new file. Make sure that <?php starts it.

Now, enter the code 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 allows WordPress to access the parent’s theme and use the styles for the child’s theme.

Step 5: Activate the child theme

The child theme can now be activated. Before doing so, however, take a screenshot of the WordPress backend.

Create a zip file and paste the whole thing into WordPress, as in the previous procedure.

You can change the theme to match your original HTML.

Anything you add in the child stylesheet overrides the parent’s styles. However, the rest of the markup remains intact, so you can only change the relevant things.

Once you’ve made the design adjustments, you can import your content.

If you use HTML5 as your starting point and a modern WordPress theme as your parent, many of the basic features will match, making your life much easier. (Convert HTML to WordPress)

3. Import HTML content into WordPress with the plugin –

If you turn to another option to Convert HTML to WordPress, you can easily move your content from your HTML website to an existing theme. This is the easiest way – all you need to do is install and activate the theme of your choice (we will assume you know how to do that).

Although this is not very difficult, some things can go wrong. So make sure you back up your WordPress site before you start using it.

Step 1: Install the import plugin.

First, you need to install the HTML Import 2 plugin. The easiest way to do this is to go to Add Plugins New and look for the name. That’s the most important thing. Click Install Now to find it in the list (maybe even further down). When it’s ready, turn it on.

Step 2: Prepare the import

To import multiple pages at once, you need to upload them to the same server as your WordPress installation. The plugin suggests a folder name like HTML files, but you can choose whatever you want. Just keep the pathname in mind.

You can also import individual pages at a time. Go to Settings HTML Import for WordPress. The basic settings will now be checked. Check the official manual if you need additional information or if something is unclear.

• Files

Set up the following screen:

Import Directory-Enter the path where your existing files were just copied to.

Old Website URL – Redirects Used. Enter the old URL. Enter. Later in this article, we will discuss this again.

Default – The default directory file of the old site, usually index.html.

Include file extensions – File extensions you want to import.

Exclude directories – If you have directories on the old site that you do not want to import, enter them here.

Keep file names – Check this box for your file names so the plugin will automatically use them as the new URL. This is useful if your titles are long, as the importer usually uses them to do the trick.

• Content 

The HTML tag that contains the content of your website needs to be configured. Select the HTML option at the top of the screen. Then set the tag to the three fields below. For example, if the tag in your content is called <div id=”main”>, then the input information would be div, id, and main.

The rest of the settings on this page should be self-explanatory and will allow you to import images and documents, update links internally, etc.

• Metadata and title

This section is similar to the previous content section. It includes the titles of the page. You first need to tell the plugin how the titles are tagged in your HTML template so that they can be imported in the right place.

You can also filter out redundant elements like website titles, which often appear by default in WordPress themes. You can also tell the importer to delete titles that are within the content and not duplicated.

The important thing is to decide if you want your old content like posts or pages to be imported. The rest is pretty self-explanatory and allows you to set up new pages for WordPress.

• Custom Fields

You can configure this here if you have data that needs to be imported into custom fields.

• Categories and tags 

You can assign categories, tags, and post formats to your imported content. To make this step easier, the plugin shows the taxonomy on your website.

• Tools

Many useful tools for successfully importing HTML to WordPress are listed.

Step 3: Start the import

Save the settings when you are done. The Import Files button can be enabled. Click on it to start it. Select a file directory or file to import, and click Submit. Then the plugin gets to work.

Now all the content on your WordPress site should be available and formatted with the new theme. If you chose one of the other ways, your website should look essentially the same as your previous HTML website.

CONCLUSION

It’s good to move on from a static HTML site to a more efficient content management system with proven functionality like the WordPress platform. By doing so, you’ll be part of one of the largest web communities and have access to thousands of resources to improve your site.

Thanks to the user-friendly WordPress dashboard, your website will be easier to manage and much cheaper to maintain thanks to WordPress templates and HTML conversion in WordPress. You have already gotten a feel for how WordPress works. From now on, it’s easy to dive deeper into website creation with WordPress.