Designing and Coding WordPress Themes from Scratch
SHARE THIS

Imagine it’s 2am and you just hit “activate” on your most anticipated WordPress theme to date. Finally, after weeks of hard work you now get to showoff that friggin’ sweet WordPress theme you designed and coded from scratch.

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.

custom-theme-coding-wall

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.

layout-drawing

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.

built-theme-tut

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.

Design-Beautiful-Website-Scratch-blog-design

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.

Create-Magazine-Wordpress-Theme-Scratch-Photoshop

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.

Design-wordpress-theme-scratch-grafpedia

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.

How-to-Make-Blog-Layout-Photoshop

5. RocknRolla Blog Design

This design tutorial is perfect for creating personal blog themes.

blog-design-tutorial-rocknrolla

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.

Create-Watercolor-Theme-Wordpress-Website-Design-Photoshop

7. Creating a Clean and Elegant Blog Design with Photoshop

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

Create-Clean-Elegant-Blog-Design-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.

create-tech-blog-layout-photoshop

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.

creative-blog-layout-photoshop-psdtuts

10. Create a Nature Inspired WordPress Layout

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

Create-Nature-Inspired-WordPress-Theme-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.

Create-Sleek-Textured-Web-Layout-Photoshop

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-blog-design-tutorial-grunge

WordPress E-Books To make You An Expert

1. How To Be A Rockstar WordPress Designer

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

digwp

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.

wordpress-cheat-sheet

In Conclusion… go build a theme!

1000s Template Choices for Your Site - From $5