Pages

Thursday, July 16, 2009

How To Create WordPress Themes From Scratch Part 1

July 14th, 2008 by kailoon 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

Download Continue read on How To Create WordPress Themes From Scratch Part 2 – Slicing and CSS/XHTML Coding.

 

Original post can be found here

Related Posts: