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:
https://colorlib.com/wp/template/luigis/

We used Advanced Custom Fields https://www.advancedcustomfields.com/.

source

17 thoughts on “How to convert an HTML Template to a WordPress Theme (2019)

  1. Regarding the pizza image … There is a 200size class added to the html code that resizes the images to 200 using css … I guess you missed that; more reason why you weren't sure why its acting as it was acting … Nice video

  2. I am getting this error:

    Warning: get_headers() expects at least 1 parameter, 0 given in D:MainWorkXampphtdocswordpresswp-contentthemesgorsishopfront-page.php on line 2

    when I add "<?php get_header(); ?>" it did not give me any error but it also didn't show the header.
    The code editor I am using is suggesting me to use "<?php get_headers(); ?>". But when I use this it gives me the above-mentioned error.

    UPDATE:
    I just get my header code (Everything in index.php) and put it in the "front-page.php" and removed the "<?php get_heaeder();?> " line it worked for the most part at least.

  3. Thanks for this step-by-step tutorial, I really found it very comfortable to follow it, I tried to go a little further and do it with my own page created in html and bootstrap to try and I left almost everything at face value I was very happy, until I had an error in the navigation bar section. I don't get to take the classes well, I'm using bootstrap 4 the code that embed is this

         array (

           'theme_location' => 'top_menu',

           'menu' => 'mainNav',

           'container' => 'ul',

           'menu_class' => 'navbar text-uppercase',

         )

         );?>

    but it shows me badly the pages of the menu

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.