How to convert an HTML Template to a WordPress Theme (2019)

You may have your own static HTML website that you want to convert to your own WordPress theme, or you found an amazing HTML Template that you want to use with WordPress but they do not have a WordPress theme available. This tutorial will explain to you how to convert an HTML Template to a WordPress Theme the simplest way possible.

To convert the HTML template to a WordPress theme, we will be using the latest version of WordPress, along with a handy plugin for WordPress called "Advanced Custom Fields" - this will allow you to retain the overall design which is hard to maintain if you purely use WordPress' code editor. We will not use Gutenberg, so don't worry.

Why would you convert a static html template or website to WordPress theme? Well, the reason is so that you can easily update it in future, it has all of WordPress' SEO benefits and is much simpler to edit.

Converting an HTML Template or Website to a WordPress theme is not as hard as you think. This tutorial is 1.5 hours, and it will explain some basic fundamentals of converting your HTML theme to a WordPress theme but it does not mention absolutely everything.
If there are things you still want to know regarding converting an html template to WordPress, feel free to ask in the below comments and I will try my very best to assist you.

The HTML template we used was "Luigis" located here:

[rimann]

Very comprehensive and easy to follow video. Moves at a good pace without a lot of fluff. Techniques used are applicable to a wide range of different website structures unlike most other videos I have seen on this topic. Very much appreciated!

[terric]

Bless you - I was hopelessly lost before I found this video! It's honestly the single most helpful tutorial I've ever found for Wordpress

[Stephen]

Thanks for this tutorial. I really like that you didn't just edit out your mistakes, it helps to see where we could go wrong and how to resolve the issue.

[-dog-solution]

One word, - (Magic!)
The speed of it and the pace leaves one breathless.
I also appreciate all of the mistakes as well: what you did wrong would have had me scratching my head for days, but the way you went about correcting them has given me a new in-site. (Sorry about that.)
As before - excellent tutorial.

[SureshKaria]

I wanted to thank you for this clear and to the point tutorial with no much complex things. I wasn't clear until now how to convert html into proper wp-theme but you made is so easy to understand. Thanks a ton!

[icreatestuff]

This is by far the BEST tutorial I've seen on Wordpress mistakes and all shows that all developers have hiccups...awesome...my theme came out great with this tutorial.

[sudheer-suri]

I particularly liked this tutorial coz you also captured the struggles of a programmer, while other youtubers just upload the refined content making beginners feel bad that they can never reach that level of perfection.

[mrdigitalau]

One thing I forgot to mention is if you want to use the standard WordPress content editor box that ships default with WordPress, you can use this code to include it into your template.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: endif; ?>

[zakariaraju]

I Saw different type of tutorial for HTML to WordPress convert but this tutorial is totally different from another. The advanced custom field plugin works like a page builder. In a word it was amazing. thank you so much

[smiljkachu]

Best tutorial so far. Explained why you don't see something, what is overlooked, forgotten, what to check and where to check...and for the most part that I can use templates and acf together.

[raymondwiggins]

Thanks for keeping the glitches and errors in. It makes me feel better knowing that I'm not the only one who doesn't have every bit of syntax memorized.

[MrChupsChupa]

I like the way you're explaining every bit and you start from the very beginning!

[raquelocasio]

Thanks for this great tutorial. This is the first WordPress theme dev tutorial that I've watched to the end. Looking forward to trying this out and sharing my results.

[sebastiancascoalvarez]

Still useful. Had to come back to this video after 2 years. Complex done simple in one video. This time with multiple headers and footers, sidebars and multiple pages. Helped to sort everything out.

[techmystressaway]

Excellent tutorial, great job! I love how you left the mistakes in and didn't edit them out, I think it definitely helps the learning process, troubleshooting etc cheers Pete 👍

Finally! A tutorial type and style I can understand, follow and like. Congrats. Greetings from 🇲🇽

[amirkermanshahani]

That was great ! by far the most comprehensive tutorial I've found . I really appreciate your time and effort . good job <3

[postmortemm]

This is great! Thank you, I think this is one of the most comprehensive tutorials I've seen. Appreciate your work very much

[AishaStitt]

Video was excellent and amazing. I sat through the entire tutorial. Would do it again. It tremendously helped me. And thank you for not cropping out the mistakes we needed to see how to resolve them.

[Mechudopatineto]

This is the first video that really explained everything from zero to hero.

Nice job man. Love it. <3