WordPress Theme development process – Beginner, Part 1 (Overview)

Theme Development Overview

Practicing theme development over the last two years for a couple websites has been exciting and difficult at various times. These themes were designed for a specific purpose and not well tuned to be used out in the wild. In the process of creating the themes I researched for days (months) for useful sites that encompassed the full development process, but was unable to find one good source that was also current. I am a fairly new WordPress user, and in sharing my process it will help me to remember what I have done and where I can make improvements. The following pages will be a work in progress and I always welcome constructive feedback on how to make this process better or easier to understand. While my process is certainly not the ONLY way, it works for my purposes.

The Project

In order to understand my process, I will take on creating a new theme for this site. I will try to stop and take notes along the way to share, just be warned that I might accidentally forget to mention something so don’t hesitate to ask for clarification. The goal for this project will be to create a useful generic theme that I can quickly apply to other sites as a temporary base upon which to make adjustments per the design needs for that site. While there are many different frameworks available to use, for this project I will start with _s(Underscore.me) and Twitter Bootstrap. I do not intend to create something complicated, so as to provide a good resource for those of us that are new to WordPress and themes (hence the beginner in the title)

General Steps

Here are the steps to follow along in the series.

1. Overview – describe  the purpose
2. Local development – Set up development server with DesktopServer Limited (free version)
3. Identify user – and problem I am attempting to solve for them
4. Topic list – Categorize list of needs of users and topics of discussion
5. Research similar sites – and analyze how they answer the user’s needs
6. Create storyboards – or sitemaps for different posts and pages.
7. Sketch on paper various page layouts, first in mobile view and then on up to desktop
8. Determine extra functionalities needed and possible plugins that could be utilized
9. Create page/post templates
10. Test, Test, and Test some more
11. Upload to a live site

Recap

This is a work in progress and a way for me to remember my own processes for future projects. This is not the only way to accomplish the goal, but will hopefully satisfy the need for a comprehensive beginner’s tool. The goal will be to create a simple theme for this site and utilize cost effective solutions. The hope is to eventually upgrade the process to make use of other premium services to expand my capabilities and make the development process even easier.

Next Step > Setup local development server