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
Thank you Mr Digital for such a nice tutorial.
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
It's really nice that you allow us to rewrite your code from film. It's always a pleasure when I can do it. Good for you.
Everyone saying this is so amazing – but you have to pay to create repeated fields with ACF so it's effectively useless if you aren't an ACF pro member
After activating the customized theme there shows nothing only a blank page i've copied section part to frontpage.php still it's blank. Can anyone help me? Thanks in advance
Thanks this video was a big help!
Hello sir Advanced Custom Fields pro download link
Hello, I have a problem with the code when I put it doesnt show me that section .
This is my initial code
<?php if( have_rows('servicios') ): ?>
<section class="section_servicios">
The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
This is what i get when i try to upload theme on live wp… Can anyone help???
Can you make 1 more HTML to WordPress but use CPT with ACF, explain different between those, try with more complex site
Please make video HTML to wordpress dynamic wocommerce
Sir i can't connect my css file to my frontpage. Php plz help me sir
Need large html template to convert into WordPress with CPT Custom post type
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.
This tutorial rocks! thank-you Mr Digital
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
Thsnk you, how to add breadcrumbs?