WordPress Theme Development Tutorial 2020

WordPress Theme Development Tutorial 2020

This wordpress theme tutorial will help those looking to make a new custom wordpress theme 2020. The wordpress tutorial covers how to create a WordPress theme using understrap, so if you are interested in how to make your own WordPress theme, this should have you covered. We use a combination of HTML, css, js with bootstrap.

00:00:00 – Introduction to WordPress Custom Theme Development
00:00:24 – WordPress Custom Theme Design
00:02:14 – Installing WordPress, Understrap, Database
00:07:02 – WordPress and Setup Custom Theme Understrap
00:10:27 – Website Custom Theme CSS and Header Preparation
00:12:00 – Header Layout
00:19:50 – Header and Navigation CSS Styling
00:26:10 – Website Custom Fonts Imported Google
00:28:42 – Header Menu Layout and Styling
00:33:54 – Header Top Section Logo Links
00:48:27 – Header Responsive Design
00:59:30 – Header Mobile Menu Button and Nav
01:27:10 – Header Logo and Nav for mobile
01:34:30 – Home Page Hero Banner
01:48:14 – Home Call to Action Section
02:10:20 – Home Welcome to Section
02:35:05 – Home News Section
03:07:35 – Home About Us Section
03:42:16 – Home Testimonials Section
03:55:30 – Home Newsletter Signup Section
04:15:26 – Home Social Media Section
04:34:17 – Home Footer and Contact Form Section
04:53:44 – Home Animation using Wow Animation.css
05:06:25 – WordPress Home Page Review
05:10:14 – Conclusion

WordPress Theme Development Tutorial 2020 | Part 2
Developing Internal Pages, Posts, Contact Us

Follow along on Figma with the Design UI:

Code Snippets:
https://github.com/adriantwarog/code-snippets/blob/master/moshi.php

This WordPress tutorial for beginners 2020 will help you create WordPress theme for those people who are WordPress for beginners. WordPress theme 2020 tutorials are many, but this is a real world example of a WordPress theme 2020 for real world projects. If you are create WordPress theme and you want more content on how to make your own WordPress theme for the future, I can do more videos like this on the HTML, CSS, even the bootstrap designs and how I go about developing them!

Design for Developers – Enhance UI
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/

#wordpress #theme #development

Follow and support me:
🐦 Twitter: https://twitter.com/adrian_twarog
💬 Discord: https://discord.gg/nGdThpE
💸 Patreon: https://www.patreon.com/adriantwarog
🖥️ Dev.to: https://dev.to/adriantwarog

About admin

100 comments

  1. I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell 🙂 Thanks for watching and hope you liked and learnt something new!

  2. TIGLE TUTORIALS PRO

    thanks bro, can i have the hosts file here

  3. TIGLE TUTORIALS PRO

    can i get the host folder that you copied from mosh project that you have bro still getting error about 127.0.0.1 backbeach.localhost.

  4. musicisasuperpower

    Hi Adrian!

    New subscriber here, I work with another developer who recommended understrap as well and so was super excited to find your tutorials.

    I unfortunately got stuck on the npm install, gulp watch, and ended up spending 5 or 6 hours trying to problem solve it. Tried lots of community docs but nothing worked.

    Have you had any difficulties with understrap and npm? Best I can see
    there may be some compatability issues with the newest versions of either sass or gulp, and that understrap isn’t being maintained as regularly now, but I have minimal experience with node or any package managers like that

  5. Balance Is Everything

    This tutorial looks fantastic, just a bit fast for me being a newbie. It would be great if you could show how to do the initial set up using Bootstrap as well as your own CSS and how to compile it all down using Gulp. What dev-dependencies you use and all that.

  6. Please do a tutorial for vs code npm install mine not working

  7. Muhammad Mominur

    gulp watch is not working
    error:
    gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try

    again.

    At line:1 char:1

    + gulp watch

    + ~~~~

    + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException

    + FullyQualifiedErrorId : CommandNotFoundException

  8. Can you create the same tutorial without understrap?

  9. Disruptive Thoughts

    excellent tutorial showing the entire workflow ++

  10. Watching Windows unzip wordpress … As a Linux user that gave me a huge smile.. haha

  11. I am a WordPress lover. Thank you for sharing!

  12. plz make more WordPress Development tutoreal video, its really one of the best ever amazing tutoreal video

  13. Kevin Rittershaus

    Do you recommend creating an Understrap child theme so that all changes are saved if Understrap updates?

  14. You didn't show every single step, not everyone will know how to set up a data base. I would suggest that you add a chapter showing newbies how to set up a DB. Personally I use Local By Flywheel. Also for the hero image it's preferable to make it dynamic so users can change it on the front end – ACF 🙂

  15. Thank you Adrian for making this very helpful video 😉 please more videos on WP ( plugins building from scratch ..) Thank you.

  16. Word Press ist euch nicht so ganz geheuer? Ich hab die Lösung Dieses
    Produkt https://www.digistore24.com/redir/37961/MoritzB/ ist eine
    Optimale WordPress Lösung, kostet sein Geld, aber kann euch nur meine
    Geschichte erzählen: Hab die 200 Euro zusammengekratzt (hat gerade so
    geklappt). Ich wollte einfach unbedingt mit Webseiten Geld
    verdienen(kann aber nicht Programmieren). Bin daraufhin auf diese
    Software aufmerksam geworden und hab sie gekauft. Hab dank der
    Software(die viel besser ist wie WordPress,mehr strukturierter) schon
    mehrere tausend Euro verdient. Ich empfehl euch das Produkt weil ich der
    meinung bin das ihr das auch schaffen könnt. Viel Spaß mit dem Produkt
    und Viel spaß beim Geld Verdienen

  17. What's the prerequisites for learning this course?

  18. Awesome design!

  19. This tutorial is perfect. It’s exactly my level. Thanks so much!

  20. this is amazing! thank you so much

  21. I'm just starting but wow this looks informative!!!!!!! Thank you for your efforts man!!!!

  22. You the best

  23. Hi Adrian, I will be taking a journey to go through all your video.

  24. Hi Adrian,
    thanks for taking the time to make such a great video. Just subscribed and following this video to get started with wordpress development utilizing bootstrap 🙂
    I read that to keep your theme updateable it's best to word with child themes… do you plan to make a video how you go about this (with the understrap theme)?
    I wanted to try it with this understrap child (https://github.com/understrap/understrap-child) as a starting point, but unfortunately the npm install command fails with a lot of error messages.
    Greets,
    Daniel

  25. why is everything going node.js?? way too much overhead for something that can be simple.

  26. Michael Ceballos

    Hello Adrían, possibility to add Spanish subtitles. Greetings from Chile.

  27. Innovative Khan

    I just subscribed. You are doing a great job. I needed a tutorial like this. Thank You.

  28. Veaceslav Pascaru

    Thanks Adrian. Great video. Thumb UP!!! One question – where can i get the gulp starter package that you use in your project?

  29. musicisasuperpower

    Hey Adrian! About halfway through now and learning lots!

    Have you worked with custom taxonomies at all or can you show how to set some of that up?

    I’m still finding working with $args = a bit overwhelming at the moment

  30. WTF I JUST WANT A BLANK PAGE TO ADD BLOCKS I DONT WANT ALL THIS OTHER THEME STUFF

  31. dude you literally went from 0 to advanced in 5 minutes

  32. Gaming Bel3araby

    hi bro
    nice effort
    i hit a road block here
    never used visual basic in we desiging i used to upload wordpress on a hosting acc and just miss with plugins
    i guess adobexd is nothing
    but visual basic
    could u at least tell me what version should i use !
    thanks in advance , awesome tut
    i suped and liked

  33. "how to create a static website and have WordPress display it"

  34. cannot see gulp when you run the command

  35. Hi Adrian, node modules throw error message when you run gulp.

  36. C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-theme>npm install

    > [email protected].1 install C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-themenode_modulesnode-sass

    > node scripts/install.js

    internal/fs/utils.js:269

    throw err;

    ^

    Error: EPERM: operation not permitted, read

    at Object.readSync (fs.js:568:3)

    at tryReadSync (fs.js:353:20)

    at Object.readFileSync (fs.js:382:19)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1156:22)

    at Module.load (internal/modules/cjs/loader.js:985:32)

    at Function.Module._load (internal/modules/cjs/loader.js:878:14)

    at Module.require (internal/modules/cjs/loader.js:1025:19)

    at require (internal/modules/cjs/helpers.js:72:18)

    at Object.<anonymous> (C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-themenode_modulesrequestindex.js:18:15)

    at Module._compile (internal/modules/cjs/loader.js:1137:30) {

    errno: -4048,

    syscall: 'read',

    code: 'EPERM'

    }

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modulesfsevents):

    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! [email protected].1 install: `node scripts/install.js`

    npm ERR! Exit status 1

    npm ERR!

    npm ERR! Failed at the [email protected].1 install script.

    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersBonkeDyanAppDataRoamingnpm-cache_logs2020-09-15T14_56_17_842Z-debug.log

  37. Hi, is it possible to make a Woocommerce tutorial?

  38. What's the homepage ext you are using?

  39. Love the video but using Astra Theme with Elementor will make this a breeze. You’ll be done in a day. Save your website offline with Duplicator. Clone and edit when you’re building a new project

  40. abdallah badra

    this a great tutorial to learn how to develop WordPress theme the easy way. Adrian i really appreciated if you make a video about WordPress plugin development

  41. Hii Adrian, my npm install code doesn't work please help

  42. Hi Adrian, thank you soooooooooooooo much for makign this video.

    I myself am a software engineer mainly dedicated in JS frameworks but really learnt a lot from this video. I have already subscribed to your channel and am going to keep watching all the series in your channel. Thanks again for your excellent video tutorial. Keep up the good work!!

  43. Hi Adrian Twarog,
    Let me get a support from you.
    Could you please give me your email ID. ?

  44. Can you share the boiler plate integrated with gulp and babel and webpack

  45. Way way too fast!

  46. Natalia Bubiak

    "gulp watch" command is not working, I've got gulp installed though. I've got an error: "No gulpfile found". Has anyone had this problem?
    Also my file _theme.scss is not working. How to connect it with template-home.php?

  47. Maleza Geofrey

    All done as you said. Powerful tutorial and straightforward. Welldone

  48. Saeed AL-Abbar

    Learned a lot thanks.

  49. DUDE! You're the best. Thanks so much for this. They should call it Gator-Age instead of Gatorade. Cheers lad

  50. great tutorial !!!! when I try to modify a variable and writes "gulp watch" it says this command is not recognized. I've install node.js and gulp but it's been impossible to modify the primary color yet. Does anyone had the same problem and found a solution for this ?
    thanks

  51. Thank you!!!

  52. you are a great instructor. I have been following you content on your channel and also on guess lecture on the traversal channel as well. a happy subscriber

  53. farhan choudury

    woocomerce customize shop page using php,please bro make it for one video please,i need to change product design hover effect change

  54. my theme name won't change automatically when I edit my style.css comments in VS Code editor. I am forced to do that in my WP dashboard under Appearance > Themes Editor > style.css….only then my theme name changes… is my setup wrong? I use XAMPP and also have node.js and npm installed

  55. Hi Adrian, ive seen alot of tutorials in my time being a web developer myself…I must say, the way you explain stuff is fantastic (Although you are a little quick) lol….your website moshi moshi marketing loads super quick, are you on nginx?

    Fantastic showing the different techniques……..Well done that man!

  56. Not even using Tailwind ?

  57. Rommel Philip Afurong

    you know what sire.. this video is amazing and superb when it comes to frontend designing but i am thinking that the title of this video is kind of a bit misleading, coz for me, when you say development? first thing that comes to my mind is the backend,, is it just me? anyone? or can I suggest sire Adrian that he change this title to "Wordpress Theme Frontend Designing Development Tutorial 2020"? But overall Sire Adrian, this is still informational and excellent so keep it up! Another satisfied subscriber here.. Happy Coding =)

  58. Where is PSD or XD Ui Link?

  59. amazing work, thank you so much, do you have continuing tutorial for about us page and contact us page , I see you included them as section, how I include them as pages

  60. Thomas Vermette

    Hey, really great video I was wondering whats your opinion on page builders compared to hard coding in 2020? Many youtuber make easy page builder videos, but they often are buggy and break, what would your go to tools be to make websites for small business( right now im using WordPress from starch and using my own html and css with their plugins) ?
    Thank you very much

  61. using node-v12.18.3-x64. after npm install, gulp watch doesn't work
    Error Message is as follows
    "gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or
    if a path was included, verify that the path is correct and try again.
    At line:1 char:1
    + gulp watch
    + ~~~~
    + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException"

    What could be the problem ?? Can you help please??

  62. Александр Мурышкин

    Hi, Adrian! Thank you a lot for the perfect content. You made my day! Besides, can you please tell which VS Code theme do you use? I spent about an hour, but couldn't find it XD

  63. Do I have to learn PHP before WordPress?

  64. Muhammad Asyraf

    how to create host file?

  65. 9c Arsenal Gaming

    hi
    can u please tell me which extensions you use in vsc for color pick & auto complete tag ect.

  66. Aliakbar Chimthanawala

    hi
    would like to know your opinion on web designs for future marketplace..

  67. shafiqul islam sohel

    I trying to watch but was to no avail. I used "npx watch" , "gulp watch". plz help me

  68. Hi
    Nice Job ,
    Please keep tutorial about develop custom WordPress theme , Thanks

  69. Hey, I am trying to follow this (and it is a little bit fast), and I do run into some errors (due to typos and/or omission, etc.) would it be possible to have the source as a reference for troubleshooting? It would be easier to find mistakes and also it would be easier to follow (I am not looking to simply copy & paste, I am actually trying to learn something)

  70. Hi there, Could you advice me how can I find the database user name and password. I am using a Mac.

  71. panagiotis koligas

    i love your video!i have a question for you:so understrap is an uploadable theme? can i upload it on my server and use it to create a wp website?thanks

  72. Chinomso Johnson

    It doesn't work. I get stuck on gulp watch. I have tried npx gulp watch and gulp watch and it gets stuck on starting. So many other people also have the same problems. Gulp is also installed globally. Nice tutorial but you can't follow through.

  73. I would like to do this tutorial. Unfortunately you added a "host" folder, didn't show us what was in the folder, edited one file and it works for you. But it won't work for me. I've tried editing my hosts in /system32, but it does not help me view the page locally when i go to "backbeach.localhost"

  74. Hey Sir #AdrianTwarog, Would you please kindly share the XD file if possible?
    Thank you so much!

  75. Please create an ecommerce WordPress website using php

  76. Hello Adrian , thank you so much , your long videos courses are extremly powerful when it comes to quickly learn something…please keep providing a ton of videos similar to this one ! best.. ( ps : please less music sound level if possible to let us focus deeply with your explanations , sorry and thank you )

  77. Michaela Decamara

    Hi, I'm really enjoying this tutorial, and everything seemed to go easy, but at the end of setting up $lg responsiveness, my toggle menu button stopped working. I click on it and nothing happens. But it was working before. When I try to google, its just showing me solutions for bootstrap, not wordpress. I went back and re-watched it multiple times and seem to have everything the same way as you do. Any way of making the repo available or just the code snippet up to that point? around 1 hour and 8 minutes. Thanks

  78. Ruwan Jayarathne

    Thanks

  79. What to know before starting this video?
    I know html, css, js and bootstrap.

  80. Miguel Trujillo Fotografia

    Excellent video content! Sorry for the intrusion, I would love your thoughts. Have you considered – Tansaiah Voiceless Transcendence (erm, check it on google should be there)? It is a good one of a kind guide for getting free online traffic and make money minus the hard work. Ive heard some great things about it and my good mate called Gray after many years got cool success with it.

  81. Gursimran Singh

    Please make it dynamic. 90% code is html,css and JS. No dynamic content that will come from backend.

  82. I'm using local sites , do I still need to change the code in the host file or can I just upload the folder? Also where would I find that host file. Thanks

  83. Michael Allmis

    Hello, I think the tutorial is fantastic, but it is not yet clear to me how a person / company can adapt the texts if one writes the text in the .php files and does not do it with, for example, WPBakery. Hope you understand what i mean.

  84. I started watching, but got confused. You seem to refer to yourself in the plural; is there some reason for that?

  85. npm doesn't work for me. I get this npm : The term 'npm' is not recognized as the name of a cmdlet, function,

    script file, or operable program. Check the spelling of the name, or if a path

    was included, verify that the path is correct and try again.

    Bit confused at to what I'm meant to do

  86. ROHAN Mathew Alex

    where can i get host file , i am completely beginner

  87. Mohammad Muslem Uddin

    Your tutorial is awesome but webpack creates problem.but I can't solve it

  88. How to use wenpack in wordpress theme development?

  89. Cool stuff, but sometimes I feel like you don't explain every little thing you do haha, you just do it quickly and move on

  90. I'm considering starting a career in WordPress development, but I'm a little worried about the job outlook. Do WordPress developers even code anymore or can the entire website be easily built using page builders? Will there be a need for WordPress developers in ten years? Twenty years? Lastly, do WordPress developers often have to customize themes and plugins? Any advice would be appreciated.

  91. how to create host file?

  92. WordPress Form Builder plugin at $5.

    We recently build a WordPress drag and drop form builder, with a modern user interface. The builder has a built-in style editor where you can design the form without any coding.
    Key Features are:
    Drag and Drop
    Responsive Form
    Built-in Style Editor
    Conditional Logic
    Conditional Integration
    Lead Management
    17 Field Types
    13 Integration
    Join our Black Friday sale and get the plugin only at USD 5.
    https://bitpress.pro/

  93. Modhu Sudon Biswas

    Black Friday is Coming on November 27, 2020. Get upto 60% discounts on Theme Forest Products like WordPress Premium Themes Purchase.For more details, Click Here: 1.envato.market/RxNVb

  94. Could you make with only ACF?

  95. how to create virtual host?

  96. Syed Abbas Ali Shah

    Subscribed!

  97. So I'm following along and I haven't finished everything yet, but at the moment I have made the template and I'm creating my own banner and editing the nav and everything. I'm noticing because of removing what you did earlier has caused the loss of the functionality of using blocks in WordPress editor as nothing typed in there affects the page now unless its just edited in the theme editor. Do you address this later in the video and if you do can you point me in that direction?

    Sorry for long-winded question. Still learning. I appreciate the video in general. So far it's been pretty helpful

  98. Make a site using ACF, CPT, Shortcode & contact form/gravity form

  99. Maarten Gruson

    Exactly what I needed! Thanks! I have one question, I downloaded an Enfold Theme. But there is no option to upload it in my WordPress account. Can someone help me with this?

  100. Hello Adrian! I am new hhear and I do sub and like your videos. Can you do tutorial how to do programming lesson from scratch and what are the structures and meaning of it. THanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *