When building WordPress themes ( or any websites for that matter ) it helps to build up some resources that you can use over and over again to cut down on development time. The development process starts with the initial layout in a program like Photoshop or Fireworks and then on to the HTML / CSS coding. Once you have the required pages coded up, you can then start developing the theme itself and then finally testing the theme within WordPress.

Today's post is one for your bookmarks as I roundup lots of resources for each stage of the development process.

1. Designing Your Theme

The first stage of building your WordPress theme is to create mockups in an image editing program such as Photoshop. The best way is to lay out the site in wireframe first - that is, to create the main content areas in black and white without adding any design details in. Once you are happy with the layout, you can then add design elements in such as the colors, textures, icons and so on.

20 Superb Adobe Photoshop Textures

2. Coding the HTML / CSS

Once you have your website mockups created for each page of your theme, you can begin writing the HTML and CSS, in this section we will look at some free software you can write the code in and various pre-made common elements that can help you, such as CSS Frameworks, Javascript sliders and dropdown menus.

A Different Top Navigation

Animated Drop Down Menu with jQuery

3. Coding the WordPress Theme

Now you have your HTML and CSS templates ready, you can begin the process of building these into theme files that WordPress understands. I like to have a standard blank theme to start from which contains all the theme php files that are usually needed, you can build your own or there are a good range of blank themes and frameworks that people have created for you to base your theme upon. In this section I will take a look at these and also other components you may wish to include such as a theme options panel and built-in shortcodes.

Shortcodes Ultimate

J Shortcodes

Shortcodes Pro

4. Testing Your Theme

The final part of the theme development process is live testing of your theme to eliminate any errors before putting it live. You can use test data which will test out all the possible uses of the theme - adding in lots of comments, tags, images and html elements. There are also a number of plugins to hell you eradicate any bad code such as deprecated calls etc.

Nice roundup Oli. I love Hybrid Core. I use it for all of my development, and Justin Tadlock has amazing support for all things WordPress for an absolute steal… and the framework is free if someone wants to give it a spin. I make way more money in productivity than I pay for the yearly support fee though.