June 15, 2014

Create WordPress Theme from Scratch

In this lesson we 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. In future lessons we’ll learn about all of the different pages and templates we can add to our theme in order to gain fine grain control.

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

Do you want to share the WordPress website that you’ve been creating on your computer with the world? The next step is to use a web host to share your site with the world. Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month.

View the entire “Learn WordPress” series

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

24 thoughts on “Create WordPress Theme from Scratch

  1. may i know what software u use in the mac to type the code. in the video wordpress theme tutorial?

    1. Absolutely – I use the text editor named “TextMate” in the videos. I also recommend “Sublime Text” which runs on all operating systems.

  2. Hi,
    your explanations are clear and easy to follow, I much appreciate your way to teach, i watched all your videos about WordPress and lot of other videos and enjoying my time, it was very helpful, hope you do other great videos
    Thank you Very much

  3. Just what I needed to see. As I want to ‘make’ my own site; as unhappy with the themes that are More than I needed. Just started last month. Keep up the good work.

  4. Awesome Tutorial, I’ve used this to make modifications to an existing theme but I can’t wait to start building my next one from scratch. Love to start in photoshop and turn the PSD into a WordPress theme.

    1. That’s great to hear, Anderson! I’m glad the videos were useful. There is something relaxing & rewarding about starting with simply an idea for a design (such as a PSD) and transforming it into a breathing WordPress theme / site 🙂 Perhaps that process would make for an interesting video series 🙂

  5. Awesome tutorial, after long search I landed in this page and this is one stop place for wordpress learning. Thanks a lot

  6. Hi Brad,

    Thank you very much for all your Tutorials, very helpful, clear and awesome. Do you also plan any tutorials about WP FrameWorks and Plugins? How to create a WP Plugin as well as how it works etc.

    Happ New Year and Best Wishes.

  7. Hello Brad,
    How do we add multiple css styles? Please advise.
    By the way you teaching style is awesome. which made me to buy your Html & css course. Don’t stop 🙂

  8. Great work Brad. Your teaching skill is great. Look like you are perfect web developer. I want to know what are resources I can improve my web developing knowledge into professional level.
    Thaks.

  9. Hi Brad,

    Thanks for the useful tutorial.
    I have a general PHP question. I’m wondering why in some cases you use ‘echo’ and in some cases you can just drop the variable or function into the HTML.

    1. Some functions return a string, and some functions do the echo for you. Kind of confusing really how they made some echo for you and some that you need to echo yourself.

  10. Let me first say – this is the most thorough tutorial BY FAR on this subject, pretty much anywhere on the web; thank you SO much Brad! I immediately signed up for another one of your courses – love your style. Question for you – any chance you have anything published in regards to incorporating JS / JQuery into WordPress Pages? Specifically, I am attempting to create a home page similar to the one found at this link, and I am having trouble figuring out where to place my javascript file / whether or not to include the css in the same style.css file, etc. Would love any advice you may have! I look forward to your upcoming courses; thanks again, you’re a hero!

  11. Started using wordpress yesterday, and this is a great tutorials! 😀 but i have one huge problem! When i write new code, save my sublime text doc. and refresh the site.. nothing happens! Seems like i have to zip the map, upload it as a new theme and activate it whith the new changes! that is not how it looks on your tutorials :S

    Also, your theme pops up, as soon as you have made a map in the map structure.. do you not upload it at all? All the coding in general is very well explained, and i cant wait to get things flowing! 😀

  12. Thank you for the tutorials. You are a really great teacher. Clear instructions that are useful and understandable.

  13. Hello Brad,

    Thank you for sharing this tutorial.
    I have a question, i did exactly the same thing as you did in the tutorial, but if i want to open my page i see this error?
    Fatal error: Call to undefined function have_post()

    Do you know what this error means, and how to fix this?

    Thanks,

    Daan

  14. Brilliant tutorials Bradley!

    Quick question:
    If you were going to build a new custom wordpress site for yourself would you use a starter theme like _s or just build from scratch?

  15. Also if you are building a custom wp site – are you building it in html first, then making it a wp theme or just building it straight in wp?

    (the reason I ask is that I can see how building the site in html/css first can help you iron out any design elements before having to fiddle with any wordpress stuff, but maybe you think this is an unnecessary step…)

    By the way, your course on Udemy is solid. Probably the best beginner web design course out there. I’m really glad I went through it!

  16. Great videos. Really helpful. But pls, it takes me several minutes sometimes trying to debug the codes….my mistakes. Can I get those codes you show in your videos? That will save me a lot of time.

    1. Hi Arinze, towards the end of each WordPress post on this website I include a link to download a “zip” file with the full code and files that we ended with in the video lesson. Hope that helps!

  17. Thanks so much for this tutorial … By far the best one! Finally WordPress is starting to make sense to me 😉

Leave a Reply

Your email address will not be published. Required fields are marked *