How to create a new theme from scratch?

Question

I'm new to WordPress.

Which steps would I need to do, to get my new design implemented as a WordPress theme?

Answer 1

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.

Answer 2

You could use a "starter" theme, such as Starkers, which provides a base for building out your own theme. There's minimal functionality in place, so you have to do some work yourself.

Another option is using a theme framework, which contains a lot of common, base functionality which you can simply use. Options include Carrington and Genesis.

I recommend starting with Starkers, which will force you to learn about WordPress tags and functions. Then you can use a framework to speed up later work.

Also, for resources on theme development, you may want to look at the answers on this question.

Answer 3

You can start your own theme from scratch or you can use existing theme frameworks like Thematic ( http://themeshaper.com/thematic/ ) and develop your theme around them. If you want to develop the entire theme from scratch http://codex.wordpress.org/Theme_Development and other resources like the Wordpress Codex may prove to be very useful. http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ is also a very great Wordpress theme creation tutorial for beginners.

Answer 4

I start always with WPBasis as starter theme and write plugins and theme for the requirements of the customer - thats all