Convert HTML Templete into WordPress Theme

Spread the love

This tutorial assumes you already have a basic understanding of HTML and CSS. It also assumes you have a website built in HTML and CSS and have it ready for conversion to WordPress. If you already have something in WordPress (maybe you bought a WordPress templates), you might be interested in learning how to customize a WordPress theme and the WordPress child theme basics.

although there are thousands of wordpress themes are available to use.some are premium and many of them are free to use.But still if you want your own theme then today in this post i am gonna tell you how to convert a HTML templete into wordpress easily.

I am using this theme from w3layouts.com for this tutorial

Step 1 : Create a Theme Folder and Necessary File

On your desktop, create a new folder to hold your theme files. Name it whatever you’d like your theme to be named.Next, create a few files (which all go in your new theme folder) in your code editor. Don’t do anything to them just yet. Just leave them open for further editing.

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

Step 2: Copy Existing CSS Into New Stylesheet

If you’re looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file you’re going to want to edit is your Style.css file.

To begin, add the following to the top of your file.

After this section simply paste your existing CSS below. Save and close the file.

Step 3: Divide Your Current HTML

First, open your current site’s index.html file. select everything from the top of the file to the opening div class=”main” tag(or any other div that is containg your websites’s body part). Copy and paste this section into your header.php file, save and close.

Second, go back to your index.html file. select the aside class=”sidebar” (or any other div that is containg your websites’s sidebar part) element and everything inside it. Copy and paste this section into your sidebar.php file, save and close.

Third, in your index.html select everything after your sidebar (or the data that you want to put in your footer) and copy and paste it into your footer.php file, save and close.

Finally, in your index.html file, select everything that’s left (this should be the main content section) and paste it into your index.php file. Save, but do not close yet.

You can close your index.html file now however and move on to the final steps. Almost done!

Step 4: Finalize Your index.php File

In order to finalize your new theme’s index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files you’ve created. Or in other words, put back together the elements we just “chopped up”.At the very top of your index.php file, place the following line of php.

Then, at the very bottom of your index.php file, place these lines of php.

And finally, we have to add what’s called The Loop. This is the primary bit of php that WordPress uses to display your post content to visitors. So the final step in creating your new theme’s index.php file is adding the code below within the content section.

Save your index.php and close. You’re theme is now finished! All that’s left is to upload it to your WordPress website.

Tips :

  • Use WP function <?php bloginfo(‘template_directory’); ?> to attach your external files like CSS,JS
  • Create A New File functions.php in root and paste below code to manage Theme Menus from WP-Admin
  • Create page.php to manage pages and Use Below code

Download Theme

Hope it will Help You and please subscribe me and like my facebook page :

and make me proud.By the way if you face any problem then let me know in comment section below


  1. I’m really enjoying the design and layout of your blog.

    It’s a very easy on the eyes which makes it much more enjoyable for
    me to come here and visit more often. Did you hire out a designer to create your theme?
    Outstanding work!

Leave a Reply

Your email address will not be published. Required fields are marked *