How to create a new theme from scratch?

An alternative to a “skinnable” theme framework like Carrington (which indeed is awesome) is to integrate a design you’ve done from scratch. This is how I learned how to create custom WordPress themes. Note: this is a hacky method that involves lots of experimentation. But if you’re like me, and learn best when you’re playing around with your hands, this may teach you a lot.

BTW, I assume you know HTML, CSS, and PHP. If not, working knowledge of those technologies would be required to build a new theme from scratch. Working knowledge of LAMP is also helpful.

  1. First, build out your design in static code: HTML and CSS. Make sure it’s cross-browser friendly and includes all of the elements a WordPress blog would (i.e. comments, archive pages, etc). Also, place all of the CSS code into a single file named “style.css” and make sure all external file references (for CSS, images, JS, etc) use relative URLs, not absolute URLs.

  2. Get WordPress running on your local machine. This will require installing Apache, PHP, and MySQL onto your desktop or laptop. If you’re using Windows, the WampServer is a nice solution. If you’re using a Mac, MAMP works well too. Then install WordPress.

  3. Open up the files for the Default theme that comes with the WordPress installation package. It’s in the /wp-content/themes/default/ folder. This theme probably has more files than you’ll need. As an alternative, you can also start with the Classic theme instead, which has fewer theme files, in /wp-content/themes/classic/ of course. BTW: the Default theme is selected by default (duh), but if you want to start with the Classic theme, make sure you activate that theme within the WP admin, so you can see how it looks.

  4. In your browser, keep the Theme Development section from the WordPress Codex open. You’ll be needing it very often. On the Template Files List, you’ll see how that list maps to the files you see in the Default (or Classic) theme. Some theme files are required, some aren’t.

  5. Depending on the kind of person you are, you can now start mucking around with the theme files and see what works, what breaks, etc. You can even start moving pieces of your own design into this theme. Or, you can read the Theme Development instructions carefully (the info on The Loop is especially important), then come back and muck with the files.

When I started doing this, lots of stuff would break. Don’t worry if that happens, that’s why you’re doing this on your own local machine and not on a public website. The breakages are part of the fun of learning.

Eventually, you’ll be able to slowly move pieces of your HTML and CSS into the Default or Classic theme, then get it all running. That’s when you’ll graduate from a n00b to an Apprentice.

And after that, you’ll be able to move pieces of PHP code (which are WordPress’ Template Tags) out of the Default or Classic theme, and into your HTML. That’s when you’ll graduate to a Journeyman.

(I consider a Senior Journeyman someone who can write their own widgets, plugins, and themes with great ease. And a Master, well, at that point, you’re contributing back to the WordPress Core. I’m definitely not that.)

I hope this helps.

Leave a Comment