WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

The Ultimate (Free!) WordPress Theme Development Toolkit

Last Updated on January 31st, 2023

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 » Get Hosting »

Working on a Movie Theme

Working on a Movie Theme » Get Hosting »

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

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

How to create a wordpress theme in Photoshop

Article Continues Below

How to create a wordpress theme in Photoshop » Get Hosting »

Create a Minimal WordPress Theme in Photoshop

Create a Minimal WordPress Theme in Photoshop » Get Hosting »

Photoshop Textures & Patterns

20 Repeatable Pixel Patterns

20 Repeatable Pixel Patterns » Get Hosting »

Apple iOS Linen Texture

Apple iOS Linen Texture » Get Hosting »

Photoshop Patterns

Photoshop Patterns » Get Hosting »

650+ Free Photoshop Patterns

Article Continues Below

650+ Free Photoshop Patterns » Get Hosting »

The Ultimate Collection Of Free Photoshop Patterns

The Ultimate Collection Of Free Photoshop Patterns » Get Hosting »

800+ Photoshop Patterns For Your Next Web Design Project

800+ Photoshop Patterns For Your Next Web Design Project » Get Hosting »

50 Extremely Beautiful Photoshop Patterns for Elegant Designs

50 Extremely Beautiful Photoshop Patterns for Elegant Designs » Get Hosting »

8 Seamless “Dark Metal Grid” Patterns

8 Seamless “Dark Metal Grid” Patterns » Get Hosting »

Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Article Continues Below

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

20 Superb Adobe Photoshop Textures

20 Superb Adobe Photoshop Textures » Get Hosting »

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 ++ » Get Hosting »

CoffeeCup Free HTML Editor

CoffeeCup Free HTML Editor » Get Hosting »

HTML Kit

HTML Kit » Get Hosting »

PS Pad

PS Pad » Get Hosting »

CSS Frameworks

Blueprint

Blueprint » Get Hosting »

The 1140px Grid System

The 1140px Grid System » Get Hosting »

Less Framework 4

Less Framework 4 » Get Hosting »

The Square Grid

The Square Grid » Get Hosting »

EZ CSS

EZ CSS » Get Hosting »

Atatonic

Atatonic » Get Hosting »

Baseline

Baseline » Get Hosting »

Toast

Toast » Get Hosting »

960 Grid System

960 Grid System » Get Hosting »

Sliders

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Easy Slider 1.7 – Numeric Navigation jQuery Slider » Get Hosting »

Nivo Slider

Nivo Slider » Get Hosting »

25 Awesome Free jQuery Image Sliders and Carousels

25 Awesome Free jQuery Image Sliders and Carousels » Get Hosting »

Useful jQuery Image Sliders and Galleries Tutorials

Useful jQuery Image Sliders and Galleries Tutorials » Get Hosting »

Wow Slider

Wow Slider » Get Hosting »

20 Useful jQuery Photo Gallery and Slider Plugins Collection

20 Useful jQuery Photo Gallery and Slider Plugins Collection » Get Hosting »

Dropdown Menus

Superfish

Superfish » Get Hosting »

Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS » Get Hosting »

Sliding Jquery Menu

Sliding Jquery Menu » Get Hosting »

Perfect signin dropdown box like Twitter with jQuery

Perfect signin dropdown box like Twitter with jQuery » Get Hosting »

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

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

CSS3 Dropdown Menu

CSS3 Dropdown Menu » Get Hosting »

Create Vimeo-like top navigation

Create Vimeo-like top navigation » Get Hosting »

Fancy Drop Down Menus Using CSS and JQuery

Fancy Drop Down Menus Using CSS and JQuery » Get Hosting »

A Different Top Navigation

A Different Top Navigation » Get Hosting »

Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery » Get Hosting »

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 » Get Hosting »

Hybrid Core

Hybrid Core » Get Hosting »

Thematic, A WordPress Theme Framework

Thematic, A WordPress Theme Framework » Get Hosting »

PressWork

PressWork » Get Hosting »

Toolbox: An HTML5 WordPress Starter Theme

Toolbox: An HTML5 WordPress Starter Theme » Get Hosting »

Whiteboard Framework

Whiteboard Framework » Get Hosting »

Roots Theme

Roots Theme » Get Hosting »

Theme Options Panels

The UpThemes Framework

The UpThemes Framework » Get Hosting »

Options Framework

Options Framework » Get Hosting »

How to Create a Better WordPress Options Panel

How to Create a Better WordPress Options Panel » Get Hosting »

Create a WordPress Theme Options Panel

Create a WordPress Theme Options Panel » Get Hosting »

WordPress Theme Options Panel Framework

WordPress Theme Options Panel Framework » Get Hosting »

Shortcodes

WordPress Shortcodes: The Right Way

WordPress Shortcodes: The Right Way » Get Hosting »

WordPress Shortcode Tutorial: Simple to Advanced Part 1

WordPress Shortcode Tutorial: Simple to Advanced Part 1 » Get Hosting »

Getting Started With WordPress Shortcodes

Getting Started With WordPress Shortcodes » Get Hosting »

WordPress Shortcode TinyMCE Button Tutorial Part 2

WordPress Shortcode TinyMCE Button Tutorial Part 2 » Get Hosting »

Creating A Toggle Shortcode For WordPress FAQ’s Page

Creating A Toggle Shortcode For WordPress FAQ’s Page » Get Hosting »

Shortcodes Ultimate

Shortcodes Ultimate » Get Hosting »

J Shortcodes

J Shortcodes » Get Hosting »

Shortcodes Pro

Shortcodes Pro » Get Hosting »

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 » Get Hosting »

Plugins for Testing

Debug Queries

Debug Queries » Get Hosting »

Log Deprecated Notices

Log Deprecated Notices » Get Hosting »

Debug Bar

Debug Bar » Get Hosting »

Theme Check

Theme Check » Get Hosting »

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.