WordPress Theme Tutorial (Part 1)

WordPress Theme Tutorial (Part 1)

FavoriteLoadingAdd to favorites

Let’s learn how to create a WordPress theme by hand, from scratch. We’ll write our own HTML, CSS, and PHP to create the basic foundation for a WordPress theme. Check out my “Get a Developer Job” course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

To view a complete list of the WordPress theme development lessons in sequential order visit:

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month ($60 savings): http://learnwebcode.com/web-hosting/

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/

Follow LearnWebCode on Twitter for resources and updates:
https://twitter.com/learnwebcode

50 Comments

  1. RockF April 26, 2017 at 9:22 pm - Reply

    Is this tutorials safe to follow with the current WordPress version?

  2. Jacob Gordon April 26, 2017 at 9:23 pm - Reply

    So I’ve done everything right so far (though with no ease), and my style.css file is exactly like yours but when I input the color code it won’t do anything. It’s done the spaces and the font but for some reason it won’t do the color. Anyone else have this problem?

  3. Sheriff Hussain April 26, 2017 at 9:25 pm - Reply

    Anyone having "LearningWordPress’ is broken and the Stylesheet is missing" or anything similar error just type these things in the style.css file:
    /*
    Theme Name: Twenty Fifteen Child
    Theme URI: http://example.com/twenty-fifteen-child/
    Description: Twenty Fifteen Child Theme
    Author: John Doe
    Author URI: http://example.com
    Template: twentyfifteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-fifteen-child
    */

    Worked for me

  4. Martin M April 26, 2017 at 9:26 pm - Reply

    functions.php doesn’t work for me

  5. rot rose April 26, 2017 at 9:27 pm - Reply

    Thank you very much, because of your excellent tutorial, I began to put a step forward to try to develop my own wordpress theme. Thank you very much.

  6. sony nakarmi April 26, 2017 at 9:28 pm - Reply

    What editor are you using? and Could you say which extension that are u using that writes up html code along with dynamic starting tag and ending tag comments on the fly? Tutorial is very good.

  7. Kirito PHP April 26, 2017 at 9:28 pm - Reply

    Anyone please enlighten me. Is this tutorial still relevant? It’s 3 years old and I wish it’s updated. Thank you!

  8. roy huaijun April 26, 2017 at 9:29 pm - Reply

    once i enter functions.php, the wordpress stop loading

    ( ! ) Parse error: syntax error, unexpected ‘,’ in C:wamp64wwwwordpresswp-contentthemeslearningWordPressfunctions.php on line 5
    Call Stack
    # Time Memory Function Location
    1 0.0021 407440 {main}( ) …themes.php:0
    2 0.0031 476512 require_once( ‘C:wamp64wwwwordpresswp-adminadmin.php’ ) …themes.php:10
    3 0.0037 496872 require_once( ‘C:wamp64wwwwordpresswp-load.php’ ) …admin.php:31
    4 0.0042 508296 require_once( ‘C:wamp64wwwwordpresswp-config.php’ ) …wp-load.php:37
    5 0.0057 663944 require_once( ‘C:wamp64wwwwordpresswp-settings.php’ ) …wp-config.php:91

  9. Krishan Chand Thakuri April 26, 2017 at 9:29 pm - Reply

    Second style sheet is not working:
    http://prntscr.com/euapgt

    there are 2 style.css, but I am expecting style.css and bg.css
    http://prntscr.com/euapxg

  10. Trung Quân Trần April 26, 2017 at 9:29 pm - Reply

    what program you using coding?

  11. Dian Clay April 26, 2017 at 9:30 pm - Reply

    WOW!

  12. Maximiliano Diaz April 26, 2017 at 9:31 pm - Reply

    Aren’t you supposed to put a closing ?> tag at the end of functions.php?

  13. Rainbow_dash April 26, 2017 at 9:31 pm - Reply

    Am I the only here who hates his php syntax?

  14. Will Dyke April 26, 2017 at 9:34 pm - Reply

    Has anyone had the issue of making changes to the code and finding their test site unchanged? For example, I will change the font-size values, but the font doesn’t change.

  15. Curso de Inglês April 26, 2017 at 9:35 pm - Reply

    Hy, man . You are a genius. Thanks For all . I am from Brazil and I aprreciate your job . Have a good day

  16. True Review helper April 26, 2017 at 9:35 pm - Reply

    Earn Money fast & Easily Online. Just Search google; "Mojo make Money System"

  17. lagunaskater April 26, 2017 at 9:37 pm - Reply

    One of the themes doesn’t show up on wordpress.. Also, when i create a theme… it also wont show up on wordpress. what is happening here? When I create the index and style files in a new theme folder, the extension wont stay with the files. Im using sublime text and i save as .PHP and .CSS but it wont save the files as .PHP & .CSS, they just appear blank and require me to open with a suggested program. My folder settings are set to force the extension to show but it wont. 🙁

  18. P Harris April 26, 2017 at 9:37 pm - Reply

    you are the greatest. thanks!

  19. Ad Rienks April 26, 2017 at 9:42 pm - Reply

    Hello,

    I just installed Kaspersky anti-virus software, and now this is automagically added to the source:
    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/2425B5C3-1B3E-D641-923C-D35B168E0D90/main.js&quot; charset="UTF-8"></script></head>

    Is this a problem? And if yes, how can this be removed?

    Thanks for an answer,
    Ad Rienks

  20. colonelvector April 26, 2017 at 9:45 pm - Reply

    Fantastic tutorial, great step-by-step instructions and all is clearly explained.

  21. Ante šparada April 26, 2017 at 9:48 pm - Reply

    You are such bad teacher! GO SLOWER!!! And no, I am not beginner.

  22. Miguel Correia April 26, 2017 at 9:50 pm - Reply

    Why my content posts are out of the margin just like
    here is the margin and it goes to there >>>>
    this my text suhs hysshsshis hhsihsihishi sdff | shssishishsishsi

  23. Tshepiso Molefe April 26, 2017 at 9:52 pm - Reply

    how come you did not close the php code in functions.php

  24. Sherzod Kambarov April 26, 2017 at 9:53 pm - Reply

    Thanks so efficient

  25. Vic Hinojoza April 26, 2017 at 9:53 pm - Reply

    I went thru steps but im getting a "missing stylesheet" message before i can install it. It’s under the broken themes sections. I noticed my style.css sheet was saving as a text file so i saved it as a Cascading Style Sheet Document but still getting the same error. Would you please advise? Or can anyone help. I searched WordPress.org but everyone who was a missing stylesheet issue seems to have it from trying to install another theme, not from building one ground up. Any help would be greatly appreciated. Ive burned hours searching trying to figure this out!

  26. panos J April 26, 2017 at 9:54 pm - Reply

    Really good video brother 👌

  27. jonathan sumala April 26, 2017 at 9:55 pm - Reply

    i cant understand what is my problem in this error:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘learningwordpress_resourcess’ not found or invalid function name in D:xampphtdocswordpresswp-includesclass-wp-hook.php on line 298

  28. Zammu Leo April 26, 2017 at 9:55 pm - Reply

    really bro this is the awesome tutorial this is a very usefull ……….. Thnks

  29. Muhammad Burhan Zahid April 26, 2017 at 9:56 pm - Reply

    I am having a problem that I can’t view all of my post only hello world post is visible , however I have followed the same pattern ……………….. any body have any solution

  30. Jejomar Dorongon April 26, 2017 at 9:56 pm - Reply

    Hello Brad! I enrolled in your course in Udemy. I haven’t started it yet because I wanna learn WP first. I just wanna ask if this tutorial will work for WordPress 2017. Thanks.

  31. Hardik Patil April 26, 2017 at 9:57 pm - Reply

    which text editor it is?

  32. Chelsea Williams April 26, 2017 at 9:59 pm - Reply

    Your videos are excellent and your voice is delightful. Thanks for the help!

  33. William Hooke April 26, 2017 at 10:01 pm - Reply

    I am making a website, and have already paid for web-hosting for WP.org. Is it still worthwhile to do all the coding for HTML, CSS, and PHP on a desktop installed WP software, or it doesn’t matter now as I’ve already leaped into the action?

  34. Muhammad Jabbar April 26, 2017 at 10:02 pm - Reply

    Great video dear

  35. Curso de Inglês April 26, 2017 at 10:03 pm - Reply

    Why my posts are out of the margin justlike thisyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
    and it is gone, help me please

  36. natalieob1 April 26, 2017 at 10:05 pm - Reply

    Great video

  37. Drevon Lynch April 26, 2017 at 10:06 pm - Reply

    Hi guys i am really stuck so if anybody out who could help I would be gratful. I am trying to add the header to my index.php page but as soon i place it in the code it removes the data from my website.

    This is my code from my header.php document:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo(‘charset’); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php bloginfo(‘name’); ?></title>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <div class="container">

    <!–site-header–>
    <header class="site-header">
    <h1><?php bloginfo(‘name’);?></h1>
    <h5><?php bloginfo(‘description’); ?></h5>

    </header>

  38. Takanori Shimada April 26, 2017 at 10:07 pm - Reply

    Anyone can help me? Undefined function get style_sheet_url

  39. Xcelier The Knight Gamer April 26, 2017 at 10:08 pm - Reply

    I fallow every step correctly and check all the coding 20+ times but after I added the functions.php it doesn’t work. Anyway to help me out.

  40. ajanta das April 26, 2017 at 10:09 pm - Reply

    One of the awesome video tutorial series. I followed her all tutorial.
    If you see her all tutorial you could make premium WordPress theme. If
    anybody wants to get help for WordPress theme development service .
    please visit https://www.fiverr.com/ajanta91/do-wordpress-theme-development
    Thank you

  41. Christopher Smikle April 26, 2017 at 10:10 pm - Reply

    My problem is the style.css isn’t working.
    I even got the files from the site, copied into the theme folder, but no styling is being applied.
    Anybody know whats wrong?

  42. Arthur Bezuijen April 26, 2017 at 10:11 pm - Reply

    BTW you have a nice way of explaining!

  43. John Voon April 26, 2017 at 10:12 pm - Reply

    Awesome tutorials, thanks for taking the time to do this!

  44. Dian Clay April 26, 2017 at 10:12 pm - Reply

    WOW!

  45. KemstyleStudios April 26, 2017 at 10:12 pm - Reply

    If you’re using windows 10, on the explorer go to File, then Options [Folder Options].
    Click the View tab, then uncheck "Hide extensions for known file types"
    Go back to the folder and make sure it’s not "style.css.txt"

  46. Daniel K. April 26, 2017 at 10:13 pm - Reply

    this is new to me to open the html and body tag in the header and close it in the footer… whats the advantage of it?

  47. MariusSemeonOrtiz April 26, 2017 at 10:15 pm - Reply

    Hi, excellent tutorial series by the way! Strange thing – when I write exactly the same code it displays Home rather than what the titles of my posts actually are. Furthermore, if I add additional posts it doesn’t cycle through them and display their names but instead still displays "Home".

  48. Dennis Chavours April 26, 2017 at 10:15 pm - Reply

    Excellent! Keep making videos!

  49. DJ Seff April 26, 2017 at 10:17 pm - Reply

    this was so fast I learned nothing, followed the instructions the best I could then at 15minutes my website doesn’t look at all like the one in the video even though the code is the exact same. Gonna watch another channel

  50. Istvan Homoki April 26, 2017 at 10:18 pm - Reply

    I have a feeling this guy intentionally wanna sound complicated asf.

Leave A Comment

*