Essential Steps Require to Convert HTML to WordPress Website

Curious to learn about the new route of the website building everyone else around you is taking? Twenty years ago, all websites were made with text and static HTML. But now, people have a brand new path set for their website journey to start. Well, that is to use the Content Management System (CMS) known as WordPress. 

Back in the day, if you aren’t a coding master, you cannot even begin to think about building a website for your business. But, thankfully! Now we live in an era of evolving technology—moreover, tons of tools are available for you to do the heavy lifting. 

Though with the period, websites are getting more complicated. So, the previously built websites cannot cope with the changes. Therefore, the simple static website is not ready to keep up with all the additional functionalities required for a dynamic website. 

Recommended reading: PSD to WordPress Theme Conversion

When everyone is moving to WordPress, why are you holding back? This article will help you learn about converting a simple website to a WordPress website while keeping your website’s architecture or improving it.

So, without any further delay, let’s ride into it. 

Converting HTML to WordPress website

There are a bunch of ways in which you can convert your simple HTML website into a WordPress website. Hence, these are the steps you need to follow for converting your HTML website into a WordPress website. 

A. Manually Convert HTML into WordPress Theme

Starting with the category, it’s the more technical among the other two as it requires you to step into code. If you take this way, you have to access your current site directory and use it as the starting point for creating WordPress themes. You can pull off this task if you have a little knowledge about PHP, CSS, and HTML. Moving forwards, now you have to create the required files for a WordPress theme and copy some code from the WordPress codex. If you’re worried and looking for someone to take care of all this headache then wp web design services can help you.

B. Convert HTML to WordPress via WordPress Child Theme

Moving on to the next route you can take, it is the one way which got the highest vote among people. It is because of its simplicity and the most straightforward path to take when considering investment and effort. If your site already has a hosting plan, you don’t have to repurchase it. With that, you have to spend only on the WordPress theme, but you get free themes that you can customize to resemble your old site.

Recommended reading: Joomla To WordPress website

C. Import Content from HTML to WordPress via Plugins

If you desire to change your website’s current theme, things get a lot easier for you. Therefore, you have to set up a website, install the theme, and import HTML content in this case. Easy and painless process!

Preparing from HTML to WordPress theme

Regardless of which path you take, it would help if you prepared a few things for the conversion of HTML to a WordPress site. 

Firstly, the hosting plan requires looking through various host providers and hosting plans to select one hosting plan you want for your website.  

Once you have chosen the method you want for your website, you have to install WordPress and login to WP admin.

Therefore, this is who two paths divide.

Manually Converting HTML into WordPress Theme

If you want to build a website from scratch and have WordPress that resembles your previous HTML site, you have to start.

But one thing you have to make sure of is that you should have a little prior knowledge about HTML, CSS, and PHP. 

Recommended reading: 4 Accounting WordPress Plugins

But don’t worry, it might seem like a daunting task, but it isn’t. It just involves a few steps; in most of them, you have to copy and paste; this is all that it takes. 

Step 1: Create a Theme Folder and Necessary Files

The initial thing you ought to accomplish is build a theme folder and name it as you want. Now, go to the editor code and create a few text files. Further, don’t do anything; keep them open and name them as the following:

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

Step 2: Copy Existing Files CSS into New StyleSheets

You will now prepare the New StyleSheets (style.css) by copying the content from previous CSS files. So, for this, the first style you are going to edit is the Style.css file.

To start, add the following code in the above.

/*

Theme Name: Replace with your Theme’s name.

Theme URI: Your Theme’s URI

Description: A brief description of your theme.

Version: 1.0

Author: Your name.

Author URI: Your website address.

License: You need to fill it only if you want to submit your theme to the WordPress theme directory.

License URL: Fill it in case you want your theme to be part of the WordPress directory.

Tag: It will be necessary if you are submitting your theme to the WordPress theme directory.

*/

After copying it and pasting it in the style.css files, paste the existing CSS below and close it.

Recommended reading: Cell Phone Tracker

Step 3: Separate your Current HTML

WordPress uses PHP to retrieve the information from its database. Therefore, you divide HTML files into various chunks so WordPress can put them together.

By dividing HTML into little chunks means we will copy and paste PHP files into various PHP files. 

So, first, open your current website index.html file, go through the file, and copy the following code.

header.php

Firstly, open the HTML file and everything from the start of HTML code goes into this file up to the main content area (signified with <main> or <div class=”main”>). Besides, right before the section says, </head> copy and paste <?php wp_head();?>.

sidebar.php

In this file, everything that belongs to section <aside> will go into it.

footer.php

This section starts from the end of the sidebar and goes up to the end of the file. Now, 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.

Step 4: Finalize Index.php and Header.php for WordPress

So, now you will be changing the header.php and index.php file in the format that suits WordPress. Hence, to do this, look for the link in the <head> section that look like this:

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

Replace it with this line of code:

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

Thus, save the file and close it. 

Now, it’s the turn of the index.php file, and make sure it is empty.

So, copy the given code and paste it into the file.

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

These are the calls for all other files that contain your website. There is a space in the first and second line here is where you will add the loop code.

The loop starts here:

<?php if ( have_posts() ) : while ( have_posts() ) : the_posts(): ?>

And ends here:

<?php endwhile; else : ?>

     <p><?php esc_html_e( ‘Sorry, no posts matched your criteria.’) ; ?></p>

<?php endif; ?>

Hence, now save the file and close it. The theme is ready to be added on the WordPress site. 

Step 5: Create a Screenshot and Update Your Theme

Finally, you have to create a screenshot of your theme and upload it. Moreover, it will serve as the preview for WordPress at the backend. 

Now, take the screenshot and crop it into 880×660 pixels. After that, save the file as screenshot.png and it in the theme folder. 

Recommended reading: Get traffic on your food Blog

Now, you have to upload it on WordPress by following the steps mentioned below:

1. Create a Zip File.
2. Go to WordPress.
3. Select Appearance>Themes and hit Add New at the top.
4. Click Upload Theme.
5. Upload the zip file and install it.

So, when it is completed, activate the theme. 

Convert HTML to WordPress via WordPress Child Theme

If the above method seems to not work for your brain to understand. Don’t worry! Follow the second step. It is manageable, not intense like the first one, as it gives you a lot more freedom, and you don’t have to be tech-savvy to convert HTML to WordPress. 

It allows you to adjust your WordPress theme while retaining your original design. 

Child themes are built on the other theme known as the parent theme and modify the parent theme to satisfy your requirements. 

So, let’s follow the step by step procedure for this method. 

Step 1: Select a Theme

Firstly, you have to pick up the theme and find a theme that resembles your previous theme. Therefore, now install the theme on the WordPress site but don’t activate it.

Step 2: Create a New Theme Folder

You have to create a theme folder on the desktop where all existing files will store in it.

Name the theme folder the same as the parent theme but add “-child” to the end. Besides, remember not to include any space in the name.

Step 3: Create a Style Sheet

The child theme needs a style sheet, and this step is similar to the one we have gone through in the previous method.

However, it is slightly different as it will contain less code and a different header. With that, you will add the tag named “template.” Besides, make sure to add the parent theme name to make it work. 

Step 4: Create Functions.php and Inherit Parent Style

In this step, you have to create a functions.php and inherit the parent style. The stylesheet and folder will be enough to activate the child theme, but it will not be enough as your site will look like an HTML page without styling.

So, create a file with the name functions.php, copy and paste the following code in it. 

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_enqueu_styles’);

The code will let WordPress know to go to the parent theme and use the child theme’s listed styles. 

Step 5: Active the Child Theme

At this step, you can activate the child theme.

To feature on WordPress, you need a screenshot of it. So, for this, create zip and add all of it via Appearance > Themes > Add New > Upload Theme or by simply adding the folder as is to wp-content/themes.

Now, you will be ready to change the design to match it with the original HTML. 

Import Content from HTML to WordPress via Plugins

If you want to have a completely new look for your website, the route will walk through it. It is the most manageable and simple method for converting HTML into WordPress. All you need to do in this step is to install and activate the theme of your choice from the WordPress directory. 

So, here is the step guide you have to follow to accomplish your task. 

Step 1: Import a Plugin

In this step, you will install and activate the plugin known as HTML Import 2. You can search the plugin by going to the WordPress dashboard and selecting the Plugins>Add New and search through the available plugin list.   

Step 2: Upload the Pages

Once your Plugin is up and running, upload the pages to the same server as your WordPress installation. 

Under the Files tab, you will enter the following information. 

Directory to Import: The Path you copied your existing HTML code to. 

Old site URL: It is there for re-direct purpose. Enter the old URL of the site.

Default File: Enter your index.html.

File Extension to Include: Put the extension of the files you want to import.

Directories to Exclude: Exclude directories from the old site that you do not want anymore.

Preserve File names: Plugin will use the file name as a new URL automatically. 

Once you have completed the step, go under the content tab, and configure the HTML tag holding your website content. 

You have to familiarize yourself with some of the tabs. 

• Under the Title and Metadata tab, you’ll let the plugin realize how your titles are set apart in the HTML template.
• The Custom Fields tab is the place where you put information that should be brought into custom fields.
• On the Categories and Tags tab, you’ll dole out classes to your imported content.
• The tools screen allows you to turn out a portion of the inherent tools found in the extension.

Whenever you’ve experienced each tab, save your settings, and select Import Files.

Wrap Up

On the off chance that you have used this post as a guide for moving your site onto WordPress, then you’ve recently gone along with one of the most prominent open-source networks on the planet. Welcome! It’s a pleasant spot where individuals build, play, and make with WordPress and its subjects/modules. 

Therefore, You just figured out how to change over a static HTML site to WordPress. As a result, you have become part of one of the more viable content management systems with demonstrated usefulness, like the WordPress platform.

WordPress templates and the simple to-utilize WordPress Dashboard, HTML to WordPress change will make your site simpler to oversee and a ton less expensive to keep up.