In this tutorial i will show you step by step how to design a Wordpress Theme from scratch. If you don’t know already we have a membership here on Graphstock.com which allows you to download all our existing resources, plus the one we will release in the next year.

Register for a Premium account, and you will be able to download the PSD layout, and also the Wordpress Theme.

You can see the wordpress theme in action

Wordpress theme features

• jQuery Featured Showcase Slider with 28 animations effects
• Dropdown for Categories
• Threaded Comments, 2 deep!
• Gravatar and widget ready
• Tableless code
• Cross Browser Compatible
• Wordpress 2.9 Compatible

Download our PSD Framework

For start we will need to create a new document in Photoshop. Please download the following PSD layout, and turn on the guides. Based on this PSD Layout you can create any type of layouts based on this layout. If you will follow my next tutorials i will show you how to optimize your workflow, to create better layouts, and templates, with minimum of effort. When i create screen shots i will hide the guides, but when you try to create this clean wordpress theme, please keep the guides visible.

After you open the graphstock.psd layout please select your Paint Bucket Tool, and with the following color #f0f0f0 fill the background layer. This will be the background of our wordpress theme. When you try to convert your PSD layouts to CSS/xhtml it is important to write down all the colors you will use.

Step 1 – Create the background of the Wordpress theme

Now we will start to add a nice shape on the background. i will select Rectangle Tool, and i will place the shape like in the following image

Add the following layer styles

This is how my background will look at the end.

Step 2 – Make room for a nice animated slide show

Right above this area i will place a nice image. Here i will make place for a nice slideshow, where you can feature your products, or if you want some important posts. You can also use the slide show to place advertising. I am sure your advertisers will love the spot, and you can get some good money for such big areas.

Step  3 – Create the body of the layout

In this step i will use Rounded Rectangle tool to create the placeholder for our body. Please click on the following image to see better my result

Here are the layer styles i have used to create the effects for this round shape.

I will duplicate this layer ( cmd+J ), and i will add change the layer styles with this ones.

This new layer will be a little darker, because i will use the right side to create the sidebar of the Wordpress theme. Now i will turn on the guides for a few seconds, and i will right click on this layer in my layer palette, then from the drop down menu i will select Rasterize layer.

I will select Rectangular Marquee Tool, and i will select the left side of the shape, and then i will hit Delete on my keyboard. this is my result so far.

Do not forget to press on cmd+D to deselect.

Step 4 – Create the footer of your Wordpress theme

On the bottom of the layout create a new shape with Rectangle Tool. I will use the following color: #bfb9ab, then i will go to Filter > Noise > Add Noise, and i will use add a small amount of noise.

Step 5 – Add details on your footer

In this area i will create another 2 shapes

Step 6 – Create widgets area in the footer

With Horizontal Type Tool i will write some text. In the same time i will add also some lines, and a nice icon with a paper clip.

I will create the next widget area. here i want to be able to see the last blog posts. I will select rounded rectangle tool, and i will place there some rounded shapes, and also some text.

As you can see i have there some round shapes. For this shapes i have used the following layer styles

In the middle of the rounded shapes, i will add of course some images. For now i will add only some dark shapes.

Step 7 – Create the last widget

Now i will add some icons, and some text on the bottom part of the layout. this will be our last wordpress widget

Step 8 – Create the header of your Wordpress theme

To create the header simply select Rectangle Tool, and create a big shape.

This is the layer style i have used

Step 9 – Make the logo stand out

I will create now a new layer, and i will place it on top of all layers. The shortcut for this action is ( cmd+alt+Shift+N )

I will select Brush tool, and i will make sure i will have a round smooth brush. Then on the new layer, i will create a white drawing like in the following image

I will change the opacity for this white spot to 30 %. You can change the opacity value if you select the layer in your layer palette, and then on the top part of the layer palette you can change the opacity settings. After i will place there our Graphstock logo, our clean wordpress header will look like in the following image.

Step 10 – Create the navigation

I will select Rounded rectangle tool , and i will create a nice navigation area. here will be placed the categories, and our subcategories.

Step 11 – Create a nice drop down menu

When you try to convert this PSD layout into a fully functional layout, you need also to create the drop down menus. I will select pen tool, and i will create a shape like the following one

Then i will add there some subcategories, and between each subcategory i will add also some lines.

Step 12 – Create your first blog post

One of the most important things is to create a nice and beautiful area where your content will be available for readers. Please remember that people will come back to your blog if your will have great content, but even if you have great content, this is not the only one reason people will come back to your blog.

Your content needs to appear very well organized.

First we will create a white shape with Rounded rectangle tool, and then i will add also some text, and horizontal lines.

Of course i will add there also a 200×200 pixels image, and on the right side i will add the number of comments, the author of the post, and also the date when your blog post was written.

Under the bottom line i will add a nice shape. You can create this shadow very easy. First create a shape with ellipse too

Go to Filter > Blur > Gaussian blur, and use 7 pixels for Radius. Select rectangular Marquee Tool , and make a selection on top of the shape

Hit the Delete, key, and then lower the opacity value until you like the effect. Do not forget to press on cmd+D to deselect. this is my result so far.

I will duplicate all the layers i have used to create our first blog post, and i will place them under this post. in this way you can see how it will look your posts. As you can see from my next image, i have placed there also a navigation area. When i will code this wordpress blog layout, i will use a plugin, but in the moment i write this tutorial i am not quite sure which one i will use.

Step 13 – create the sidebar of your wordpress layout

One of the most important things when you create the sidebar you need to leave room for ads. Probably this will be the most important part of the sidebar, and needs to be placed on top of the sidebar. in my case i will create a nice 300×300 pixels banner , and under it i will create the categories, and the search.

Step 14 – Add smooth details on your Wordpress theme.

One of my last steps is to add a nice shadow right under the header image. I will not explain one more time how to create such a shadow. Please see above how i turned a simple shape into a nice shadow

Final Result

This is my final result. Please click on the image to see better the end result

Register for a Premium account and Download this Wordpress Theme + HTML/CSS layout + PSD Layout

Register for a Premium account and you will be able to download this PSD layout, and also the fully functional Wordpress theme