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
- 2. Coding the HTML / CSS
- 3. Coding your WordPress Theme
- 4. Testing Your Theme
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
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
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 ++
CoffeeCup Free HTML Editor
HTML Kit
PS Pad
CSS Frameworks
Blueprint
The 1140px Grid System
Less Framework 4
The Square Grid
EZ CSS
Atatonic
Baseline
Toast
960 Grid System
Sliders
Easy Slider 1.7 – Numeric Navigation jQuery Slider
Easy Slider 1.7 – Numeric Navigation jQuery 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
20 Useful jQuery Photo Gallery and Slider Plugins Collection
20 Useful jQuery Photo Gallery and Slider Plugins Collection »
Dropdown Menus
Superfish
Sexy Drop Down Menu w/ jQuery & CSS
Sexy Drop Down Menu w/ jQuery & CSS »
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
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
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
Hybrid Core
Thematic, A WordPress Theme Framework
Thematic, A WordPress Theme Framework »
PressWork
Toolbox: An HTML5 WordPress Starter Theme
Toolbox: An HTML5 WordPress Starter Theme »
Whiteboard Framework
Roots Theme
Theme Options Panels
The UpThemes 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
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.
Test Data
Theme Unit Test
Plugins for Testing
Debug Queries
Log Deprecated Notices
Debug Bar
Theme Check
posted on WPLift: http://wplift.com/the-ultimate-free-wordpress-theme-development-toolkit/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Wplift+%28WPLift%29
You must log in to post a comment.