My Wordpress Theme Design Process

I had a chance to build a personal website for a mentor, actually he's our senior pastor in our church. And I choose Wordpress to develop his site. Web development has changed already because of Wordpress. Some web agencies are already using Wordpress to quickly build sites for their clients. For this post, I'd like to share the Wordpress theme design process I did for Paulyadao.com.

1. Learn how to create a WP Theme - I studied on how to build a Wordpress theme. I learned a lot from this tutorial - "So you want to create Wordpress Themes huh?"
   
   
2. Look for a theme concept - this particular couple client love anything about eagles and grapes. They have eagle paintings in their house and plates, cups, saucers with grapes design. So I initially used a page background with an eagle face on the right and a bunch of grapes the left side. But I thought it didn't look good. So I decided to stick with the Vine concept. I named this theme the Vine. From the header to page backgrounds you could see vine flourish patterns. A concept can help unify page components and give a unique character to a site.
   
   
   
   
   
   
3. Choose a color scheme - I never thought of tagging a site as a "blue site", a "black and white site", a "red site", etc. until I came across Design Meltdown. Design Meltdown has a collection of current beautiful sites according to their colors. Design Meltdown also has explanations on what each color stands for and how they affect audience first impressions. For paulyadao.com, we preferred (me and my clients) it to be a brown site. A brown site gives a feeling of down-to-earthness. And I thought most of the pictures will display Filipino people who are brown-skinned. If your client has a logo, it's best to stick with one of the colors in the logo.
   
   
4. Decide on the dimensions and column layout - I initially chose the 2-column layout where the right column as the narrower column serving as sidebar and the left column as the wider column for the main content. But I wanted it to be different so I decided on an equal 2-column layout where the right column holds the main content and the left column for images and other components such as the comments form.
   
   ->
   
   
5. Design and code the template components - I started with the header.php, and footer.php since every page will contain them. Then the index.php which is the homepage. Then the page.php which is the layout for page content. Then the single.php for the post content. Then the comments.php for the comments box/form. I also created category pages i.e. category-n.php, which displays only posts for category=n.
   
   
   
   
   
   
   
   
   
   
   
   
6. Install and customize plugins and javascript components - I added the Events Calendar plugin and customized its CSS to go with the color scheme. Then I added the Feature Content Slider and also edited its CSS. These components don't come originally with your Wordpress installation. There are several Wordpress third-party plugins available that you can use in your site. Choose only those that enhance user experience.