Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

WordPress Theme Development Process

June 27th, 2010

Recently I was developing a new WordPress theme and decided to document the process for my own reference. Upon completion, I thought it might be useful to share this process with other theme designers. Check out the bottom of the post for a further explanation of a few key points.

Theme Process Checklist

1. Creative brief
2. Information architecture
3. Photoshop comps
4. Slice comp, saving images
5. Setup database on server
6. XHTML/CSS homepage template coding
7. Browser testing
8. Cut XHTML/CSS comp intp .php template files
9. Upload & Install WordPress on server
10. Upload theme files to server
11. Install Maintenance Mode plugin and enable it
12. Tweak admin settings
13. Import post formatting template file for testing
14. Install and configure plugins
15. Test all theme template files
16. Install Google Analytics tracking code in footer.php
17. Browser testing
18. Run through WordPress theme and development cheat sheets and checklists, making any necessary changes
19. Browser testing
20. Disable maintenance mode plugin and take website live

Creative brief

Having the client fill out a creative brief is critical in the design process. Many times, designers will jump into the job with only some of the details. Trust me, don’t do this. In the end, it’ll mean additional work when you have to go back and change things. In the near future, I’m planning on posting a creative brief template you can use for your projects.

Information architecture

Before you get to far into your project, make sure you create a wireframe and/or a sitemap for the entire theme. Show your client the sitemap and get them to sign off on it. This will save you a potential headache down the road.

XHTML/CSS homepage template coding

I’m not sure if other theme developers do this, but before I start doing any php template coding, I prefer to code the template in XHMTL. That way I can work out any CSS and/or layout bugs. Once my XHTML template is complete, I cut it up into the WordPress template files.

Browser testing

I prefer to test in the following browsers, I would suggest you do the same. MAC: Safari, Chrome, Firefox, and Opera. PC: IE6-8, Safari, Firefox, Chrome, and Opera.

Cut XHTML/CSS comp into .php template files

Below is a list of template files I use when creating a theme. This is only a suggestion, you’re free to use whatever template files you prefer.

1. 404.php
2. acrhive.php
3. author.php
4. category.php
5. comments.php
6. css folder (for additional stylesheets like print.css)
7. footer.php
8. functions.php
9. header.php
10. images folder
11. index.php
12. loop.php
13. page.php
14. screenshot.png
15. search.php
16. searchform.php
17. sidebar.php
18. single.php

Tweak admin settings

When you’re setting up a new blog, there are few admin settings you should tweak. First head over to Settings > General and fill in the fields. Next, head over to Settings > Writing. I like to increase the size of the post box to 30 lines for easier post writing. I’d also suggest setting a default post category. Third, go to Settings > Reading and set how many posts you would like to appear on your homepage. Finally head to Settings > Permalinks and choose a link structure for you blog. I personally prefer to use the Month and Name option.

Import post formatting template file for testing

WPCandy.com has a great sample WordPress content file you can download for free. Once you download it, import the file into your blog and it will create a number of sample posts that show a number of post styles. Check out the above link for more info and to download the file.

Install and configure plugins

At this point of the process, I recommend you install, configure and test all of your plugins. Below is a list of plugins I install on all my theme builds. Feel free to use them if you like:

1. askimet (comes installed)
2. All in one SEO pack
3. Contact Form 7
4. Google XML sitemaps
5. WordPress Database Backup

If you have any questions about this process, feel free to post them below. Thanks for reading.

Tags: best-practices, checklist, development, process