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

Подписаться 29 тыс.

Просмотров 374 тыс.

50% 1

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/.

Хобби

Опубликовано:

6 мар 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 741

@terric5262 4 года назад

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

@mrdigitalau 3 года назад

You're very welcome!!!

@boloplesiran6757 3 года назад

somehow I make up my mind to learn to make wordpress site after view your video :)

@sifatgamil4757 Год назад

Plz give me the html template because its not freen now and i m not being able to download it from the suggested site.

@sifatgamil4757 Год назад

@@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.

@rimann20 5 лет назад

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!

@sudheer-suri 3 года назад

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.

@dawidfrankiewicz8994 3 года назад

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

@mrdigitalau 5 лет назад

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.

@muhammadhusnain4611 5 лет назад

it's a WordPress Function

@funandtechtogether 5 лет назад

Thanks very much

@faizannabi7540 5 лет назад

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/

@astev52 4 года назад

wizzywig is the correct pronunciation I believe

@nareshraju2722 4 года назад

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

@987Stephen1 4 года назад

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.

@3-dog-solution 4 года назад

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.

@mrdigitalau 5 лет назад

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.

@ShubhamGupta-yy7wt 5 лет назад

this Error show: JQMIGRATE: Migrate is installed, version 3.0.0

@seoefforts6796 5 лет назад

@@ShubhamGupta-yy7wt is not an error, is just a message

@mrdigitalau 5 лет назад

Thats OK, that's WordPress doing that. To ensure older plugins work

@mrdigitalau 4 года назад

@@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

@chinmaysahal6229 3 года назад

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 ?

@icreatestuff3610 4 года назад

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.

@SureshKaria 4 года назад

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!

@smiljkachu 4 месяца назад

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.

@raymondwiggins354 4 года назад

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 4 года назад

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

@sebastiancascoalvarez386 8 месяцев назад

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.

@zakariaraju2857 4 года назад

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

@Andres-xd2en 4 месяца назад

This is the first video that really explained everything from zero to hero. Nice job man. Love it.

@techmystressaway4857 5 лет назад

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 👍

@mrdigitalau 5 лет назад

You're very welcome!!

@nageshwarj 3 года назад

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

@ShahanSmu 3 года назад

@@nageshwarj wordpress.stackexchange.com/questions/151777/how-to-correctly-add-javascript-in-functions-php

@raquelocasio8002 3 года назад

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.

@postmortemm Год назад

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

5 лет назад

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

@mrdigitalau 5 лет назад

Cheers Oscar thank you!

@SEO-Tips 5 лет назад

Essential video for every developer. Thanks!

@Eduxir 4 года назад

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.

@amirkermanshahani8487 4 года назад

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

@mrdigitalau 4 года назад

Awesome. You're very welcome mate cheers!

@equiz 4 года назад

AMazing great tutorial! Thanks so much for this. I like the way you say "footah", "offah" :D

@ihhdina 4 года назад

Yeah obviously it catches the attention of listeners Mr.digital is great.

@mrdigitalau 4 года назад

@@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

@ihhdina 4 года назад

@@mrdigitalau Can you share your email ID?

@ariamsalazar2802 3 года назад

This video save my two weeks of suffering! ACF IS THE ANWSER OF EVERYTHING! Thank you

@amoahfrank5162 3 года назад

The best of the best video on WordPress theme creation so far. Thanks Mr Digital.

@vinaymathrubai1244 4 года назад

This is really a great video on entire RU-vid, your tutorials pricesless, your:re a true master!

@owen6571 3 года назад

Definetely the best youtube chanel about wordpress

@powerliterature 2 года назад

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.

@TDLRest 5 лет назад

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.

@AishaStitt 3 года назад

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.

@mrdigitalau 3 года назад

You're very welcome Aisha. Hope it brought you some valuable learning and can help you grow as a web dev.

@TheRoadTaken 4 года назад

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.

@amariylan7499 3 года назад

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

@gorimor 4 года назад

Thank you!! This is incredible, just what I needed.

@mrdigitalau 3 года назад

You're welcome Joe!

@noureddineabdelbadie381 4 года назад

This's Awesome ! Clean high quality content and just what i needed Love it, Thanks Man !

@mrdigitalau 3 года назад

Thank you very much!

@IamFrankEU 5 лет назад

You sir, made my day. Thank you.

@webvulnkwame1081 4 месяца назад

i was about to give up on you then i saw template-about........sleepless night just to figure this stuff out. you are awesome.

@francisnjugunaldc 13 дней назад

Only a single hour to save me my lost 2months trying to learn this, thanks men :)

@Allformyequine 3 года назад

Did the whole thing and got it ALL; so great thank you for putting in the time; learned a ton!! CHEERS!

@francescodedoni9748 3 года назад

the best tut ever done on wordpress, sincerely. great job!

@Allformyequine 3 года назад

This is fantastic and sweet examples of ACF too!! Kudos to you!!

@obaid3982 4 года назад

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"

@SayfSentinel 4 года назад

Thank you mate. Right to the point. Very well explained You sir deserve a thumbs up just right now

@vemoable 4 года назад

Amazing course ! This is what i needed :) Thank you !

@laketich 4 года назад

wOOOOOOOOOOOOOW! magnificent work, liked your speed speech and explaining everything!!

@gonzalocastellanos1149 3 года назад

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!

@notladtsew 3 года назад

Good Lord I was following along the whole way! Thank you very much. As a freelancer I hope this will help my clients better.

@znibblol 4 года назад

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?

@durjoysoldier9650 3 года назад

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!

@Sashad2003 2 года назад

The best and easiest tutorial I ever seen. Thank you very much 👍

@DonatPolyak 5 лет назад

You are an amazing man Mr Digital! Clearly understandable thing you communicate for us! Keep up the good work!

@mrdigitalau 5 лет назад

Thank you Donat appreciate it very much!

@solutel 4 года назад

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 !

@jhalmu 5 лет назад

Thanks. I was today wondering what and how to do with Advanced Custom Fields :) Great video!

@mrdigitalau 5 лет назад

Happy to help you!!

@nannull4851 4 года назад

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.

@mrdigitalau 4 года назад

Thanks very much mate! Appreciate it

@paulramura8126 3 года назад

One of THE BEST WP tutorials on RU-vid!

@mrdigitalau 3 года назад

Wow, thanks!

@fmostream 4 года назад

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.

@mrdigitalau 4 года назад

You're welcome Fredrik. Thank you!

@kaustavdey1 2 года назад

One of the best wordpress video on RU-vid

@Mazoane 7 месяцев назад

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.

@igor9919 4 года назад

What a great tutorial, everyone’s said that already, but I had to as well. Huge thanks!

@mrdigitalau 4 года назад

Cheers Igor!

@tcl78 4 года назад

Perfect! Thank you! Just a question, in your tutorial you mentioned that there was another way to include jquery. How would you do it?

@peterholmberg434 5 лет назад

Great tutorials! I bet you have 100K+ subscribers in a year, really appreciate your effort man.

@mrdigitalau 5 лет назад

Cheers man appreciate it very much!

@STFUandFY 3 года назад

i guess youve lost your bet

@user-lh8mt5pq9t 4 года назад

Thank u so much for this tutorial !

@efmajacksonrosario1390 5 лет назад

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!

@Os_Bosniak 2 года назад

Finaly, real solution for real problems. Thank You so much

@aoncars 4 года назад

Great tutorial. You make it so easy to understand.

@Mrbriecheesepacman 4 года назад

Amazing tutorial! Thanks a lot mate.

@GwenetteWriterSinclair 3 года назад

Thank you. Your screesn captures and pace are excellent.

@huayondropo 4 года назад

Parabéns cara.....this toturial is amazing and you an excellent teacher! Thank Very Much, Mr Digital... you rules! Regards From Brazil

@Dirtyratsdotwebs 4 года назад

Great video, watching this has helped me not only understand wordpress but it has helped me understand shopify liquid too

@FBSoftwareSolutions 4 года назад

Thankyou for this video. I watched from start to finnish.

@GKProgramming Год назад

One of the best tutorials i have seen on RU-vid. 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.

@bacet9280 Год назад

hi sir, can you please tell me how you downloaded the first file that mr digital is editing on sublime text

@GKProgramming Год назад

@@bacet9280 we cant because the theme is paid. But you can practice using Bootstrap, is the same thing

@jnmldo 4 года назад

Thank you so much for this!

@ryker86 4 года назад

10/10 Tutorial - Great work!

@mrdigitalau 4 года назад

Thanks mate! appreciate it

@peak2trough137 3 года назад

You are a great Teacher , Thanks.

@2HAMMERS1 3 года назад

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*

@dennohpeter 3 года назад

Thank you for this tutorial. It was really educative

@zushiba Год назад

This is a great video, I quickly adapted a template by following this video.

@toglannestor400 Год назад

good job!perfect!thank you very much!

@mikev2066 3 года назад

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...

@ritchisen2179 17 дней назад

Thank you, still helpful and relevant

@akilahapuarachchi 5 лет назад

Great tutorial! Thank you lot for this

@talhashoaib6102 4 года назад

Thnankyou for this amazing tutorial.

@abrorziyavutdinov2446 5 лет назад

Very clean and nice explanation. Thanks indeed.

@aboorvamfoodproducts 3 года назад

Great tutorial. Keep doing this to fill our tech hunger

@fadikhaleel2092 4 года назад

Wonderful and smooth explanation Thanks From Jordan

@davoodkhobbakht3007 3 года назад

best tutorial ever! thank you so much!

@marcamato433 4 года назад

This tutorial rocks! thank-you Mr Digital

@mrdigitalau 4 года назад

Cheers Marc!

@parasnshah2899 4 года назад

Superb tutorial sir

@aryavinodandrews 3 года назад

Thanks for the great tutorial

@marcelotonet 4 года назад

Awesome man !!! thanks so much ! The images makes me hungry to ! LOL

@miguelelei 3 года назад

Thank you for this great tutorial.

@jafb737 3 года назад

OMG, genius! Best tut ever, bro. Thanks!

@mrdigitalau 3 года назад

Thanks Dude. I have more stuff to be adding VERY shortly.

@Elator11777 5 лет назад

Thanks, you are a real pro!

@mattpt24 Год назад

Really helpful video. Do you need to use Bootstrap in order to build a WP Theme or is it optional?

@thanhtranguyen8840 3 года назад

Thanks so much for such wonderful video!

@shreyjain3562 4 года назад

very precise and very well-explained video. thank you for creating this video

@jancifoxhound6380 4 года назад

Mr.Digital I love you content. I have a question for wordpress pro. It is better to create theme from scratch ,or using underscore theme, when im converting PSD to WP?