[ Kinh nghiệm wordpress ]

How to Create a Custom WordPress Theme – Full Course



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:

🎥 Course from Andrew Wilson. Check out his YouTube channel:

⭐️ 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:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

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

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

freeCodeCamp.org

45 Bình luận

  1. Hey all, author here. Hope you learned a tip or two for WordPress themes! Join me at: http://www.youtube.com/FollowAndrew?s...

  2. @17:30 I can't find my theme on WordPress's appearance page. Can anyone help me? I followed every steps and rewatch like 4-5 times

  3. Thanks!

  4. Sorry another question … do you have a video on how you made the website before converting it to a theme using bootstrap etc? I'm familiar with HTML and CSS2 but a bit behind in the new stuff! Enjoying this video – you are making it really clear 👍👍👍

  5. Hi, is these codes still working?
    I tried to follow your tutorial here, but when I was just in the section "Create Required Empty Files / Folders for Theme" when editing the css file path it's not work as expected.
    And I have a question, you only put; Theme Name, Text Domain, Version, etc. in the style.css, but how can it style the page?

  6. Danke!

  7. I had difficulty with your register_sidebars() example. It appears that register_sidebar( array|string $args = array() ) only takes one array instead of two.

  8. My CSS is not loading. what should i do sir

  9. Just wondering what Bootstrap and Font awesome are? Am I right in thinking they are a collection of autogenerated CSS styles. Where is the best place to learn more? Enjoying the video btw 👍👍👍

  10. We can add ".nav-link" class using Vanila JavaScript:

    function addClass(selector, className) {
    let nList = document.querySelectorAll(selector);
    for (let i = 0; i < nList.length; i++) {
    nList[i].classList.add(className);
    }
    }

    addClass(".nav-item a", "nav-link");

    @FollowAndrew

  11. from where did he has the first zip. document of WordPress, I have to begin from this point and I can't understand from where did he got all those files, he said from the zip. but I don't know which zip.

  12. Hi there! I am using WordPress 5.9. I created all the files but the theme did not show up on my WordPress backend. It is only showing the active theme. What could be the reason behind it?

  13. Very Nice videos

  14. This is good content for to see how custom WordPress is created but this has a lot of issue for beginners to complete the whole instruction guided in it, overall it's the good start to get the basics.

  15. Great Video!

  16. the correct dimension for the theme thumbnail is 1200 x 900. name it 'screenshot' not 'screenshot.jpg' or 'screenshot.png'

    remove version number if you are using google fonts

  17. very useful video for beginners point of view and i learn lot of thing

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

  19. Is it possible to edit the finished theme completely with Elementor?

  20. 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"));

  21. i can insert my custom class and id html in wordpress, inside of underscores theme? how can do that?

  22. Well, I found out that coding is just not my thing. Syntax error for ever <3

  23. Tôi DANH THÁI không phải ở Rach Gia Tôi ở Thới Quản Việt Nam

  24. You are a legend for this

  25. 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`

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

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

  28. expensive knowledge

  29. Thx for the amazing tutorial ❤❤

  30. DANH Thái Thới Quản Việt

  31. I like👍👍👍👍

  32. 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?

  33. Well explained

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

  35. Does he have a video on doing the advance walker?

  36. Absolutly helpful! Thanks

  37. Thanks!

  38. Where to find the code?

  39. Instant 🔥 Download 🔥 GPL WordPress Theme

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

  41. nice sir ! thanks for this tutorial

  42. Thanks Andrew! <3

  43. There are so many annoying errors in this tutorial, at 1:44:00 code must be: else {

    echo get_comments_number()."Comments";

    }

  44. Really good video. I had some problem to get my footer loaded in the bottom. My footer is what it seems to still be loaded in the header. Don't really know to how to solve this

Trả lời

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