How To Create WordPress Themes From Scratch Part 1

July 14th, 2008 by under Tips

I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.

Table Of Content

Below is the index of the topics that we will go through:

  1. Structuring, Designing in Photoshop.
  2. Slicing and Coding.
  3. WordPress Implementation.
    1. header.php
    2. sidebar.php
    3. about.php – a custom file for the about section in the sidebar.
    4. footer.php
    5. index.php
    6. featured-post.php – a custom file for the featured posts.
    7. page.php
    8. single.php
    9. comments.php
    10. archives.php, links.php
    11. search.php, searchform.php
    12. function.php
    13. image.php

Structuring

This is a very important part in designing a web layout. We need to structure our layout before open Photoshop. The first thing is the purpose of the layout. In our case, this will be a blog layout for WordPress. So, below is what we have in a blog:

  1. Header
  2. Posting area
  3. Sidebar
  4. Single page
  5. Comment
  6. Feedback
  7. Searching field
  8. Page menu
  9. RSS
  10. Archives, Links and About Page

Something we need to keep in mind. We can’t put all things into one basket. So, we CANNOT:

  1. Display too many things in one single page.
  2. Use too many colors and font type.

In this sample, I also try to make is as simple as possible because the purpose of this series of tutorial is to give an example on how to create a wordpress theme. I am going to have a featured post section on the main page. Below is the Final image that we will create.

Final Result

wordpress themes tutorial

Photoshop

Step 1

Create a new document with 1024px X 768px as we are going to create a layout which suit for 1024px resolution. Fill it the background layer with #eae8c6. Now, CTRL + R to bring out the ruler. Draw some guide line for the divine proportion we need. Before this, make sure it is snap. Go to View > snap (selected).
wordpress themes tutorial

Step 2

Grab the rectangle tool and draw a header for it. The height, you have to estimate how much you want. Balance is the main thing you need to concern. Then, apply the blending option as shown below. A black to white gradient with soft light blend mode. Create another rectangle, apply gradient overlay with setting as shown below. Put it 1px below the green bar. It will make it more details. Then, draw a 1 pixel line and put it right above the gap between the two bars you created before. Give it a darker color.
wordpress themes tutorial

Step 3

I use Myriad Pro. So, you guys can edit it by yourself later. Apply drop shadow with the setting shown below. Then, also apply Gradient Overlay with 12% opacity, black to white. For the white outline stroke. Simply hold the CTRL tab and click on the text layer to get the selection. Go to Select > Modify > Contract > 1px. After that, create a new layer. Go to Edit > Stroke > 1px, white, inside.
wordpress themes tutorial

Step 4

Draw a rectangle, remember, the maximum width you can use is 600px. Ok, make its white color. Apply 1px inside white stroke. And, Gradient Overlay with the setting as shown below.
wordpress themes tutorial

Step 5

The read more button is actually using the same technique where we used for the logo. This time, we apply Inner Glow with 8px size and 75% Opacity in Soft Light Blend Mode. Gradient Overlay with 70% opacity also in Soft Light Blend Mode. Finally, A 1px outside stroke with color #47670b. Then, for the 1px inside white stroke. It is same with what we did in step 3.
wordpress themes tutorial

Step 6

Place in some dummy text and photo. You will have something like this. You can use a text generator for this.
wordpress themes tutorial

Step 7

Put in some Dummy Text again. Try to use none anti-alias font for testing. Don’t forget what a wordpress theme needed. Post title, tags, post date, comments number. This time, I add in author photo part to be shown in every post.
wordpress themes tutorial

Step 8

Place a RSS icon. I forgot where I downloaded it already…sorry about that… Then, For the search area, create a rounded rectangle with a maximum width of 330px. Fill it with black color and set it blend mode to soft light. Create another rounded rectangle inside. This will be our input field. Fill it with white color. Apply 1px inside stroke with color – #d0ceae. Then, apply inner Glow, with setting shown below. After that, place the searching icon.
wordpress themes tutorial

Step 9

Draw a rounded rectangle and use the pen tool to draw a dialog box as shown below. You can refer to my previous tutorial in LoonDesign on how to create a custom shape in photoshop. Then, apply drop shadow on it. Use the rectangle tool to create the categories and links content box. The maximum width will be 160px. We need a 10px space in between them.
wordpress themes tutorial

Step 10

We are almost there. Now, we will use the same technique we used to create the header part.
wordpress themes tutorial

Conclusion

You may found that I do not mention about the page navigation part. I think it is too simple for you. Try it out yourself. If really can’t, I am also providing the source file for you here. Overall, there is several things we need to consider when creating a wordpress theme. In this example, we are creating for blogging purpose. So, the major section will be, categories, tagging, author photo, comments and also the RSS feed. I prefer to make things more organizes. So, you can found that all the layers in my psd file are well renamed and each section is well separated. This is for future modification purpose and also for my dear reader to modify it easily.

Single Page

As we are creating theme for wordpress, there must be a single page to display a post and comment section. Here is the final output.
wordpress themes tutorial

Download and continue

827 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. Saffron August 10th, 2012
  2. mleaguelive.com August 14th, 2012
  3. jewelry August 29th, 2012
  4. pinsomo review September 14th, 2012
  5. Price India Review September 15th, 2012
  6. Candra September 15th, 2012
  7. Wordpress Template Designer September 22nd, 2012
  8. tu van thanh lap cong ty October 2nd, 2012
  9. julia perez October 5th, 2012
  10. chinagirl October 11th, 2012
  11. acs October 26th, 2012
  12. الصحف المصرية October 29th, 2012
  13. Sumit November 10th, 2012
  14. vvw November 22nd, 2012
  15. Vishal Khandelwal May 26th, 2013
  16. Vishal Khandelwal May 27th, 2013
Nucleo, Customizable Vector Icons