In this kickass WordPress article there are 24 total resources that will show you how to design and code WordPress themes from scratch. This includes 9 design and coding tutorials, 12 Photoshop mockups, 2 WordPress e-books, and even a developers “Cheat Sheet”.

WordPress Design and Theme Coding: 9 In-depth Tutorials

1. The Ultimate WordPress Theme Tutorial

In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

2. Building Custom WordPress Themes

In this tutorial, you will learn the basics of how WordPress theme works and see how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.

3. WordPress for Designers

A 7 part video tutorial series on developing WordPress Themes. This covers everything from the initial desing to coding it into a full WordPress theme.

4. How To Create WordPress Themes From Scratch

A 3 part tutorial series. This one covers everything from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.

5. Build a Newspaper Theme With WP_Query and the 960 CSS Framework

WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!

6. Designing and Coding a WordPress Theme From Scratch

In this multi-part series I’ll detail how to create and design a WordPress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. At the end of the entire series you can download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

7. Stop Tweaking and Create Your Own WordPress Theme

In this tutorial you will be taught how to create a classic WordPress theme. You will learn how to build valid XHTML template files, how to create them in PHP and define their stylesheet design. This is a beginner’s guide that will hopefully result in a theme of your own or the very least help you understand how a theme is built.

8. Building a Premium WordPress Theme

In this two part tutorial will we cover how to make premium WordPress themes happen. Part 1 shows how the photoshop mock up is created, and in Part 2 we’ll outline how to turn the psd into HTML/CSS and wordpress theme files.

9. Designing for WordPress: Complete Series & Downloads

A three-part video tutorial series which covers downloading and installing WordPress on a server all the way to a completed theme.

Designing Themes in Photoshop: 12 Detailed Tutorials

1. Design a Beautiful Website From Scratch

Through this tutorial, Marko Prljic will point out the tiny details which make a website design look beautiful.

The finished WordPress Theme is available for purchase on Theme Forest.

2. Create a Magazine WordPress Theme from Scratch in Photoshop

This tutorial will guide you through the process and ideas behind the designing a professional WordPress theme from scratch using Photoshop.You can easily use the technique to create your own unique designs.

3. Design a wordpress theme from scratch

If you want to create wordpress themes , Photoshop is the best way to design a theme for your blog. In this tutorial Grafpedia will show you how to design a wordpress theme from scratch.

4. How to Make an Impressive Blog Layout in Photoshop

In this easy to follow web design tutorial, you will learn how to construct a beautiful, sleek, and professional-level weblog design using Adobe Photoshop that you can later use for your very own blog theme.

5. RocknRolla Blog Design

This design tutorial is perfect for creating personal blog themes.

6. Create a Watercolor-Themed Website Design with Photoshop

You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more.

7. Creating a Clean and Elegant Blog Design with Photoshop

A series of articles on designing a WordPress theme in Photoshop.

8. Creating a tech blog layout in Adobe Photoshop

In this tutorial you’ll learn how to design a Premium blog layout in Adobe Photoshop, from A to Z.

9. How to Make a Creative Blog Layout

In this tutorial, we’ll make a creative blog layout using mostly simple shapes, a few brush techniques, some images, and a dose of Photoshop ingenuity.

10. Create a Nature Inspired WordPress Layout

In this Photoshop tutorial, PSD Burn will show you how to create a nature inspired WordPress layout.

11. How to Create a Sleek and Textured Web Layout in Photoshop

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

12. Making the ‘Clean Grunge’ Blog Design

Clean grunge websites are a combination of the grungy with the functional, the messy with the ordered. The results of this are some of my favorite all time designs.

WordPress E-Books To make You An Expert

1. How To Be A Rockstar WordPress Designer

Managing web content has always been tricky, but with WordPress, any web designer can have a flexible, free and powerful CMS to use not just on blogging projects, but on all sorts of websites. In How To Be A Rockstar WordPress Designer you will learn step by step how to take a straight HTML site and power it with WordPress.

During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged in with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to.

If you’ve ever wanted to get started with WordPress theming, or you’re looking to take your skills to the next level with advanced theming concepts, How To Be A Rockstar WordPress Designer is the book for you!

2. Digging Into WordPress

Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.

In clear, easy-to-read language, Digging into WordPress shows you how to tap WordPress’ potential and take your site to the next level. From setup and configuration and customization to syndication, security and optimization, Digging into WordPress gives you everything you need to maximize the success of your site.

Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.

The Most Kickass WordPress Cheat Sheet

Template tags are used within your blog’s Templates to display information dynamically or otherwise customize your blog.

Ekin Ertac has created a really useful WordPress Cheatsheet that lists out all the available template tags and their purpose, along with listing several other useful information for creating or modifying themes.

In Conclusion… go build a theme!

Let’s start this off by properly including JQuery in WordPress.

1. Including jQuery in WordPress (The Right Way)

[php]<?php wp_enqueue_script("jquery"); ?>[/php]
If you want, you can just download jQuery, put it on your server and link to it from your header.php file in the section. But that can cause you grief. For one thing, some plugins use the jQuery library, and they are going to load it as well. This can cause problems. How was your plugin to know you already had it loaded?

View Tutorial

Now that you have the awesomeness that is JQuery included in your WordPress theme, check out these tutorials.

2. Create A Tabbed WordPress Sidebar Using jQuery

Tabbed sidebar elements are in. Why bother making users scroll down the page, when they can simply click a tab to quickly access various parts of your site? This tutorial is primarily based off WordPress, but can easily be ported anywhere else.

View Tutorial

3. WordPress Featured Post Slideshow

Here, we’ll be learning how to create a featured content section with WordPress and animate it with jQuery. This is great for News or Magazine themes. Plus it’s just awesome.

View Tutorial

4. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Implement a nice & clean sliding login panel built with jQuery into your WordPress blog.

View Tutorial

5. Build the ANidea Theme Switcher using jQuery

This tutorial walks you through the process of creating a theme switcher like the one used on ANidea.

View Tutorial

6. Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

View Tutorial

7. WordPress Multi-Level Drop Down menu using jQuery

As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.

The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility.

View Tutorial

8. Create a Twitter-Like “Load More” Widget

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

View Tutorial

9. Using jQuery to liven up your WordPress login

Here’s a really quick method of simplifying the WordPress login process using a jQuery lightbox.

View Tutorial

10. Adding Form Validation to WordPress Comments using jQuery

When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial you will be shown you how to use jQuery to do some instant checking on an example comment form.

View Tutorial

This first part of the code will detect the browser that your visitor is using.
[php]
if (strpos($_SERVER['HTTP_USER_AGENT'], ‘MSIE 6′) !== false) {
// do something
}
[/php]

This next part will now tell WordPress the theme you would like to display to the IE6 users. Or should we say, losers?
[php]
add_filter(‘template’, ‘serve_default_to_iesix’);
add_filter(‘option_template’, ‘serve_default_to_iesix’);
add_filter(‘option_stylesheet’, ‘serve_default_to_iesix’);
function serve_default_to_iesix($theme) {
if(strpos($_SERVER['HTTP_USER_AGENT'], ‘MSIE 6′) !== false)
$theme = ‘default’;

return $theme;
}
[/php]

Now with these two powers combined, we have a complete plugin that makes you feel proud to use a modern web browser.

Just paste the following complete code snippet in a new file and save it as ie6loser.php or something similar that makes you chuckle at the thought of using ie6. Upload it to your wp-content/plugins directory and activate it on your WordPress dashboard.

[php]
<?php
/*
Plugin Name: Serve Default to IE6
Plugin URI: http://www.nathanrice.net/blog/serve-ie6-visitors-the-default-wordpress-theme
Description: This plugin will serve the default theme to any visitors using IE6.
Author: Nathan Rice
Author URI: http://www.nathanrice.net/
Version: 1.0
*/

add_filter(‘template’, ‘serve_default_to_iesix’);
add_filter(‘option_template’, ‘serve_default_to_iesix’);
add_filter(‘option_stylesheet’, ‘serve_default_to_iesix’);
function serve_default_to_iesix($theme) {
if(strpos($_SERVER['HTTP_USER_AGENT'], ‘MSIE 6′) !== false)
$theme = ‘default’;

return $theme;
}
?>
[/php]

.via { Nathan Rice }