html template to wordpress

Hello and welcome to the next lesson of WordPress Development.  In this lesson, you will learn how to convert HTML template to WordPress.

 

What Should You Know Already

To learn WordPress theme development, you must have knowledge of HTML, CSS, JavaScript, and basics of PHP.

 

Requirements

To convert HTML to WordPress,  you need an HTML design ready. You can create a new HTML template by yourself, or you may download WebToBlog template developed by Vibhu Kumar for free to give a quick start. We will be using this template in upcoming lessons too. So, I recommend you to download this template so that you can use this template in this lesson as well as in upcoming lessons.

 

I assume that you have downloaded the template or developed your own.

 

Let’s get started…

 

How to Convert HTML Template to WordPress

Before going ahead, you should know why we need to convert HTML template to WordPress?

 

We design a web page and open it by clicking on file to see how it looks like into the browser. But in WordPress, we follow a different process. In this post, we will talk about that process.

 

First of all, we download and do WordPress environment setup on localhost. If you do not know how to install WordPress locally, I recommend you to read this article before going ahead.

 

How to Install WordPress Locally on MacBook Using MAMP

 

After installing WordPress on your computer, you are all set to convert HTML template to WordPress.

 

Let’s start!

 

After WordPress installation, go to the project folder navigate the wp-content -> themes and put your HTML project folder inside the theme folder. Remember, HTML template must be in the parent directory. It means when you navigate, it should be like wp-content -> themes -> your_theme _folder_name -> index.html .

 

After that, rename index.html to index.php and create a CSS file named style.css inside root folder and write your theme description. You can prefer below example. Remember it should be commented.

 

/*

Theme Name:

Theme URI:

Author:

Author URI:

Description:

Version:

License:

License URI:

Tags:

Text Domain:

*/

 

You can fill above details whatever you want.

 

If style.css already exists in the parent directory you need to just replace the above description at the beginning within style .css.

 

Note: index.php and style.css are mandatory.

 

You can also add screenshot.png into root directory to visualize the WordPress theme before activation (it’s optional).

 

When it comes to converting HTML template to WordPress, you must have basic knowledge of php. Here, we will add PHP code to load CSS, JS, and Images.

 

Add below PHP code before all images, CSS and JS path.


<?php echo get_template_directory_uri(); ?>

 

If you are using WebToBlog template then all CSS file path will be like below.


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

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

 

And images file path within body will be like below


<img src="<?php echo get_template_directory_uri(); ?>/images/1.jpg">

 

JS file path will be like below.


<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
 
<script src="<?php echo get_template_directory_uri(); ?>/js/page.js"></script>

 

Make separate file for header and footer section and save it with .php extension.

 

Now will add snippets first is<?php header();> just before the closing head tag and <?php wp_footer();> just closing before the body tag and save the file.

 

Now go to WordPress Dashboard -> Appearance -> Themes . You will see the template that you have put into wp-content -> themes. You will see an option to activate your theme just click on that.

 

Now your HTML template is completely converted into WordPress. To see this HTML template into WordPress, start your local server MAMP/WAMP/XAMPP and write localhost path in the browser. Remember this is still static template. We have converted it into WordPress only. We will be learning how to make every section dynamic in the upcoming lessons.

 

Final Words:

After reading this article, I hope you will be able to convert HTML template to WordPress. If you face any issue while working on this lesson, write a comment. I would love to answer you. You can us join us on Facebook and Twitter.

 

Recommended: how to create WordPress custom menu using Bootstrap navigation bar.