How a WordPress theme is designed

Before you install WordPress, pick a theme, and customize the theme, it is important that you understand the process of 1) designing a website Photoshop mockup, 2) converting the Photoshop mockup to html and css, and 3) converting the html to the WordPress php files. This is a very complicated process, but the better you understand it, the better you will be able to customize your theme to getting it looking and working the way you (or your boss/client) wants it.

If you have never used html or css then follow this video tutorial on html & css – The very basics.  There are a lot of great resources online that can help you learn html and css, and now with firebug (tutorial 12) you can preview your html and css changes before you make them.

Here is a good written tutorial to follow for the first time: Design and Code Your First Website in Easy to Understand Steps.

Here is a good video tutorial follow to follow for the first time: Converting a design from PSD to html.

Here is a complilation of “The Ultimate Collection of Brilliant Web Design Tutorials” that just came out today!

1) Designing a Photoshop mockup

a. How to Design a Band Website Layout in Photoshop

b. How to Create an Illustrative Web Design in Photoshop

c. Design and Code a Sleek Website from Scratch Part I


2) Converting a Photoshop mockup to html

a. Coding a Band Website Created in Photoshop

b. Coding a Clean & Illustrative Web Design from Scratch

c. Design and Code a Sleek Website from Scratch Part II

3) Converting html to WordPress php

a. Video tutorials: CSS-Tricks #71, #72, #73.

b. Paid tutorial: The Best PSD to HTML to WordPress Video Series Available

Or, you could hire someone to do this…WPCoder, PSD2HTML, psd2css

Now, start looking for a free WordPress theme:

Top WordPress Themes

50 Free WordPress Themes

40 Free High Quality WordPress Themes

100 Amazing Free WordPress Themes for 2009

Next lab: follow these tutorials.

Next class: Chapter 1 and 2 of Digging into WordPress.  Bring your passwords to class!

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

DAliga February 25, 2010 at 2:23 pm | Permalink

Thanks for the info!

Check out the new DarrenAliga.com