Earlier this year, or perhaps it was even last year, I had promised to write a tutorial on how to design a custom WordPress theme. I did start writing this tutorial, but there was a problem — it was incredibly long and complicated. I was half way through and I decided not to publish it because I just didn’t think it was helpful. The truth is you can’t just read a tutorial on how to create a WordPress theme and run off to make a mind-blowing theme. The same goes for web design in general — no tutorial is going to show you how to do it. You learn through experimenting, trial and error, and educating yourself.
So instead of writing a long tutorial, I’ve decided to explain how I learned.
As a heads up, you need to be fairly proficient in coding HTML, CSS, and PHP. You’ll be creating and modifying code, so knowing how to make a bare website and bold a line of text simply won’t lead to a WordPress theme. If this is your case, I suggest becoming proficient in standard coding and returning to this project another time.
This is how I learned to create my own WordPress theme. It’s not the right way. It’s not the only way. Hopefully it will lead you in the right direction!
1. Modify WordPress Templates
I started out downloading existing (simple) themes and slightly modifying them. I would insert my own headers, change the width of the blog content, changing colors in CSS, mess around with the sidebar, etc. For me this was important because after doing this long enough I was getting familiar with what makes a WordPress theme. A theme needs to be built, and there are certain pages that are necessary to its structure. By necessary, I mean that every theme needs these pages or else it will not display. You’re going to notice that every theme has certain pages to it — header.php, footer.php, sidebar.php, functions.php and so forth. Without the necessary pages you won’t have a theme. By going into the WordPress Editor and modifying themes you’ll be comfortable with the functions of every page, and you’ll realize which pages are universally required.
2. Use An Existing Base
After modifying themes for a while, I eventually took it a step further and used themes as a base for my own ideas. To do this I searched for themes where the authors were okay with users using heavy modification. I uploaded these themes and heavily edited them by moving around the sidebar, experimenting with different content display methods, experimenting with different plugins, until eventually the theme I ended up with looked nothing like the original. The key idea here is that you’re not starting from scratch but you’re building something. At this point I learned what lines of code should not be touched, what the WordPress codes do, how to edit the WordPress codes, and how big of a role PHP includes play in themes.
3. Start From Scratch
I eventually got to the point where I am now. I know what pages I need to create to make a theme. I know what PHP include each page has. But it all came from studying other people’s themes, making mistakes, writing through existing code, and looking up answers to my millions of questions. When I start a theme from scratch, I still like to upload it to WordPress to make sure everything I’m coding comes out the way I like. I still make a lot of mistakes and there’s probably an endless amount of things both WordPress-wise and web design-wise that I need to learn. Personally, I make my themes by sketching them in my notebook, designing it in Photoshop, and then coding it. I wasn’t able to do this beforehand, but now that I know the framework to building a theme I know what I can and cannot do design-wise.
There are a great amount of resources I’ve collected that will help you on your journey!
- 100 High Quality WordPress Themes (Smashing Magazine) - This is a great place to start. You can look for ideas, lines of code, and even modify if the author allows.
- Theme Development (WordPress Codex) - The Bible of theme coding. Tells you what each page does, how they connect, etc. Be careful not to get overwhelmed here. I use it for looking up something specifically. Don’t heavily study it.
- WordPress Theme Lesson (WPDesigner) – This guy has balls for writing a complete tutorial. It’s 16 pages, but I’m sure mine would’ve been closer to 50. A great resource if you need help because it goes step by step! Again, don’t heavily study it or you will be overwhelmed.
- WordPress Cheat Sheet (Woorkup) – A collection of PHP includes for just about anything. Extremely helpful!