Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)

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

Become A WordPress Theme Developer Who Rocks In Four Steps

Create an Elegant Photoshop (PSD) Template for Wordpress

Become A WordPress Theme Developer Who Rocks In Four Steps

Create a wordpress interface in Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

How to Create a Unique Wordpress Theme

Become A WordPress Theme Developer Who Rocks In Four Steps

Creating a tech blog layout in Adobe Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

Wordpress Layout #5

Become A WordPress Theme Developer Who Rocks In Four Steps

Create a Vibrant Modern Blog Design in Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

Create a Magic Night Themed Web Design from Scratch in Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

Creating A Professional Magazine Web Layout

Become A WordPress Theme Developer Who Rocks In Four Steps

How to Create a Sleek and Textured Web Layout in Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

How to Create a “Worn Paper” Web Layout Using Photoshop

Become A WordPress Theme Developer Who Rocks In Four Steps

#71: Building a Website (1 of 3): Photoshop Mockup

Become A WordPress Theme Developer Who Rocks In Four Steps

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

Become A WordPress Theme Developer Who Rocks In Four Steps

Styling Post Headings That Stick Out

Become A WordPress Theme Developer Who Rocks In Four Steps

Animated Navigation with CSS & jQuery

Become A WordPress Theme Developer Who Rocks In Four Steps

Tips for Developing Semi-Liquid Layouts

Become A WordPress Theme Developer Who Rocks In Four Steps

#72: Building a Website (2 of 3): HTML/CSS Conversion

Become A WordPress Theme Developer Who Rocks In Four Steps

SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

Become A WordPress Theme Developer Who Rocks In Four Steps

MakingSEO coded, Free CSS Template with PSD-to-HTML tips

Become A WordPress Theme Developer Who Rocks In Four Steps

How to Code a Grunge Web Design from Scratch

Become A WordPress Theme Developer Who Rocks In Four Steps

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

Become A WordPress Theme Developer Who Rocks In Four Steps

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Become A WordPress Theme Developer Who Rocks In Four Steps

How to Create a Wordpress Theme from Scratch

Become A WordPress Theme Developer Who Rocks In Four Steps

How to write your own wordpress theme

Become A WordPress Theme Developer Who Rocks In Four Steps

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Become A WordPress Theme Developer Who Rocks In Four Steps

Styling Your Wordpress Comments

Become A WordPress Theme Developer Who Rocks In Four Steps

So you want to create WordPress themes huh?

Become A WordPress Theme Developer Who Rocks In Four Steps

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

Become A WordPress Theme Developer Who Rocks In Four Steps

Display Thumbnails For Related Posts in Wordpress

Become A WordPress Theme Developer Who Rocks In Four Steps

Displaying Author Meta Information in Wordpress 2.8

Become A WordPress Theme Developer Who Rocks In Four Steps

How to : Make a control panel for your wordpress theme

Become A WordPress Theme Developer Who Rocks In Four Steps

Display Subcategories on Category Pages in WordPress

Become A WordPress Theme Developer Who Rocks In Four Steps

How To Rearrange Comments in WordPress – Display the Most Recent One on Top

Become A WordPress Theme Developer Who Rocks In Four Steps

WordPress loop: Get posts published between two particular dates

Become A WordPress Theme Developer Who Rocks In Four Steps

Wordpress tutorial: Blog posts in different columns

Become A WordPress Theme Developer Who Rocks In Four Steps

Multiple WordPress Loops Explained

Become A WordPress Theme Developer Who Rocks In Four Steps

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

Become A WordPress Theme Developer Who Rocks In Four Steps

WordPress PSD Framework

Become A WordPress Theme Developer Who Rocks In Four Steps

Blank Wordpress Themes

Become A WordPress Theme Developer Who Rocks In Four Steps

Thematic, A WordPress Theme Framework

Become A WordPress Theme Developer Who Rocks In Four Steps

Free HTML 5 WordPress Theme

Become A WordPress Theme Developer Who Rocks In Four Steps

ThemeHybrid is about users, quality and WordPress

Become A WordPress Theme Developer Who Rocks In Four Steps

WP Framework, A blank WordPress Theme Framework

Become A WordPress Theme Developer Who Rocks In Four Steps

Whiteboard – A Free Wordpress Theme Framework

Become A WordPress Theme Developer Who Rocks In Four Steps

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…

Become A WordPress Theme Developer Who Rocks In Four Steps

WordPress Theme / CSS Techniques

Become A WordPress Theme Developer Who Rocks In Four Steps

Power Tips For WordPress Template Developers

Become A WordPress Theme Developer Who Rocks In Four Steps

22 Mixed Quality Wordpress Hacks

Become A WordPress Theme Developer Who Rocks In Four Steps

135+ Ultimate Round-Up of Wordpress Tutorials

Become A WordPress Theme Developer Who Rocks In Four Steps

300+ Resources to Help You Become a WordPress Expert

Become A WordPress Theme Developer Who Rocks In Four Steps

Top 50 Wordpress Tutorials

Become A WordPress Theme Developer Who Rocks In Four Steps

Personalise your WordPress Weblog

Become A WordPress Theme Developer Who Rocks In Four Steps

Best of the Best? WordPress.org!

All-In-One! Browse Wordpress.org to discover the secrets behind the state-of-the-art publishing platform.

Become A WordPress Theme Developer Who Rocks In Four Steps

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

40 Comments

  1. marbio

    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. ;)

  2. Scott Madden

    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.

  3. Steph (Technofeliz)

    The most complete article I’ve found on Wordpress Theme design…

    Bookmarked… :)

  4. Josh

    It has been “proven.” Otherwise, great article! :D

  5. piervix

    Thanks guys!

    @Josh: thanks for the tip, I’m trying to improve my skills with English… ;)

  6. piervix

    @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.” [...]

  7. The Frosty

    Very nice collection of articles and links!

  8. Anysia (Booklorn on Twitter)

    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!).

  9. Anysia (Booklorn on Twitter)

    It’s late and I didn’t proofread. I meant to say “you were actually correct in your original usage.”

  10. piervix

    @The Frosty: Thanks for the comment!

    @Anysia: Thanks for the comment and the perfect explanation!

  11. Inside the Webb

    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/

    • piervix

      @Inside the Webb: you’re welcome, thanks for the kind words!

  12. Tutorijali HDonWEB

    Great collection :-) bookmarked

  13. Anton Korzhuk

    Awesomeness! great article, bookmarked and recommended to friends.

  14. Keith

    I suppose I can delete all previous bookmarked sites regarding WordPress. Great collection. Thanks for sharing.

  15. 200.30.189.194:8080

    Incredibly nice read, several great points were made.

  16. Jenny

    awesome post. I’m going through it one by one to see if I can use any of it for my design :D

  17. S. Ramelan

    Here is another great one http://morzdesign.com/tutorial-how-to-create-a-wordpress-theme-from-scratch/

Trackbacks

Leave your comment

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US