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: https://github.com/wilsmex/blog-site-template

🎥 Course from Andrew Wilson. Check out his YouTube channel: https://youtube.com/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: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

43 Comments

  1. Hello, I hope this could help, if you want to add the style to the anchor element, just go to the main.js file inside assets > js folder then add this line of code

    const LeftSideMenus = document.querySelectorAll(".nav-item a");

    LeftSideMenus.forEach(el=>el.classList.add("nav-link"));

  2. if you still wondering why my css not loaded in 20:53
    you can try copy paste the content of css file from `blog-site-template/css/style.css` to `/style.css` then in front-page.php link the css with `wordpress/wp-content/themes/<your template>/style.css`

  3. Very helpful! Thanks a lot. I do have one question, however. How can I enable the Live-Updates? I can't seem to find anything on YouTube or Google to help me out with this.

    This really helped me out, as I am usually just a Web Designer, I can only code in HTML and CSS, but this was a great way to kickstart my workflow on customers projects.

  4. Sadly, when I add register_styles function() with wp_enqueue_style in functions.php file my styles still don't load.
    I did put wp_head(); in front-page.php file, and did all the steps Andrew spoke about.

    I'm using a local server via XAMP on Windows 10.

    I've tried to search for help online, but none of the answers I've found did help.

    Does anyone know how to deal with that problem?

  5. How are you getting all of these themes to auto save? I had to zip the folder and upload it to wordpress for it to recognize the theme. Its almost like you have your theme running on a live server where wordpress is constantly reading your file.

  6. i have a note. pls. zoom in when you show menus. when watching on phone or 27’ screen is hard to read the text on the menu.
    its hard to follow. i can see you investing in creating high level quality videos. thx for that. the L side of the screen will be easy to fix on the next videos.

    keep up the great work.

  7. Hi sir

    most of the learners need a tutorial for this keywords " 🌍how to show user live location in our word-press website🌎 " in text format on the top navigation bar or anything places like alert window etc.."

    this tutorial its very helpful for us we are waiting for tutorial

    thank you .🤝

  8. I'm having a bit of a difficulty. My question is probably way out of the scope of this comment section, but when I try to pass my head links into the function php file, it doesn't get rendered. I'm wondering if I've made a mistake in the language or if my setup isn't quite right. It's a real struggle knowing where to start. I did start with the documentation, but even then, it's still a bit of a struggle. If anyone can offer help or suggestions, I'd be grateful.

  9. Many thanks for the awesome insights you share. Outstanding. I look forward to the next video – it would be great if you come with more videos – egl Full-site-editing or some other future – topics.
    in one month ( january 22 ) WP 5.9 is expected to get released with a bunch of new features.

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

  11. there great 4 hour php video on here i just finished. take notes. type stamp as you go captions on. coding just typing in and understanding exactly what computer will do line by line as program runs throw your code. breaks, true or false. you just add the conditions with key words. python 10 download comes with jupiter notebook. python coarse 10 hours and front end coarse. take it slow

  12. Hey everyone, if you do a custom theme on WP for a client, will they be able to edit the content by themselves? That is editing texts and adding/changing pictures and updating the blog page. What do you think is the best option; create an account for them and edit the page on it or create it on your own account and transfer the page afterwards?

Leave A Reply

Please enter your comment!
Please enter your name here