Your technical step-by-step guide for HTML to WordPress Conversion

There is some point in the life when 1 out of every 100 person thinks of having his own website! Most of us are always eager to build networks or to reach audience for your business. A perfectly built website is the only digital solution as it has the potential that no other digital marketing channel has! Moreover, the vast opportunities that a CMS like WordPress gives to its users to customize the website according to the requirements is phenomenal.

WordPress? Haven’t you already heard about this amazing WordPress web development platform?

convert-Html-to-wordpress1

We are sure you must have heard a lot of things about WordPress, that is the reason you are reading this…

The features that WordPress can offer are commendable that is why it is very important to convert HTML to WordPress but some rules are to be followed and international coding standards are to be adhered to. Only then the website developed will be W3C validated as well as up to the mark.

Without any further ado, let’s get started with the pointers:

There are many ways to convert the static HTML website to the dynamic WordPress CMS:

1.Manually code the website.
2.Using WordPress child theme.
3.Hire professional developers.

In this writeup, we are going to discuss the second method mentioned above, ie; converting the HTML website to WordPress.

#1 HTML to WordPress via a customizable WordPress Child Theme

 

What is a child theme?

In WordPress, the theme has 2 parts, one is parent theme and another one is child theme. What it basically does is that it gives a way to modify your website without risking it. It’s on top of a parent theme so it doesn’t have any existence of its own.

Let’s further divide the steps for this:

1. Choose apt WordPress theme:

First of all, the theme of your website should be chosen wisely. Make sure it is not completely the opposite of your old HTML website as it will pose problems for you in the future. So, choose a reasonable similar looking WordPress website. You will need to have this to customize the website by checking on the WordPress theme directory.

While you always have the option to choose from thousands of WordPress themes available on internet, if you are beginner, choose Twenty Twelve. It never fails to impress a beginner. Moreover, we will be moving around this simple theme for this tutorial.

2. New Folder Creation:

A new theme folder is what is needed now. All the files be put here whatever will be related to the child theme. Organisation is the key here.

To make things even more easier during the whole process, you will need this folder. Name it properly so that there is no confusion afterwards.

3. CSS Setup:

There is always a need of a .CSS file because you are going to customize the theme in the child theme just like it is for parent theme. It has less code and has a slight header difference than the above stylesheet folder.

Of course, the things are now simpler, go on with creating the style.css and put it in the theme folder created above. Then, you will have to copy paste the following code into it:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

At this very step, make sure that you include and put up the name of the parent theme. This is crucial as the child theme won’t work if the name is skipped in this step of HTML to WordPress conversion process. This has to be done in the Template tag.

4. Functions.php Creation and Styles:

This is needed to call the styling of the parent theme which is needed once the child theme modification is done. You can now simply activate the theme but what’s the use of the conversion process if the styling isn’t done.

Inherit the parent’s styles and functions.php plays an important role here:

<?php
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’ );

Why we need this code in this WordPress theme customization?

These lines of code call the theme directory and activate the styling in the child theme.

5. Child Theme Activation:

So, your favorite step is here! A zipped folder will be needed to add your own theme to WordPress under Appearance > Themes > Add New > Upload Theme. You can even upload and activate the theme in wp-content in the HTML to WordPress process. This is important so that the theme is activated.

6. Design Adjustment:

It’s vital that the design changes have to be made so that the WordPress theme looks quite similar but better to your old HTML design.

Conclusion:

No doubt, converting HTML to WordPress may seem like an uphill task for some, but it’s worth the efforts at every step of the future of your website. Also, when you choose WordPress, you are relieved of all the stress pertaining to update and maintenance, as well as customization and theme designing. Moreover, there is a huge WordPress community out there to help you with professional conversion process.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s