Wordpress

How Convert HTML template to WordPress Theme

Today we are going to learn how to convert html template as WordPress theme.

First You have to install WordPress on your local server.Then You can download a HTML template that free downloadable.Here is the link of the HTML template that I use in this lesson

( http://download.w3layouts.com/downloads/coffee_house-web.zip)

Ok.....

Now You have the coffee_house-web.zip Zip file.And you can look the HTML template after unzip that.yes that template is develop for a coffee shop.

Structure of the template:

         coffee_house-web

                                       /web

                                                /css

                                                /images

                                                /js

                                                About.html

                                                Blog.html

                                                Contact.html

            Index.html

            Service.html

            Single.html

            w3layouts-License.txt

We need these css, images, js folders and other HTML files to refer in this convention.(this structer depend on the HTML template, not always same)

OK. Now,

Loging to your installed WordPress website admin panel. And click on “change your theme completely”. Thenyou can see WordPress themes that you have installed on your WordPress website.

Now, Go to your WordPress folder and go in to wp-content\themes folder.

          Create new folder, I named that as “teashop”.

          Now create a style.css file and add your template name as a comment.

          

         Also you can add more details here.

         But theme name enough to development.

If u refresh your WordPress theme page on admin panel, you can see some different in that.

Bellow message will display in latest WordPress version. 

Now copy the css, js, images folders and the index.html page in to your theme folder

Now create a PHP file, index.php  (should not contain <?php?> tags in the php file)

and copy the whole content of the index.html file and paste in to

Index.php file.

Now refresh your theme file on web browser.

You can see something like below image

Yes, other themes contain screen shot of the website in above part.If you want to your theme also look like them on admin panel,

Open the index.htm on a web browser and take a screen shot and name as

screenshot.png

Save that in to your theme folder.

Now refresh theme page on the admin panel.

Activate that as your theme.

If u go to your website, there will contain some text, without any images, styling.

because of the css,js files and images not load correctly.

Because PHP cant understand those html paths now.You have to add correct paths.

Lets start,

Open index.php on a text editer.

You can see set of line in whole page that has given file paths.

As example:

1.       <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">

2.       <script src="js/jquery.min.js"></script>

3.       <img src="images/logo.png" alt=""/></a>

These path assess files in o\another folder.

You should change all of path like above as below.

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

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

3.       <img src="="<?php echo get_template_directory_uri();?>/images/logo.png" alt=""/></a>

get_template_directory_uri()  function return “http://localhost/mysite/wp-content/themes/teashop”

After changing, refresh your website, you can see that as same as the html template.

We have JUST STARTED the conversion

I will talk further in next lesson.