• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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.

Photoshop Tutorials

“Brush” up on your Photoshop: 20 Blog Design Tutorials & .PSDs

“Brush” up on your Photoshop: 20 Blog Design Tutorials & .PSDs »

Working on a Movie Theme

Working on a Movie Theme »

Brush up on your Photoshop (Part 2): 20 High Quality Blog .PSDs

Brush up on your Photoshop (Part 2): 20 High Quality Blog .PSDs »

How to create a wordpress theme in Photoshop

How to create a wordpress theme in Photoshop »

Create a Minimal WordPress Theme in Photoshop

Create a Minimal WordPress Theme in Photoshop »

Photoshop Textures & Patterns

20 Repeatable Pixel Patterns

20 Repeatable Pixel Patterns »

Apple iOS Linen Texture

Apple iOS Linen Texture »

Photoshop Patterns

Photoshop Patterns »

650+ Free Photoshop Patterns

650+ Free Photoshop Patterns »

The Ultimate Collection Of Free Photoshop Patterns

The Ultimate Collection Of Free Photoshop Patterns »

800+ Photoshop Patterns For Your Next Web Design Project

800+ Photoshop Patterns For Your Next Web Design Project »

50 Extremely Beautiful Photoshop Patterns for Elegant Designs

50 Extremely Beautiful Photoshop Patterns for Elegant Designs »

8 Seamless “Dark Metal Grid” Patterns

8 Seamless “Dark Metal Grid” Patterns »

Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles »

20 Superb Adobe Photoshop Textures

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.

Software

Notepad ++

Notepad ++ »

CoffeeCup Free HTML Editor

CoffeeCup Free HTML Editor »

HTML Kit

HTML Kit »

PS Pad

PS Pad »

CSS Frameworks

Blueprint

Blueprint »

The 1140px Grid System

The 1140px Grid System »

Less Framework 4

Less Framework 4 »

The Square Grid

The Square Grid »

EZ CSS

EZ CSS »

Atatonic

Atatonic »

Baseline

Baseline »

Toast

Toast »

960 Grid System

960 Grid System »

Sliders

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Easy Slider 1.7 – Numeric Navigation jQuery Slider »

Nivo Slider

Nivo Slider »

25 Awesome Free jQuery Image Sliders and Carousels

25 Awesome Free jQuery Image Sliders and Carousels »

Useful jQuery Image Sliders and Galleries Tutorials

Useful jQuery Image Sliders and Galleries Tutorials »

Wow Slider

Wow Slider »

20 Useful jQuery Photo Gallery and Slider Plugins Collection

20 Useful jQuery Photo Gallery and Slider Plugins Collection »

Dropdown Menus

Superfish

Superfish »

Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS »

Sliding Jquery Menu

Sliding Jquery Menu »

Perfect signin dropdown box like Twitter with jQuery

Perfect signin dropdown box like Twitter with jQuery »

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu »

CSS3 Dropdown Menu

CSS3 Dropdown Menu »

Create Vimeo-like top navigation

Create Vimeo-like top navigation »

Fancy Drop Down Menus Using CSS and JQuery

Fancy Drop Down Menus Using CSS and JQuery »

A Different Top Navigation

A Different Top Navigation »

Animated Drop Down Menu with jQuery

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.

Blank Themes / Frameworks

Starkers Theme

Starkers Theme »

Hybrid Core

Hybrid Core »

Thematic, A WordPress Theme Framework

Thematic, A WordPress Theme Framework »

PressWork

PressWork »

Toolbox: An HTML5 WordPress Starter Theme

Toolbox: An HTML5 WordPress Starter Theme »

Whiteboard Framework

Whiteboard Framework »

Roots Theme

Roots Theme »

Theme Options Panels

The UpThemes Framework

The UpThemes Framework »

Options Framework

Options Framework »

How to Create a Better WordPress Options Panel

How to Create a Better WordPress Options Panel »

Create a WordPress Theme Options Panel

Create a WordPress Theme Options Panel »

WordPress Theme Options Panel Framework

WordPress Theme Options Panel Framework »

Shortcodes

WordPress Shortcodes: The Right Way

WordPress Shortcodes: The Right Way »

WordPress Shortcode Tutorial: Simple to Advanced Part 1

WordPress Shortcode Tutorial: Simple to Advanced Part 1 »

Getting Started With WordPress Shortcodes

Getting Started With WordPress Shortcodes »

WordPress Shortcode TinyMCE Button Tutorial Part 2

WordPress Shortcode TinyMCE Button Tutorial Part 2 »

Creating A Toggle Shortcode For WordPress FAQ’s Page

Creating A Toggle Shortcode For WordPress FAQ’s Page »

Shortcodes Ultimate

Shortcodes Ultimate »

J Shortcodes

J Shortcodes »

Shortcodes Pro

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.

Test Data

Theme Unit Test

Theme Unit Test »

Plugins for Testing

Debug Queries

Debug Queries »

Log Deprecated Notices

Log Deprecated Notices »

Debug Bar

Debug Bar »

Theme Check

Theme Check »


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

12 Comments

  1. Brian Krogsgard

    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.

    • Yes, Im a big fan of the Hybrid Framework as well – $25 a year is nothing really is it.
      Same with DevPress.com for $5 per year – crazy :)

  2. WOW Oli – that is one insane roundup post! Nice work and thanks very much. I found some new option panel frameworks to check out :)

  3. Definitely worth bookmarking. Could spend hours going through all of these

  4. Definitely worth bookmarking. Could spend hours going through all of these

  5. Yup! This is very useful article. I found here some tips to design one travel theme. :)

  6. Awesome collection! Really useful to get started with WP themes.

  7. Great list! Have used many of these in the past. Found a few new ones that I haven’t heard of. Thanks for this.

  8. I just can say “you kick my ass with this article” auch…
    big thank oli

  9. This is amazing! Thanks :)

  10. nurul

    great, thanks a lot

  • Comments are Closed

Search

Our Sponsors