Blog

It was only about a year ago that Wordpress was introduced into my life. All the positive feedback I read on forums and blogs made me order the book Wordpress Complete and start learning everything there is to create Wordpress Themes. Wordpress is an excellent tool if you’re a designer or developer and want the opportunity to create a flexible web site.

When creating a Wordpress theme the steps look something like this:

Photoshop –> XHTML/CSS –> Wordpress.

How does each step look like then?

Photoshop

I start off by designing the website in Photoshop. This is were I decide where the web sites header, menu and content is placed as well. Appropriate guidelines are set so I can begin to slice up my images.

photoshop to wordpress

Photoshop to XHTML/CSS

When the design is done it’s time to slice up the images so I can code the xhtml/css. Thanks to the guidelines I can quickly use the crop tool and start slicing and saving each image. This step is fast, I just save all the images with appropriate names under a well-thought folder structure.

photoshop to xhtml/css

XHTML/CSS

Now that everything is slice up it’s time to start coding the XHTML/CSS. My primary tool is xHTML-Kit. Everything is coded from scratch with the help of a modified version of Eric Meyers reset.css.

photoshop to xhtml/css

As a preamptive measure I code just about everything that’s going to be displayed on my wordpress site. Some people only code the basics and then return to Wordpress, start implementing the functions and then return to finish off the coding in xhtml/css.

That’s not the way I do it. I do the complete styling (css) of the html that Wordpress renders and then I implement all of the wordpress functions. This process is much smoother, but you need to know exactly how Wordpress renders the HTML.

XHTML/CSS to Wordpress

By now I’ve designed my Wordpress theme, slice up all the images and coded everything in XHTML/CSS. Now it’s time to make this template into a Wordpress site.

Since I’ve already styled everything I just need to divide the page into header.php, footer.php, siderbar.php and index.php. When that part is done I start implementing all of the functions.

photoshop to xhtml/css

The functions I implement depend on what my Wordpress site looks like and how it works. The primary functions are the loop, displaying categories, dates and comments.

I’m basically finished now. I might have some minor adjustments to make, but the core of the site is done and ready to be installed as a theme.

Post to Twitter  Post to Delicious  Post to Digg  Post to StumbleUpon

Related Posts

  1. Reasons I choose Wordpress
  2. SEO-plugins for Wordpress
  3. XHTML/CSS on Graphic River
  4. Launching Antonio Riveras.com
  5. Spice up your web design
  6. Buying Web Elements
  7. jQuery Headers uploaded

Responses

Tevin
7.26.2009

Awesome

sam
12.29.2009

yes..awesome… need more information :)

Comments