How to Start Building WordPress Themes from Scratch
Looking to kickstart the new year and start a new career for yourself with WordPress Theme Development? Then look no further! Here we have our WordPress Theme Development track, it will lead you through the essentials in building your very first WordPress theme, and it was created for people with no prior experience! We’ll start with some general advice, go through HTML & CSS, a sprinkle of PHP, and then get stuck in to the WordPress side of life.
This series is supported as well, so if you have questions, you only need ask in the comments and receive a timely answer, happy coding!
If you’re just getting started we recommend you read our introductory article How to Get Started with WordPress in the New Year.
Building a Website
Learning to build a Website is no different from learning to build something in the physical world, it requires an amalgamation of skills, time, and practice, and the first time you do it it’s probably going to suck, and that’s OK!
More importantly, when it comes to web development, it’s just like the saying “you can lead a horse to water but you can’t make it drink.” I can show you how to do it, but doing it is entirely up to you.
It’s a good time to find out if you enjoy it, and I guarantee you’ll find out very quickly by simply trying. Though if you like to tinker on cars, bikes, with lego, even a little carpentry or metal work, you probably will. It’s a craft just like those and it takes many years to get it perfect.
If you don’t enjoy it then you probably won’t get very far, as it’s hard to force people to do something they don’t want to.
On the other hand, if you do enjoy it, even get a kick out of it, prepare for an emotional rollercoaster.
The Good and The Bad
There will be days when you start and then it’s suddenly dark out and you haven’t eaten and you notice it’s 2am but you’ve come so far, accomplished so much, and feel invincible. You made great progress and feel-good hormones are rewarding you for it, awesome!
There will be days when you start and then it’s suddenly dark out and you haven’t eaten and you notice it’s 2am and your dog is barking and you’ve been stuck on one tiny, little, inconsequential bug for the last 6 hours. You’re probably not even looking at the code causing the bug by now.
And there will be the days when you sit there, staring through the screen, the highlighted jumble of words and various brackets, braces, and parenthesis being just that, a jumble.
But if you enjoy it, you will have many more good days than bad, and it will be worth it. And if you find that you enjoy it enough, it can be something that opens many professional doors for you.
And without further ado, let’s dive in.
HTML & CSS – Foundations
Without a solid foundation, a structure of any size will fall, and the same is true for the web.
Traditionally one could say that HTML defined the operation, whilst CSS handled presentation, and this still holds true for the most part. Though over time as the two languages and browsers become more advanced, the line is getting blurry
Now, ideally you’ll have some kind of familiarity with HTML from your time writing posts in WordPress, probably the various headers (<h1>, <h2>, and so on), how to make text <strong>bold</strong> or <em>italicized</em>, how to make a <a href=http://omglink.com>clickable hyperlink</a>, and how to insert an <img>, this is all pretty basic stuff but it’s a great place from where to start growing your knowledge.
We’re not here to teach you HTML & CSS, as to do so would be to do you a disservice, because there are so many absolutely fantastic resources out there from which to learn.
HTML & CSS Introductory Courses
I recommend starting out with Codeacademy.
It’s free, it’s interactive, it runs in your browser so there’s no setup, and all of this means that you can start right away. It will teach you the basics of HTML and CSS in a logical order, in a sensible way. Beneficially it’ll also explain the required terminology as you go along, but don’t worry, it’s very straightforward. Indeed it’s about as easy as any kind of coding or programming gets.
Alternatively there are other, similar services such as Code School, Code Avengers, and Treehouse (HTML & CSS Foundations), some of which are paid, it’s up to you to choose which you prefer, and if you’re prepared to pay for it.
There’s a few common benefits of these services though, all of your work is saved online, so if computer blows up or is stolen, or your dog eats it, then you can still log on and write some code. Additionally they all provide clear instruction through your learning and will help you find errors in your code.
As you go through the course, you’ll learn how more complicated pages are structured, and how CSS is used to manage where various elements lie.
By the time you’ve made it through that, you’ll have a sound enough understanding of HTML & CSS, and how to use them together, to start thinking about WordPress.
PHP – Internet Lego
Before diving straight into WordPress, it’s important to learn a little PHP, as this is the Programming Language that underpins WordPress, and indeed, the vast majority of websites. It is harder than HTML & CSS to get a handle of, but it’s definitely a good first scripting language to play with.
Again, the advantages of these are that you can start right away with no setup, but in time you will likely need to setup your computer with PHP so you can start to use it locally.
WordPress Theme Development
If you’re comfortable with HTML & CSS and ideally some PHP, it’s time to get your hands dirty with what you came for, WordPress, and there’s no better place to start than the YinPress series Couch to WP Pro: Beginner. It’s an introductory theme development series, and will cover the absolute need to know concepts for building a WordPress Theme.
It assumes you have very little HTML, CSS, and PHP knowledge, and no WordPress development experience, nor design skill, and it utilizes a very popular framework called Bootstrap to construct the site.
- Part 1: Setting up Self Hosted WordPress
- Part 2: Grasping Theme Anatomy
- Part 3: Templating with PHP
- Part 4: Beginning Our First WordPress
- Part 5: Preparing The Loop with Test Content
- Part 6: Learning The WordPress Loop
- Part 7: Getting Familiar with the Template Hierarchy and Building Pages
- Part 8: Creating an Easy, All-in-One Archive Page for Your Theme
- Part 9: Building Comments into your Template
- Part 9: Build a Dynamic, Customizable Menu
- Part 10: Widgetized Sidebars
- Part 11: Implementing Search
- Part 12: Your 404 Page
If you complete that, you can then move on to the Couch to WP Pro Intermediate Series.
Just remember the advice above, it will take time, there will be good days, and there will be bad days, but perhaps most importantly, if you need help, just ask!