Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)
- 7 October 2009
- WordPress
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (40)»
It has been proved. You can become a “RockStar” developing WordPress themes. Think at the audience, think at the creative process… in my opinion a great WP theme is like a great rock song.
In my experience I’ve developed some themes for this great blogging platform and when I start a new WordPress-based project my mind automatically thinks at the development of the website in four steps (once the concept is set). My brain sends me the following orders: first, design the general web-layout in Photoshop; second, convert the mockup to a (x)html/css webpage; third, develope the theme for WP; fourth, hack your template. My brain often is a strange company.
The steps are clear and in this post you can find some useful tutorials and excellent readings to really become a star as WordPress Themes Designer.
I tested many of the following tutorials, and they help me to improve my skills. My brain thanks.
First Step: Design Your Layout in Photoshop
Below there are the top tutorials for learning how to design a perfect web-layout. They show how to create the essential elements for a WordPress-based website using amazing techniques in PhotoShop.
How to Make an Impressive Blog Layout in Photoshop
Create an Elegant Photoshop (PSD) Template for Wordpress
Create a wordpress interface in Photoshop
How to Create a Unique Wordpress Theme
Creating a tech blog layout in Adobe Photoshop
Wordpress Layout #5
Create a Vibrant Modern Blog Design in Photoshop
Create a Magic Night Themed Web Design from Scratch in Photoshop
Creating A Professional Magazine Web Layout
How to Create a Sleek and Textured Web Layout in Photoshop
How to Create a “Worn Paper” Web Layout Using Photoshop
#71: Building a Website (1 of 3): Photoshop Mockup
Second Step: PSD-to-HTML Conversion
I understand, maybe you are bored switching from Photoshop to a blank page that needs your skills to become a perfect (x)html/css web-layout. Don’t worry, below you can find more information to speed and to improve your techniques in psd-to-html conversion.
How to Convert a Photoshop Mockup to XHTML/CSS
Styling Post Headings That Stick Out
Animated Navigation with CSS & jQuery
Tips for Developing Semi-Liquid Layouts
#72: Building a Website (2 of 3): HTML/CSS Conversion
SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme
MakingSEO coded, Free CSS Template with PSD-to-HTML tips
How to Code a Grunge Web Design from Scratch
Third Step: WordPress Rocks!
You are ready “to get in the zone”. Read the following posts to discover the techniques and tricks to build a great WordPress theme.
#73: Building a Website (3 of 3): WordPress Theme
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial
How to Create a Wordpress Theme from Scratch
How to write your own wordpress theme
Build a Newspaper Theme With WP_Query and the 960 CSS Framework
Styling Your Wordpress Comments
So you want to create WordPress themes huh?
Four Step: Hacks to Improve your Theme
Customize your website using the tips collected below. You’ll find some fantastic suggestions on how to boost your website.
The Ultimate Wordpress 2.8 Optimization Guide
Display Thumbnails For Related Posts in Wordpress
Displaying Author Meta Information in Wordpress 2.8
How to : Make a control panel for your wordpress theme
Display Subcategories on Category Pages in WordPress
How To Rearrange Comments in WordPress – Display the Most Recent One on Top
WordPress loop: Get posts published between two particular dates
Wordpress tutorial: Blog posts in different columns
Multiple WordPress Loops Explained
Extra: Resources and Utilities
Build your own set of tools to speed up the the development of your website proudly powered by WordPress.
Wordpress – Lorem Ipsum Test Post Pack
WordPress PSD Framework
Blank Wordpress Themes
Thematic, A WordPress Theme Framework
Free HTML 5 WordPress Theme
ThemeHybrid is about users, quality and WordPress
WP Framework, A blank WordPress Theme Framework
Whiteboard – A Free Wordpress Theme Framework
Extra: Other Useful Articles and Roundups
Below you’ll see a collection of other great articles and roundups to find other awesome resources.
Wordpress Posts Explained…
WordPress Theme / CSS Techniques
Power Tips For WordPress Template Developers
22 Mixed Quality Wordpress Hacks
135+ Ultimate Round-Up of Wordpress Tutorials
300+ Resources to Help You Become a WordPress Expert
Top 50 Wordpress Tutorials
Personalise your WordPress Weblog
Best of the Best? WordPress.org!
All-In-One! Browse Wordpress.org to discover the secrets behind the state-of-the-art publishing platform.

























































25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
How to Create a Battery Icon in Photoshop

This article rocks!!!It’s awesome.
My weak point in WP Theme Developing is the first step.
You’ve posted some very useful links, thanks piervix. ;)
As usual you have provided a very useful and informative article in an effort to share it with my readers I have included a link to it in the sidebar tutorials section of our site. Thanks and keep up the good work.
The most complete article I’ve found on Wordpress Theme design…
Bookmarked… :)
It has been “proven.” Otherwise, great article! :D
Thanks guys!
@Josh: thanks for the tip, I’m trying to improve my skills with English… ;)
@Josh: could you explain me why in the following article the journalist uses “it has proved”? It is curiosity – http://www.timesonline.co.uk/tol/sport/cricket/article6719735.ece
“It has been proved that two-dimensional television pictures often deceive on these occasions.” [...]
Very nice collection of articles and links!
Thanks for the collection of tutorials. They will be very useful when I find time to redo my blog theme properly.
In response to your question to Josh, you were actually in your original usage. According to Garner’s Modern American Usage (a very good usage guide), “‘proved’ is the preferred past participle of prove, but ‘proven’ is often used ill-advisedly…In American English, proven properly exists only as an adjective.”
Proven is actually quite commonly used in North America by English speakers, but it’s not proper usage (I didn’t know that until I looked it up and I’m an editor!).
It’s late and I didn’t proofread. I meant to say “you were actually correct in your original usage.”
@The Frosty: Thanks for the comment!
@Anysia: Thanks for the comment and the perfect explanation!
Awesome article! I just stumbled into this blog today and I am very impressed by all of the awesome content here. Keep up the good work, and if you’re ever interested in having an interview for my blog feel free to check it out and let me know! http://www.insidethewebb.com/
@Inside the Webb: you’re welcome, thanks for the kind words!
Great collection :-) bookmarked
Awesomeness! great article, bookmarked and recommended to friends.
I suppose I can delete all previous bookmarked sites regarding WordPress. Great collection. Thanks for sharing.
Incredibly nice read, several great points were made.
awesome post. I’m going through it one by one to see if I can use any of it for my design :D
Here is another great one http://morzdesign.com/tutorial-how-to-create-a-wordpress-theme-from-scratch/