• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

virusword.com

Learn Wordpress

  • Home
  • WordPress Shop
    • Fotopress
    • SEO Tool Kit
    • Social Contact
    • Tag Machine 2
    • Video Profits
  • Latest News
  • WordPress
    • Plugins
    • Themes
    • Tutorials
    • Videos
    • Woocommerce
  • About Us
  • Contact Us
    • Terms of Service
    • Privacy Policy
  • Show Search
Hide Search
Home/Videos/How to make a custom WordPress theme from scratch

How to make a custom WordPress theme from scratch



How to make a custom WordPress theme from scratch

We create a WordPress theme from scratch by building it from a basic design. The whole process from installing WordPress to setting up a theme template and getting it up and running will be covered. This also has woocommerce and eCommerce aspects which I will also cover while we build the HTML, CSS and JS.

00:00:00 – Introduction
00:02:00 – Installing WordPress and our Custom Theme
00:10:30 – Setting up the WordPress Website Folders and Menus
00:15:50 – Header
01:05:04 – Home Call to Action
01:29:55 – Home Banner
01:49:40 – Home Special Offer
02:14:40 – Home WooCommerce Products
02:53:30 – Home Section Circles
03:07:36 – Home Testimonials
03:12:39 – Home Footer Contact Form
03:31:55 – Internal WordPress Page
03:53:33 – Blog Post News Items
04:17:30 – Contact Us Page
04:30:20 – Blog Categories
04:58:45 – WooCommerce Setup
05:13:05 – WooCommerce Product
05:58:12 – WooCommerce Variation Product
06:16:00 – Custom JS Product Variation lookup
07:20:13 – Home Dynamic WooCommerce Product Listing
07:31:35 – Header Dynamic Ecommerce Lookup Listing
08:52:30 – Conclusion

Figma Design UI Files and Assets:
https://www.figma.com/file/Qeah95CxhSqU5DQHxdpZQC/How-to-make-a-custom-WordPress-theme-from-scratch?node-id=0%3A1
https://drive.google.com/file/d/1HlA4aMPpq356WWw4XtwfYRCdZuKbdhhh/view?usp=sharing

This was only part 1 for this WordPress eCommerce Website design. In part 2, where we customise other aspects of this website including the Cart and Checkout Pages!

Part 1: https://youtu.be/cLhnubqavDg
Part 2: https://youtu.be/fxaeY0J5pTw
Part 3: https://youtu.be/WC4v4EjkUGk
Part 4: https://youtu.be/8TOIZVLCZiE

This WordPress tutorial will also be covering some of the javascript and PHP elements that help you know how to make a website with basic programming and coding. If you enjoy web design tutorials and looking for WordPress for beginners videos like this, these are part of a series I do about how to create a WordPress website and do WordPress theme installation, and you can check out some of the other playlists on my channel.

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 #tutorial

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

source

Written by:
Abdul Wahid
Published on:
February 13, 2021

Categories: VideosTags: coding, create a wordpress website, css, how to create a custom wordpress theme - full course, how to make a custom wordpress theme, how to make a custom wordpress theme from scratch, how to make a custom wordpress website, how to make a website, html, javascript, php, programming, responsive website, tutorial, web design, wordpress, wordpress ecommerce theme development tutorial, wordpress for beginners, wordpress theme installation, wordpress themes, wordpress tutorial, wordpress video, wordpress website

Reader Interactions

Comments

  1. Adrian Twarog

    February 13, 2021 at 10:39 am

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

    February 13, 2021 at 10:39 am

    hi Adrian
    im from iran

    this video is exactly what i need for my developing time
    tnx alot

    plz speak a little more slower in videos

  3. Milan

    February 13, 2021 at 10:39 am

    Thank you for this! So to make the whole site dynamic we could use ACF and Custom Post Types?

  4. Nikhil Joshi

    February 13, 2021 at 10:39 am

    Amazing video bro, keep up with the good work!

  5. Raymond Quezada

    February 13, 2021 at 10:39 am

    Hey Adrian, I am not sure what I am doing wrong. I had trouble with another project as well. I followed every step even downloaded wamp, I was using laragon before which is easier to get started on wordpress. Where I get stuck on is the Gulp Watch. For some reason that does not work anymore. I looked in forums and I havent found an answer.

  6. Beniamin

    February 13, 2021 at 10:39 am

    Why you dont use elementor to build that page? Its easy and fast to build.

  7. Greg Waugh

    February 13, 2021 at 10:39 am

    Subbed, liked, saved, about to rip for later. You are Wicked bro

  8. Greg Waugh

    February 13, 2021 at 10:39 am

    They don't even teach this in University. 9 hours man. Holy crap. Why would anyone go to Uni and pay for their ancient technology when this type of stuff is on the Tube.

  9. Daniel Morales

    February 13, 2021 at 10:39 am

    Can I use any theme?

  10. OhMyGusion

    February 13, 2021 at 10:39 am

    Quick newbie question. does creating WP themes from scratch or Custom WP theme from scratch have a better website speed than WP builders like DIVI, Elementor etc?

  11. Vuk Janjus

    February 13, 2021 at 10:39 am

    Looking forward to start the tutorial, just to ask do you use Gulp here? Just to know what to expect since I had much trouble with setting it up before. Also, 2 minutes in and I see you are using custom builder – I thought this tutorial is about creating custom tools, not just how to use already made custom tools.

  12. Ael Far

    February 13, 2021 at 10:39 am

    1 hour into the tutorial and I've just started to try to understand my phobia against php and WordPress. Sending lots of love for this great teacher!

  13. NotGraal

    February 13, 2021 at 10:39 am

    So I try and follow this, and when I save my header file and load the page, it shows the blue color. I checked the theme variables stuff it's all right. I am doing this on a webserver, not on my local machine so im not using gulp, is that important?

  14. منوعات monoaat

    February 13, 2021 at 10:39 am

    I don't have any experience in html and css is this video help me learn all things

  15. Spak Santonil

    February 13, 2021 at 10:39 am

    Hi, help..I just restarted my pc and the scss is not working, did also the npm gulp watch

  16. nat asha

    February 13, 2021 at 10:39 am

    9h! cool! but i m lost after 5min lol

  17. A

    February 13, 2021 at 10:39 am

    Hey, how does your website auto reload on save. The readme for understrap mentions you have to configure browser sync and run gulp watch-bs for it to work, but you just used gulp watch?

  18. Brahim Verasque

    February 13, 2021 at 10:39 am

    Lol i didnt get any further than 8 minutes into the video. Looks like a great tutorial but im having trouble with the npm gulp watch thing. As it gives some error. Which after. 1. Day searching on the internet still couldnt fix the problem 😀

  19. Derek Wanjala

    February 13, 2021 at 10:39 am

    Started on the tutorial, but got stuck with the database error “Error establishing a database connection” any help?

  20. Lutfur Bary Toha

    February 13, 2021 at 10:39 am

    adrian Twarog great tutorial can you provide the html and css tutorial for this theme

  21. MD TV

    February 13, 2021 at 10:39 am

    hello i liked the video , but can you explain me of where i get the host file in the begining i don't have host file . please help me

  22. Hamza Rivera

    February 13, 2021 at 10:39 am

    You are a god of wordpress. Im one of your worshipper my lord

  23. Fat mao

    February 13, 2021 at 10:39 am

    8 hours… really respect !!!

  24. Darija Vukovic

    February 13, 2021 at 10:39 am

    Thank you

  25. Gazi Moshiul

    February 13, 2021 at 10:39 am

    It will be great helpful if you give a complete A to Z theme development and submission for themeforest market palace. You are so great I am practicing your previous tuts on WP theme from scratch. Thanks

  26. Gazi Moshiul

    February 13, 2021 at 10:39 am

    This is so so helpful tutorial for a WordPress theme developer. I have been looking for a course like this for a long time. Thank you so much Adrian. I am practicing following your tutorial. Want more advanced video tutorial about WordPress from you Adrian.

Primary Sidebar

Wordpress

  • Content Management Systems (2)
  • Digital Marketing (4)
  • Internet Marketing (6)
  • Latest News (458)
  • Online Business (2)
  • Plugins (519)
  • Themes (521)
  • Videos (1,350)
  • Website Development (1)
  • Woocommerce (589)
  • WordPress (6)

Recent Articles

Unlock Your Internet Marketing Success with WordPress: The Ultimate CMS for Achieving Online Goals

WordPress: A Powerhouse for Achieving Internet …

Continue Reading about Unlock Your Internet Marketing Success with WordPress: The Ultimate CMS for Achieving Online Goals

Unlock Your Internet Marketing Potential with WordPress: A Comprehensive Guide

How to Use WordPress to Achieve Your Internet …

Continue Reading about Unlock Your Internet Marketing Potential with WordPress: A Comprehensive Guide

Search our site

Explore more

Get our Wordpress Guide Get Plugins Get Connected

Footer

VirusWord by Promaps, Inc.

Barnes Place
Colombo 7, Western 00700

Copyright © 2025 · Promaps, Inc.

Keep In Touch

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter