[ Kinh nghiệm wordpress ]

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:

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!

#wordpress #theme #development

Learn Design for Developers!
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI:

Feel free to follow me on:
🐦 Twitter:
💬 Discord:
💸 Patreon:

Software & Discounts:
🚾 Webflow:
🌿 Envato:
🌿 Envato Elements:
🔴 Elementor:
✖ Editor X:

Computer Gear:
⬛ Monitor:
⌨ Keyboard:
🐁 Mouse:
🎤 Mic:
📱 Tablet:
💡 Lighting:
💡 Key Lighting:

Camera Equipment:
📷 Camera:
📸 Primary Lens:
📸 Secondary Lens:
🎥 Secondary Camera:
🎙 Camera Mic:
🎞 USB to HDMI:

Nguồn: https://grenadesandwich.com/

Xem thêm: https://grenadesandwich.com/kinh-nghiem-wordpress/

Tags: ,,,,,,,,,,,,,,,,,,,,,

Adrian Twarog

48 Bình luận

  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. Hello Adrian, good tutorial, I have a question, designing in this way does not harm if there are updates in the plugins, for example, because in general it is always recommended to use child themes… greetings and thanks again

  3. super cool tutorial, pero quedaron dudas de como se incorporan los post, woocomerce, etc en este diseño nuevo..!! saludos y gracias

  4. This Frame Work is a trash. It not working properly

  5. Hello, do you include gutenberg editor in theme?

  6. Hi, can you please tell me that how to build demo import feature in custom theme development of WordPress??
    Please if anyone knows about that, let me know the procedure. Thanks

  7. My page attributes are not showing page tamplates

  8. Hay Adrian, thank you for this video .
    How about the new update for understrap
    How can I add styling to understrap theme?
    I need first to install npm
    npm install
    and after that
    npm run watch ??

    there is something missing its not working with me.

    we need an update for this useful course

  9. Awesome content man!!

  10. Thank you for a greet video! 🙂
    i run with node.js (npm run watch)

    I did encounter an issue – theme.scss file is being compiled every time i save it, is see the result in theme.css

    but it looks like it is never included in the theme at the front site dosnt load it or reflect any of the changes i make
    do you have any idea why ?

  11. Hi and good day dear Adrian, thank you for the great support. Thank you for the Video that covers the Theme development.

    Well – right now – one week before Version 5.9 is landing,
    You could come up with a new video that covers all the great topics that me ( and many many other wordpress-users from all over the globe) – well i guess that all WordPress user are interested in Gutenberg, Full-Site-Editing (FSE), Block-Theme, Query-Loop and lots of others.

    i would love to see more videos from you. Keep up the great work

  12. Please explain installing database and vscode in beginning of WordPress installation

  13. I am unable to run gulp watch please guide me

  14. Awesome explanation! Thank you sooo much!!!)

  15. can i follow this tutorial without gulp watch as it is not working for me for both understrap and picostrap?

  16. Great work, How do I access the host file?

  17. Understrap is flagged as virus on my windows, any reason why that is?

  18. Incredible !! 👏👏

  19. A lot of hard-coding…

  20. Hi Adrian, great work. I know enough to build a theme but I guess I need to know the best practices. Thanks for the videos. When do you have part 3 and specifically be interested to know the reserve a table section. Best from UK.

  21. Hi Adrian! Thanks for the nice huge video, very well done! However I have found few things are missing here. I was watching this twice and can't find when you added the BACK TO TOP button, did you forgot about it? I wanted only to see how you implement a functionality of this button as this need to be in JS i guess.
    Also you said you will be also building rest of the pages in next video which is not exist. Is there any content related to this video that I can't find?
    May thanks for a great work!

  22. Sir., can u please tell me which application you use for take styling of those website screenshots.. It's really helpful for me

  23. 4:24 – When should I use the Uderstrap child theme?

  24. Where did you get the host file? I used the similar hosts file like you. BUt it doesn't work. Are you using Xampp? or mamp?

  25. It doesn't work the way you are showing

  26. translate plase

  27. I cannot find the files in github

  28. so is this a parent theme or a child theme?

  29. after "npm install" the gulp dependencies was not installed, what went wrong? Please help Adrian… and I cant find the gulpfile.js as well

  30. Incrível! Pelo processo de tradução da imagem conceito ao código, eu aprendo mais aqui do que jamais aprendi! Por favor continue inspirando os frontend iniciantes !! Obrigado.

  31. Great tutorial… and lovely design! Do you have a link for the completed files please?

  32. thank you for the awesome tutorial! Where can we get the image files for this tutorial? kind regards, Peter

  33. this video is hard to follow, i will rate it later on tho for fairness

  34. How do you get a popup window (Chrome developer popup window) ???? Love from India💛💛💛💛

  35. Is that XD to HTML or WordPress Theme Development, very confused?

  36. In this tutorial , are your creating this site using react js???

  37. Yo Adrian, I'm trying to start the gulp file, I did the npm install and when I write gulp watch I get Starting 'watch'… and it's stuck.

    Can you help me?

  38. How to remove node modules

  39. Hi Adrian ! I tried to put a background image but it doesn't work at all. Even when I change the color background I can't see the changement. How can I resolve this issue ?

  40. Is this tutorial good for beginner who doesn’t know much of programming basics. Would u recommend me to learn programming language first or u got it all covered in this video?

  41. thank you sir, god bless you for your awesome tutorial

  42. That's insanely impressive, but what's the use of doing that? The builders does the same thing in minutes. And yes, they talk about Google page speed, but many websites don't require SEO, and also, page speed is only one of multiple ranking parameters. Additionally, if you build a site like this and you lose your webmaster, it will cost you significantly more to maintain and fix than a regular wordpress site that every body and their dog can work on. So what is the true benefit of this type of building strategy?

  43. Hi Adrin! Thanks for this valuable tutorial. is javascript necessary for wordpress theme development or learning php is enough?

  44. Very clear and informative video … thanks ..❤

  45. Love this stuff.

  46. I was checking the documentation and the templates that this theme is made of, a hero widget all ready exist, why don't you use this feature instead of making a hero section from scratch? can you explain please?, i am a beginner.

  47. whare to i find host file please tell mn

  48. I got a gem… Thanks man

Trả lời

Email của bạn sẽ không được hiển thị công khai.