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:
- Structuring, Designing in Photoshop.
- Slicing and Coding.
- WordPress Implementation.
- header.php
- sidebar.php
- about.php – a custom file for the about section in the sidebar.
- footer.php
- index.php
- featured-post.php – a custom file for the featured posts.
- page.php
- single.php
- comments.php
- archives.php, links.php
- search.php, searchform.php
- function.php
- 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:
- Header
- Posting area
- Sidebar
- Single page
- Comment
- Feedback
- Searching field
- Page menu
- RSS
- Archives, Links and About Page
Something we need to keep in mind. We can’t put all things into one basket. So, we CANNOT:
- Display too many things in one single page.
- 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
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).
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.
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.
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.
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.
Step 6
Place in some dummy text and photo. You will have something like this. You can use a text generator for this.
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.
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.
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.
Step 10
We are almost there. Now, we will use the same technique we used to create the header part.
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.
Download and continue
Share it!
('
)
Hey this is really good, thank you