How to Create a Custom WordPress Theme - Full Course

Sdílet
Vložit
  • čas přidán 4. 07. 2024
  • Learn how to create a custom WordPress theme. You will learn a process that you can use to convert any HTML/CSS template into a WordPress theme.
    🔗 HTML/CSS template: github.com/wilsmex/blog-site-...
    🎥 Course from Andrew Wilson. Check out his CZcams channel: / followandrew
    ⭐️ Course Contents ⭐️
    ⌨️ (00:00) Introduction
    ⌨️ (00:51) Responsive Template Overview
    ⌨️ (04:28) WordPress Theme Structure & Location
    ⌨️ (05:51) Create Required Empty Files / Folders for Theme
    ⌨️ (12:39) Create Theme Screenshot.png file
    ⌨️ (13:05) WordPress Template Hierarchy
    ⌨️ (14:50) Setting up Style.css File Required Information
    ⌨️ (17:10) Activating the New Theme
    ⌨️ (18:41) Create Theme Home Page Template
    ⌨️ (21:50) Enqueue Styles
    ⌨️ (25:55) Add wp_head() to Head Section
    ⌨️ (33:30) Enqueue Scripts
    ⌨️ (35:02) Add wp_footer() to Foot Section
    ⌨️ (41:25) Create header.php & footer.php Files
    ⌨️ (44:41) Add Dynamic Page Titles
    ⌨️ (48:63) WordPress Auto Thumbnail Sizes
    ⌨️ (50:50) Create Home Page in WordPress Admin Panel
    ⌨️ (53:20) The WordPress Loop
    ⌨️ (56:24) Dynamic Page Title Heading
    ⌨️ (58:01) Create WordPress Menu Area
    ⌨️ (01:03:36) Dynamic Menus
    ⌨️ (01:16:16) Customize Site Logo Upload & Name
    ⌨️ (01:25:12) Add WordPress Posts in Admin Panel
    ⌨️ (01:07:11) Add Feature Image Thumbnail Support
    ⌨️ (01:29:06) Create Single Post Template File
    ⌨️ (01:33:52) Add Post Meta Data
    ⌨️ (01:40:39) Comments & Comments Templates
    ⌨️ (01:53:45) Post Archives Page Templates
    ⌨️ (01:57:34) Blog Archive & index.php Templates
    ⌨️ (02:03:39) Post Thumbnails
    ⌨️ (02:07:16) Pagination Links
    ⌨️ (02:10:10) Page Template File
    ⌨️ (02:25:37) 404 Template (Page Not Found)
    ⌨️ (02:28:50) Add Searching
    ⌨️ (02:30:50) A Few Extras and Where to Go
    --
    Learn to code for free and get a developer job: www.freecodecamp.org
    Read hundreds of articles on programming: freecodecamp.org/news

Komentáře • 736

  • @jinks908
    @jinks908 Před rokem +111

    It's unbelievable that this kind of content is available for free. We honestly have no excuse for not learning whatever it is we want. Thank you so much Andrew and thanks to the channel for providing such amazing material. Subscriber for life. 👍

    • @sergiu2325
      @sergiu2325 Před 10 měsíci +2

      This is exactly what I thought.

    • @SHARAFx16
      @SHARAFx16 Před 5 měsíci

      agreed

    • @FollowAndrew
      @FollowAndrew Před 2 měsíci +1

      You're welcome! There truly is tens of thousands of dollars worth of knowledge/content packed into this video!

  • @Jennifooclay
    @Jennifooclay Před 3 lety +179

    Finally a real custom theme development tutorial, I think i've searched CZcams for one like this for almost 2-3 years and have not found one that didn't spend most of the time installing an existing theme, and other surface level stuff like only HTML and CSS. I had also spent 3 months in a bootcamp and they didn't cover anything to do with CMS and barely scratched PHP. Thank you for this!

  • @nextrie
    @nextrie Před 4 lety +190

    This is the gold content we've all wanted for a long time. Thank you for this WordPress tutorial. So many channels talk about top-level WP stuff, but not about developing a custom theme from an HTML template.

    • @FollowAndrew
      @FollowAndrew Před 4 lety +13

      Thanks, developing WordPress themes definitely has quite a few quirks, but this should be a good guide on getting started!

    • @WEBDEVIndo
      @WEBDEVIndo Před 3 lety

      You are right nextTRIE. This channel very recommended

    • @christianpuchner6520
      @christianpuchner6520 Před 3 lety +2

      I am just starting to watch and already know that this is gold

  • @sanathkumar6526
    @sanathkumar6526 Před 4 lety +34

    Honestly, my fav channel on CZcams

  • @JP-ps8fb
    @JP-ps8fb Před 4 lety +119

    The hook at 47:00 is not 'after_theme_setup', it's 'after_setup_theme' for anyone who had trouble getting the title tag to print.

    • @adiljamshad215
      @adiljamshad215 Před 3 lety +10

      It really saddens me that Andrew did not mention this little mistake. He did change "after_theme_setup" to "after_setup_theme". But he did not mention in video.

    • @charlie-george
      @charlie-george Před 3 lety

      @@adiljamshad215 How did he get his working with the incorrect spelling?

    • @adiljamshad215
      @adiljamshad215 Před 3 lety +2

      @@charlie-george of course, I couldn't make it work with incorrect hook. I searched on google about this issue and found similar issue on stackflow. Then I rectified the issue and it started working!

    • @charlie-george
      @charlie-george Před 3 lety +4

      @@adiljamshad215 Good work mate. That's the strength of us devs. We encounter problems like this, inevitably, but it's our ability to problem-solve that makes us most valuable.

    • @travisantoniello
      @travisantoniello Před 3 lety +1

      Glad this is only a couple of comments down, cheers

  • @mattlarsen
    @mattlarsen Před 11 měsíci +7

    This was my first introduction to converting an HTML template into a working CMS and it was amazing. The pacing was perfect and each module was simple enough to follow along. With WordPress changes, I experienced a few small differences between my WordPress behavior and the tutorial, but these were easy to surmount and the code is still fresh and relevant.

  • @marklsimonson
    @marklsimonson Před 5 měsíci +4

    This is exactly what I needed. I switched a personal site of mine to WP a few years ago for technical reasons, but was stumped on how to get the design I'd developed over many years adapted as a WP theme. I gave up and went with something serviceable but completely lacking in the look and feel I wanted. I'm nearly finished now with adapting my original site design to WP, thanks to your clear and concise explanations.

  • @jeremywallis3867
    @jeremywallis3867 Před 3 lety +6

    Thanks for making the tutorial. I have just finished it. As usual with these things, where things didn't initially work or where I got lost in an explanation or section of code, it provided an opportunity to get Googling and hence develop a more in depth understanding. One thing I battled to understand was the overall layout of the page which, initially, I just assumed you had done with a grid layout. But later I realised you hadn't done that and had relied on the side bar using position: fixed to take it out of the usual page flow and then position: sticky for the page title area. Again, the confusion cleared after some Googling and my knowledge increased a bit! Thank you for taking the time to do this :-)

  • @ds2556
    @ds2556 Před 2 lety +5

    Out of the dozens of courses I've done for various web development related learning you by far are my favorite teacher!

  • @muneebmukhthar4880
    @muneebmukhthar4880 Před 3 lety +2

    This is the best WordPress tutorial I ever found!. Thanks, Andrew for making it.

  • @Nartek01
    @Nartek01 Před 3 lety +6

    DONE! Ran the whole course from 3pm to 12:20am, I was slacking in school when we were going through CMS theme development, and then on the internship I was teached how to use ACF + Gutenberg Blocks and realize that I didn't even know what hooks were. This course was very helpful for me and will show it too my peers.

  • @kaioganso
    @kaioganso Před 2 lety +7

    Best dev tutorial I've ever seen, I was a total wordpress theme noob comming in and I'm leaving very confident and with a very clear vision on how it all works. Thanks a lot, god bless.

    • @fabestcoder
      @fabestcoder Před 2 lety

      Watch More- #FabestCoder

    • @asthaneupane2514
      @asthaneupane2514 Před rokem

      How would you create other pages, such as Gallery, About, History / Timelines?

  • @MetalGinger
    @MetalGinger Před rokem +1

    This tutorial has been GREAT! Best resource I've come across on CZcams with creating custom themes. Thank you!

  • @thescribblersdiary
    @thescribblersdiary Před 16 dny

    Literally! A Masterpiece. Very well crafted. Watching it after 4 years for my prep and its wonderfull 👏🏻👏🏻

  • @andreranulfo-dev8607
    @andreranulfo-dev8607 Před 2 lety

    I don't have the words to thank you. You just helped a simple guy put food in his table with your tutorial.

  • @manishsrivastava4698
    @manishsrivastava4698 Před 3 lety +1

    This is on of the best tutorial , at least I know from now.... where to start.Thanks a lot Andrew.

  • @user-di9px4oz5r
    @user-di9px4oz5r Před 11 měsíci

    Thank GOD, Finally the greatest tutorial I found. Better than many paid courses. Short and clear.

  • @lexerquine3008
    @lexerquine3008 Před rokem +1

    absolutely a gem! no error whatsoever and everything worked perfectly following step by step. thank you so much for your work and great video.

  • @deeppatel1123
    @deeppatel1123 Před rokem +13

    for those whose CSS on the page is not loading, you need to copy the content from the style.css located in the template folder to the style.css file which you created and wrote the comment. also in functions.php if the enqueue code in the video doesn't work for you try this :

  • @biolbam
    @biolbam Před 2 lety

    This tutorial is so good. it took me 2 days to follow along and learnt many core points of wp that i really wanted to know. Thank you!

  • @Brandamonium
    @Brandamonium Před 3 lety +2

    This is SOOOO helpful! Thank you. I learned a ton in a short amount of time.

  • @PLUS-sj4sf
    @PLUS-sj4sf Před 2 lety +2

    This tutorial was one of the best tutorials I have ever had for wordpress!! Thanx a million. I would appreciate if you post a tutorial regarding customizing and editing the backend and dashboard section, thank you!!!

  • @Rewolbebol
    @Rewolbebol Před 7 měsíci

    I just love how you explain everything in suck details, thank you !

  • @tonbii
    @tonbii Před měsícem

    Great tutorial. The best tutorial for Wordpress I have ever seen. Thank you, Andrew.

  • @rongdong1914
    @rongdong1914 Před 4 lety +1

    I learned too many things about web development from these tutorials. so many thanks

  • @hablen
    @hablen Před rokem

    This channel is the great online university I have ever seen! Thank you very much!

  • @arnab_d9
    @arnab_d9 Před 6 měsíci

    This is a great short and crisp turorial. This content is gem for beginners. Thank you so much!!

  • @quirkymarshmallow9324
    @quirkymarshmallow9324 Před 3 lety +1

    Hey Andrew,
    Really nice video! I do not know of any other course that cover theme development in such details.
    I learned new useful stuff that I didn't know, even though I have worked with WordPress before.
    Thank you for putting that much effort into the video.

  • @zulfiqaralikhan3227
    @zulfiqaralikhan3227 Před 2 lety +7

    Hello Sir, I completed your tutorial in three days with watching, pausing, practicing, and now I am very very familiar with the WordPress structure. Thank you for sharing your experience. I know how hard work you did in this long video. Thumbs up sir. Again thanks for giving back to the community... Love From Pakistan

  • @donbedwell2322
    @donbedwell2322 Před 4 lety +3

    This is exactly what I needed! Thank you thank you thank you!

  • @iotmadeez1192
    @iotmadeez1192 Před rokem +1

    This is truly GOLD class tutorial! Thanks a tonne Andrew for making Wordpress Themes Creation so simple for novices like me.

  • @hassanndamnjoya8632
    @hassanndamnjoya8632 Před 2 lety

    Just Amazing! The course is complete and I learnt a lot. Thanks so much

  • @erichepperlewp
    @erichepperlewp Před rokem

    Excellent tutorial! Love the step-by-step walkthrough

  • @vincentberlin1345
    @vincentberlin1345 Před 4 lety +1

    Excellent! I had been looking for such a detailed tutorial about mutating HTML/CSS into a WP site for some time.

  • @miyushanrodrigo3708
    @miyushanrodrigo3708 Před 2 lety

    Thank you Andrew. This is a great tutorial for beginners who like to learn WordPress theme developments.♥♥

  • @tattarrrrattat
    @tattarrrrattat Před 3 lety

    Great tutorial Andrew - keep 'em comin!

  • @mightydawnweb
    @mightydawnweb Před 6 měsíci

    This tutorial was fantastic! A really great start to theme-building! I'm excited to start building mine as I follow along. Thank you for all the work you put into this! Subscribed!

  • @StephanPetrequin
    @StephanPetrequin Před měsícem

    Thanks for providing a great tutorial! I have a friend who wants a much needed update to their site. Being a .net & next.js developer with no experience with Wordpress wasn't sure how to proceed. Thanks to your tutorial I'm getting the hang of Wordpress and already making great progress in navigating the old theme, and updating it with a new theme.

  • @err5634
    @err5634 Před rokem

    Thanks so much. This was so helpful for a WP newbie. Well presented and not rushed, so easy to follow.

  • @ed8623
    @ed8623 Před 3 lety +1

    thanks! i finished it and have a beautiful blog now

  • @japhethjay4880
    @japhethjay4880 Před rokem +1

    Amazing tutorial, I think like me most people might get confused somewhere, he doesn't say to copy the content of the css file into your stylesheet under the comments you create, or maybe I just didn't see that, I had to struggle with that until I just copied the content and it worked, hope this helps someone, thanks again for the tutorial though am watching 2 years later in 2023 hahaha.

  • @Thaulopi
    @Thaulopi Před 4 lety +2

    Thanks a million for taking your time and giving me such a good tutorial. Thank you Sir!

  • @jenearlyang7991
    @jenearlyang7991 Před 3 lety

    Thank you Andrew Wilson for this great tutorial. The video divided into chapters and showing what it should look like has helped me tremendously!

  • @Sp33nDy
    @Sp33nDy Před rokem

    Thank you for your video, it was very detailed and accessible.
    I'm using a translator to thank you for your video.
    Thank you so much, I had some issues with page output, but following your step-by-step instructions, everything worked out!

  • @wutever0
    @wutever0 Před 3 lety

    Quite a lot of effort you put there.. Thanks a lot Andrew! All the best

  • @LeoStephanou
    @LeoStephanou Před 3 lety

    Great video Andrew. Thank you.

  • @mikolots
    @mikolots Před rokem

    Thank you for taking the time to explain things clearly.

  • @georgesngandeu9115
    @georgesngandeu9115 Před 2 lety

    This dude is a wordpress god, very very well explained!!!!! Thank you fcc!!!!!! I am definitely supporting this project

  • @user-ct6fu3kz4h
    @user-ct6fu3kz4h Před rokem

    THAT WAS AWSOME!!! thank you thousand times

  • @patrickgeorgiev1350
    @patrickgeorgiev1350 Před 3 lety

    Great help for SEO on WordPress, I can understand how to customize stuff without any 3rd party plugins that create bloat, great work!

  • @stoonchee
    @stoonchee Před 3 lety

    Thank you so much! This is one superb structured tutorial!

  • @stefan_josch
    @stefan_josch Před rokem

    You are my hero. Great job! Best quality of video and content. Thank You!

  • @gilbertvasquez7913
    @gilbertvasquez7913 Před rokem

    I've done some basic PHP training and have worked with Wordpress and themes. This was a great tutorial to see how PHP ties into the functionality of themes. Cool stuff.

  • @raphaelcardosos
    @raphaelcardosos Před 3 lety

    omg thank you, i don't even have words... 🙏🏻👏🏻

  • @netti1294
    @netti1294 Před 3 lety +31

    Very great content! Many thanks for that! Andrew explains details and functionalities which helped me understand WordPress.
    Anyone else having trouble with the custom logo at 1:17:43 ?
    This code worked for me (so it maybe helps someone else too)
    function config_custom_logo() {
    add_theme_support( 'custom-logo' );
    }
    add_action( 'after_setup_theme' , 'config_custom_logo' );

  • @dabest5561
    @dabest5561 Před 4 lety

    Bro this is one of the best channels

  • @davaici
    @davaici Před 3 měsíci

    Thank you VERY MUCH for this AMAZING free content 🤩!

  • @YasminFilms
    @YasminFilms Před 9 měsíci +8

    A wonderful introduction to custom WordPress themes. Just as an FYI at around 47:00 he amends the 'title-tag' but doesn't mention he also changed 'after_theme_setup' to 'after_setup_theme' -- I spent far too long scratching my head over what I was doing wrong!

    • @gamersview7791
      @gamersview7791 Před 7 měsíci

      hello @YasminFilms want your help why my custom css file is not loaded. but adrew custom css file is loaded. i have done exactly what adrew did but still my custom css file is not loaded.

    • @carlholms8502
      @carlholms8502 Před 7 měsíci

      Thanks for pointing that out @YasminFilms :)

  • @Dylson
    @Dylson Před 5 měsíci

    Mate! Great beginner friendly tutorial on Wordpress! It's a great place to start and I learned quite a lot! Looking forward to adding this to the portfolio!

  • @yooujiin
    @yooujiin Před 2 lety

    This is exactly what I was searching for! Ty! Ty!

  • @jameshockless1484
    @jameshockless1484 Před rokem

    This video got me my dream job. Thanks andrew!

  • @lcm2588
    @lcm2588 Před 4 lety

    Thank you so much!!! what a great tutorial, you are a really good teacher!

  • @MissBoom135
    @MissBoom135 Před 2 lety +2

    Fantastic tutorial Andrew! Very informative and easy to follow along.

  • @user-tf7ut3hv7q
    @user-tf7ut3hv7q Před 3 lety

    Thank YOU very much. It is the best introduction to wordpress.

  • @MarianoFrias
    @MarianoFrias Před 4 měsíci

    Great tutorial! Very detailed and well explained! Round of aplause 👏👏

  • @SindyAnne
    @SindyAnne Před rokem

    Thank you for this tutorial! This is exactly how I learn and am able to wrap my head around thing once I am able to see it in action. :)

  • @AtifAli-re3io
    @AtifAli-re3io Před 4 lety

    Thank you so much Andrew :)

  • @albertmctorre4789
    @albertmctorre4789 Před 2 lety

    this was such a good tutorial. very helpful. i wish there was more!

  • @lostpianist
    @lostpianist Před 3 lety

    Awesome tutorial, thank you.

  • @_._lis_._
    @_._lis_._ Před 11 měsíci +1

    Awesome!
    Though this tutorial is not in-depth as the ones in boot-camps, I will highly recommend anyone who is going to go through a course/boot-camp. There are tons of info covered in a typical course hence it is very easy to be lost. Going through this tutorial first will help you to connect things. Approaching the course after this video makes it much understandable.

  • @jacquesgoudreau7594
    @jacquesgoudreau7594 Před 2 lety

    Excellent tutorial! Great Job! Super helpful...

  • @teclote
    @teclote Před 4 lety

    Amazing video, thank you. Very helpful.

  • @Mugge243
    @Mugge243 Před 3 lety +1

    Thank you so much for this course! I've disabled my adblock just to support you :D!!

  • @HollyFortenberryGC
    @HollyFortenberryGC Před rokem

    That was awesome! Thank you!

  • @ivanstrizhevski1330
    @ivanstrizhevski1330 Před 2 lety

    Thank you for a long time I was looking for a reliable hosting for the site!

  • @houssem1702
    @houssem1702 Před 3 lety

    Thank you So much Andrew

  • @xStormsnoutx
    @xStormsnoutx Před 2 lety

    Absolutly helpful! Thanks

  • @nimaneo3741
    @nimaneo3741 Před rokem

    thank you Andrew for making this useful video

  • @samruddhakalke469
    @samruddhakalke469 Před 2 lety

    Your videos are the best man.. Second time used it for building website.. Cool..Thank you for making such videos

  • @happykids3346
    @happykids3346 Před 2 lety

    Great Tutorial Thanks!

  • @user-hc7lk8gw4n
    @user-hc7lk8gw4n Před 2 lety

    Well that was probably all i needed to know to adjust stuff... Great video, thanks a lot!

  • @aliciaburga4211
    @aliciaburga4211 Před rokem

    Great tutorial, thank you!! 🙂

  • @n3x4r3
    @n3x4r3 Před 3 lety

    amazing video
    !!
    this helps me a lot!!

  • @mujibilla1749
    @mujibilla1749 Před rokem

    Hey you inspired me. Because I was learning more then 2 day evan I couldn't understand. You did what I need. Thank you 😊

  • @jane_jenny_jane9589
    @jane_jenny_jane9589 Před 3 lety

    This is amazing! thank you so much!!!!

  • @niksatan
    @niksatan Před 2 lety

    Dude thank you for this video! Finally some things explained!

  • @danielpomplun8315
    @danielpomplun8315 Před 3 lety

    Ty for the good explanation, very clear and easy to understand.

  • @yb4365
    @yb4365 Před 4 lety

    Thank you for making an awesome tutorial

  • @nassimREHALI
    @nassimREHALI Před 4 lety

    Thank you for the tutorials

  • @yogibangalore6206
    @yogibangalore6206 Před rokem

    super dooper smart teacher you are.. clearly explained..

  • @chesterleespencer5808
    @chesterleespencer5808 Před 2 lety

    Thank you for helping the society with the best stuff...

  • @followtariq
    @followtariq Před 3 měsíci

    Mind blowing instruction

  • @kunalnikam4403
    @kunalnikam4403 Před 3 lety

    Awesome explanation 👌🏻👌🏻❤

  • @DEBO5
    @DEBO5 Před 2 lety

    You are a legend for this

  • @nastasenicolae1505
    @nastasenicolae1505 Před 4 lety +2

    This tutorial is A+. Thank you very much for sharing!

  • @MarkCooperwriter
    @MarkCooperwriter Před rokem

    Thanks, this was a huge help!

  • @AM-dm9tg
    @AM-dm9tg Před 2 lety

    Thx for the amazing tutorial ❤❤

  • @nushi21
    @nushi21 Před 10 měsíci

    Thank you! great video

  • @timomuller1448
    @timomuller1448 Před 3 lety

    well explained, master!

  • @followtariq
    @followtariq Před 2 měsíci

    Geat. Excellent in one video. thanks a lot