How to convert an HTML Template to a WordPress Theme (2019)
ฝัง
- เผยแพร่เมื่อ 6 มี.ค. 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:
colorlib.com/wp/template/luigis/
We used Advanced Custom Fields www.advancedcustomfields.com/. - แนวปฏิบัติและการใช้ชีวิต
![ไหล่อ่อน (Soft Shoulder) - Atom ชนกันต์ [OFFICIAL MV]](http://i.ytimg.com/vi/HUWl53msBQY/mqdefault.jpg)
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!
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
You're very welcome!!!
somehow I make up my mind to learn to make wordpress site after view your video :)
Plz give me the html template because its not freen now and i m not being able to download it from the suggested site.
@@mrdigitalau Can u help by giving the html template, i mean by uploading a google drive link of the template because its not available now.
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.
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.
Yeah, that is the worst thing. When i was learning basics of programming i was wondering if at some point i should always remember everything. Now i know that even if you remember a lot, you won't remember everything. At the end, the most important skill in programming is to know how to google things you need :) well at least for generic stuff
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.
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!
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.
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.
it's a WordPress Function
Thanks very much
Im having issues i followed same to ur guide im using wordpress 5.2.2 and php(xamp) = 7.3.6 ,1: not showing anything and 2: also luigis Our Menu not showing images u told to replace with /images/
wizzywig is the correct pronunciation I believe
Sir iam requesting you... i have a html template and tried so many times but i didnt get good results. so please i will send you my template please convert it sir. i started a business but dont have money to develop website thats the reason iam going for free template .. nareshraju119@gmail.com this is my mail please ping me sir
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
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 👍
You're very welcome!!
I am not able to add JS can someone help me on the same? because I can see for CSS we added enqueue_scripts but for addJS we are not doing that, please help
@@nageshwarj wordpress.stackexchange.com/questions/151777/how-to-correctly-add-javascript-in-functions-php
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.
I like the way you're explaining every bit and you start from the very beginning!
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.
Finally! A tutorial type and style I can understand, follow and like. Congrats. Greetings from 🇲🇽
Cheers Oscar thank you!
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.
That was great ! by far the most comprehensive tutorial I've found . I really appreciate your time and effort . good job
Awesome. You're very welcome mate cheers!
This is great! Thank you, I think this is one of the most comprehensive tutorials I've seen. Appreciate your work very much
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.
This is the first video that really explained everything from zero to hero.
Nice job man. Love it.
Small Update: When adding scripts (JS) to your functions.php - if you wish to use jQuery which is included by WordPress as default, just do wp_enqueue_script('jquery'); you do not have to register the script as it is built in. You can also remove the "deregister_script('jquery')". Wordpress automatically has a version of jQuery so it might be easier and better for future plugins you add to your website if you use that version.
this Error show: JQMIGRATE: Migrate is installed, version 3.0.0
@@ShubhamGupta-yy7wt is not an error, is just a message
Thats OK, that's WordPress doing that. To ensure older plugins work
@@ShubhamGupta-yy7wt Not an erro mate as SEOEfforts said. WordPress brings that in to allow plugins that require jquery to use older and newer versions
bro same message is showing in my console JQMIGRATE: blah blah. but my "our menu" section is not showing. i have check all the things but it is not showing.
When i comment out my css file then it is showing but in ugly view but after uncommenting it's again the same thing. what should i do ?
This is really a great video on entire TH-cam, your tutorials pricesless, your:re a true master!
Thank you mate. Right to the point. Very well explained
You sir deserve a thumbs up just right now
This was super fast but thankfully I can pause, rewind, repeat, take a break, come back with fresh eyes and resume. This was outstanding. I've seen countless videos on converting HTML to wordpress but they always lacked something and I couldn't put my finger on it. I can now, it was the quality of the work you did Vs what they showed. One concern though is you essentially cannot add new wordpage pages in the WP editor retaining the existing look of the site, right? I would assume if an organization has a static HTML site their content may not change often but I would love to see a tutorial on how to add new pages while retaining the styles just imported, if this is possible.
This is just the best i found, and man, thank you so much! its so well explained and easy to follow, really WOW! appreciate your hard work and effort, thank you again! and good luck!
Did the whole thing and got it ALL; so great thank you for putting in the time; learned a ton!! CHEERS!
This's Awesome !
Clean high quality content and just what i needed Love it,
Thanks Man !
Thank you very much!
Excellent Mr Digital. Simplified my job so much. I actually created a wordpress site from an existing one (as per the client requirement). Your video gave me exactly what I was looking for. Thank you so much.
AMazing great tutorial! Thanks so much for this. I like the way you say "footah", "offah" :D
Yeah obviously it catches the attention of listeners Mr.digital is great.
@@ihhdina Thanks Dude. It's just my accent. Ask any Aussie to say "Header" or "Footer" and they will say it the same way. haha
@@mrdigitalau Can you share your email ID?
The best of the best video on WordPress theme creation so far. Thanks Mr Digital.
this video is perfect. thank you soooo much !!! I searched the whole net to finally find this great video . it is exactly what I was looking for. your accent is charming also
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.
You're very welcome Aisha. Hope it brought you some valuable learning and can help you grow as a web dev.
Amazing course ! This is what i needed :) Thank you !
Have been searching for something like this. And to show how to add Bootstrap was a bonus. Awesome. I am now checking out your"How to convert an HTML Template to a WordPress Theme"
the best tut ever done on wordpress, sincerely. great job!
Thank you!! This is incredible, just what I needed.
You're welcome Joe!
Essential video for every developer. Thanks!
wOOOOOOOOOOOOOW! magnificent work, liked your speed speech and explaining everything!!
This is fantastic and sweet examples of ACF too!! Kudos to you!!
oh my god. not a little, thanks a lot. sir, I love you. just I love you so much. 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.You sir, made my day. best tutorial ever!
This tutorial is amazing! Thanks for all the help.
Is there a way to change text and images natively in Wordpress, or is Advanced Custom fields the way to go?
Thank you Mr. Digital. I used another HTML website theme and managed to get 50% of the original theme into wordpress front page following your instruction albeit crash course. Now just have to play with the text columns and add some pages.
You sir, made my day. Thank you.
Definetely the best youtube chanel about wordpress
You are an amazing man Mr Digital! Clearly understandable thing you communicate for us! Keep up the good work!
Thank you Donat appreciate it very much!
Good Lord I was following along the whole way! Thank you very much. As a freelancer I hope this will help my clients better.
Thanks. I was today wondering what and how to do with Advanced Custom Fields :) Great video!
Happy to help you!!
It was great to see that it is posible ! At least I'll install the Text Editor to power myself !!! It is so difficult that see you make me feel that you are a real Artist !
This video save my two weeks of suffering! ACF IS THE ANWSER OF EVERYTHING! Thank you
Hey Mr Digital, one important question! Once you develop your custom theme, how much effort is there to maintain it, if you would have login/register membership, blog.. How do you make sure that your theme will be compatible with certain plugins and will not break after wordpress updates.
The best and easiest tutorial I ever seen. Thank you very much 👍
What a great tutorial, everyone’s said that already, but I had to as well. Huge thanks!
Cheers Igor!
Thank you. Your screesn captures and pace are excellent.
Man, this is just what I needed!! Dont be sorry for mistakes, it is a good practice :D
Now I need to understand how to connect Contact form...
Parabéns cara.....this toturial is amazing and you an excellent teacher! Thank Very Much, Mr Digital... you rules! Regards From Brazil
Thank u so much for this tutorial !
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.
Thanks very much mate! Appreciate it
Great tutorial. You make it so easy to understand.
Amazing tutorial! Thanks a lot mate.
Great tutorials! I bet you have 100K+ subscribers in a year, really appreciate your effort man.
Cheers man appreciate it very much!
i guess youve lost your bet
Perfect! Thank you! Just a question, in your tutorial you mentioned that there was another way to include jquery. How would you do it?
One of THE BEST WP tutorials on TH-cam!
Wow, thanks!
A brilliant video! It answered most of my questions about WordPress.
It would be nice to see how to convert the "news" page and add the "latest news" to the front page :)
Greetings from Poland :D
Hey Mariusz, No problems mate, i will try and do a tutorial for that shortly.
Great video, watching this has helped me not only understand wordpress but it has helped me understand shopify liquid too
i was about to give up on you then i saw template-about........sleepless night just to figure this stuff out. you are awesome.
Great tutorial! Thank you lot for this
Awesome video! I'm working throughout a project and this video just saved my life. I needed one specific information about developing a wordpress on the localhost and this video saved.
Btw, it looks like the ACF changed the workflow.
Now you can use the get_field() function to get any field, regardless the field group. So, in the moment 30:14, you don't need to fetch the get_field('hero') first. Just go straight to the get_field('small_title') instead.
Cheers.
Great tutorial, really love that you left the mistakes inside the video. because we all make them and its nice to see how you solve them.
You're welcome Fredrik. Thank you!
Very clean and nice explanation. Thanks indeed.
FANTASTIC TUTORIAL! I'm working on converting an html site with this tutorial but I'm having a slew of problems and I'm guessing it's because of the css or js. Do you have an email I could reach you at?
Thank you so much for this!
I get anxious when you delete code so carefree. Then I see the pizza images and hunger overtakes anxiety :DDDD Nice tutorial ;)
is there a way you could share us the code? I can't make the scripts to work :S
Amazing tutorial!
Thank you for this tutorial. It was really educative
Only a single hour to save me my lost 2months trying to learn this, thanks men :)
Thnankyou for this amazing tutorial.
very precise and very well-explained video. thank you for creating this video
Hi, I watched the video and its a big big help in my projects, its good if you have tutorial of wordpress theme + CPT
Thankyou for this video. I watched from start to finnish.
10/10 Tutorial - Great work!
Thanks mate! appreciate it
Great tutorial. Keep doing this to fill our tech hunger
nice tutorial thank you so much!!
This is great!!! This is one of my problem on how to convert my bootstrap web layout in the wordpress. Amazing tutorial...BIG THANKS Man...btw I like your accent.lol XD..peace.
best tutorial ever!
thank you so much!
Just what the doctor ordered. Thanks, mate.
Thank you for this great tutorial.
One of the best wordpress video on TH-cam
Ya, know..What???
I watched 22 minutes of this man's stellar tutorial, very high caliber workmanship.
I smiled as I watched....waiting...........for Mr D to say.......and Bob's your uncle, Mate. This video is a Ripper, LOL love your langs.
Had my Ahh Haa Moment
I now understand why many of the themes I have downloaded never worked.
I will never ever do any of what Mr D is teaching - seems way too much work, I am old,
Thanks Mate BCNU
*Canada*
excellent tutorial. I was able to learn a lot through it, thanks very much. A question: how to code page.php to add general pages via admin interface (Without using different templates for each page I mean)
This tutorial rocks! thank-you Mr Digital
Cheers Marc!
Thank you very much for this work - I liked it and helped a lot!
Thank you very much!!! I am really excited about this! And about the mistakes you've been making actually they are challenging and makes it somewhat boring but that's how coding is coz we will meet them and struggle to fixe them ourselves and to God's sakes you made some of them and we've been able to see how you collect them!!!!
Thank you for this!
We thank God for that you've made so much mistakes!
Awesome man !!! thanks so much ! The images makes me hungry to ! LOL
I don't usually comment on peoples content but great content, please keep the great tutorials up, very informative. maybe if you could please consider doing a shopify tutorial like the above one, creating desired themes in shopify.
Thank you for share really useful tips man, you have premium knowledge!
Thanks very much appreciate it :)
Finaly, real solution for real problems. Thank You so much
One of the best tutorials i have seen on TH-cam. Keep doing more tutorials, you are the best. And about the errors: is better we see these errors than ignore it and struggling with errors. Keep doing it too, is better to us learn. Thanks man.
hi sir, can you please tell me how you downloaded the first file that mr digital is editing on sublime text
@@bacet9280 we cant because the theme is paid. But you can practice using Bootstrap, is the same thing
This is a great video, I quickly adapted a template by following this video.
Is it possible to add plugin component with a static page, for instance having a combination of static and maybe elementor sections or other plugins together? If so how would I go about adding plugin functionalities? Thank you!
Super BIG thanks!! realy loved it It was super helpfull :D
You are a great Teacher , Thanks.