Converting HTML Template to Wordpress Theme

Converting an HTML template into a Wordpress theme is actually not that difficult. Its a lot of knowing where to copy and paste. But note that this is a simple overview of the process from HTML to WP.

In this tutorial I give you step by step instructions on converting one of my favorite HTML templates into a Wordpress theme. Here are the steps below:

- Select the HTML template you want to convert
- Obtain a barebones Wordpress template
- Install a fresh WP site locally or on a server
- Select the barebones theme
- Copy the HTML portions to the appropriate places in the Wordpress theme
- Enqueue CSS & JS files
- Make sure it works!

Obviously I left out some things but this is a simple overview of the process.

Some links you will need:

[dougeike]

The instructor is knowledgeable, but he does what he does with no explanation. What folks like me need is a complete explanation of how the file and folder structures work, what code starts and stops in each file, etc.

[mommagreenbean]

I LOVE YOU!!!
YOU HAVE NO IDEA.
Seriously. I've been looking for someone that I can follow along with to do this HTML to Wordpress conversion for SO long and I finally found your videos. Got my home page converted now and ready to try to do the other pages. OXOXOXOX

[DaCoolidge]

I really enjoyed this tutorial. Real world mistakes were made and corrected. Thanks!

[queenziva]

Thank you for this video I was able to change my portfolio website from HTML/CSS/sass into a WordPress theme and make it a WordPress site. I am very grateful!! :D

[sueva]

Hi Frank, thanks for the tut, any chance on making part 2...still lots to learn...like integrating the menu, adding short codes and widgets... as well as those much needed advance custom fields... that will be editable through the dashboard.

[mehansika]

hey .. I followed your tutorial . Really helpful but what about the wordpress menu ?

[mvblader]

If you are using sublime and would like a speedy way to reformat your code (make it prettier and more semantic) as I saw you do a few times, install the BeautifyHTML plugin. Highlight everything and 3 keystrokes and you're done. Good video by the way.

[BhuwanChandra]

Requesting a tutorial to convert an html based website to wordpress ....a complete tutorial including
1.converting Menu.
2.Slider.

also need the html which you will use in tutorial

[reshef]

Hi Frank, So how do you link an image that is defined in the CSS. I see how you did it in the wordpress .php file by adding the <?php bloginfo stuff. Please share how this would work in defining the images in the css. Thanks!

[ThePires]

amazing amazing tutorial, you are a great teacher :) thanks so much for help

[beachsidebooy]

hello, i have hTML i want ro convert into more dedicated and professional site what do you recommend

[omarelias]

look what theme_enqueue_styles not appear in the template that you let us in the description and has made ​​it impossible for me to create the link with css and js

[FGN]

Hello, first of all a good tut. Will there be a second part or are you finished?

[reza]

very comprehensible! Thanks for sharing!

[arrxzon]

thought you were going to continue this tutorial ?
Thanks anyway even this was super helpful but there is a lot more that can be done I presume. Like being able to add widgets, plugins, make pages editable through wordpress etc

[conaqtefixo]

Great tutorial! But I have this problem in functions.php: Fatal error: Call to undefined function enqueue_style()
-.-' I don't know what i'm doing wrong. Help please! I'm almost done

[mrcee]

This tut is really cool :) but after import CSS into function.php in Starkers Theme (wp_enqueue_style) my theme in Wordpress Dashboard has changed...i remove CSS in Starkers Theme than my Wordpress Dashboard Theme is classic like a 0:35. Please help. Sorry my english really bad. :)

[ben]

Okay, where would I find/create htdocs?

[starrynight]

thanks for the tutorial, thats great, but i think im not really understand, i used to design html css web but i want to improve myself and learn about wordpress, maybe i really need tutor

[azeeminator]

Great tutorial but could've at least zoomed in so we could see your work clearly.