How to Build a WordPress Starter Theme: Introduction

7

Welcome to the first part of “How to Build a WordPress Starter Theme”. In this series, I’ll be explaining my method for creating a starter theme, why I choose to do it this way, and why I recommend that if this is your first attempt at building a WordPress theme you give it a go this way.

WordPress Starter Theme – An Introduction

Firstly, I’ll explain why I settled on this method of getting the job done.

I’ve been working with WordPress since around 3.2 – roughly. I’ve hacked through and redesigned many free and premium themes for specific clients’ needs and each time while meticulously searching through ever-changing folder structures and endless include/require breadcrumb trails just to change an ‘h2’ to an ‘h1’ for SEO, I think “why on earth did they do that?!” or sometimes I really like the way a theme author has organised things and I try work that into my own projects.

Eventually I decided it was time to build my own theme. I knew what I wanted from a theme, I knew what I liked in some themes and what I’ve hated, so why not just start my own? There were two obstacles – time and knowledge.

Getting Started

However, one week I seemed to have all the time I’d need and so started up my local server, opened my trusty text editor and I cracked my knuckles… Now what? That blank screen can be quite daunting even when you have a very solid idea where you’re going on top of all the knowledge necessary. I seemingly had very little of both.

Tutorials! Yes, I’ll read some tutorials, watch some videos, read some blogs. So I did. The first thing I found was that 90% of the tutorials out there on theme development, even premium courses, are now very much out of date. WordPress sure moves fast! Functions become deprecated, WordPress’ standards change, the core has added features and PHP itself has matured as a language (anonymous functions to name one useful tool).

I tried two video courses and at least four different written tutorials on building a WordPress theme and each time, I failed. I couldn’t blame the tutorials. In 2008-2010 when most of them were recorded or written, they worked flawlessly, I’m sure, but WordPress 3.8 is perhaps too far removed from even 3.6 to use those tutorials. As I write this, 3.9 has been on the scene less than a month and again there’s been some big (and exciting changes). In fact, as I built this theme, I tested it on 3.8.3 and 3.9 on numerous environments, so I know this method works for 3.9. By the way, development on 4.0 started at the beginning of May. I’m excited!

The Breakthrough

So, in the end, I ditched the idea of tutorials. I decided I’d do it completely my own way. I’d learn everything I needed from the source: The Codex.

It’s guaranteed to be correct, up-to-date and concise. One common bit of advice from each tutorial, regardless of version or medium was this: Use your own HTML! Each one recommended you start with a working static site which you would pull apart across multiple files, inserting PHP tags throughout and “Hey presto!” – a WordPress theme would magically happen.

I realised this was the first problem I was having. Immediately, I was forced to ask questions about parts of the process that were quite far away like, “How do I put the CSS in?”, “Where do I put the JavaScript”, or “In which of the many template files do I put the different HTML parts in?”

The questions were plentiful and I had very few answers. At that point, I made my first big decision: No CSS and No JavaScript. In fact, I decided not to use any ID’s or classes. Just plain, semantic HTML5.

That one decision made building the theme very simple, and in the next part of this series I’ll explain why.

Share.

About Author

Founder and Lead Developer at Affinity4.ie, a web development agency in Galway, Ireland. Develops mosty with WordPress, Laravel, PHP, MySQL, Git, Github, Sass and Compass.

Leave A Reply

  • Habib

    Luke,

    Thank You so much for pointing me back to the basics.

    I’ve been searching tutorials to build my own wordpress theme for a few weeks now. Saving tutorials for the past couple weeks, all I’ve managed is hoarding a large number of bookmarks related to WP themes. This is the best advice I’ve found! Looking forward to the next part in this series.

    • http://www.samberson.com Sam Berson

      Hey Habib, I’m sure Luke will want to reply himself, though I’m really glad that you’ve found the first part of this series helpful. If you haven’t already seen, part 1 of the actual code is already published, and part 2 should be out in a couple of weeks. Thanks for reading and commenting! :)

    • Luke Watts

      Hi Habib,
      I did the same for weeks/months. I bookmarked everything from snippets to full tutorials. In the end the Codex and referencing how the WordPress themes like twentytwelve upwards are built is the best way to really retain the information. I’ll be giving links to the best resources I’ve found as we go and how to spot errors as they arise so you’ll be able to make evertthing mentioned here and apply it to your own projects. The goal will be to teach people to make and troubleshoot their own themes.

    • http://www.samberson.com Sam Berson
  • Michael Shaw

    So glad I found this series. Going to read part 1 now!

    • http://www.samberson.com Sam Berson

      That’s great, Michael! Hopefully you’ll be able to contribute a series like this to wpContent some time soon! :)

  • https://medium.com/@yarddiant/wordpress-advantages-and-key-features-f72375bc0a96 shimna

    Great post, its very informative. Thanks for sharing