I was recently asked what’s involved in integrating a custom design with WordPress,  i.e. creating a custom WordPress theme and then deploying a site with that theme:

How much is the cost of professional website design + development, using WordPress? I’m looking for an average, say 20 page, website, built with WordPress, with a good design. I know how easy it is to build a site with WordPress, so I expect design to be the main cost. Is integrating a custom design with WordPress time consuming / expensive?

To which I replied the age old answer given by engineers, designers, builders and creators in every field since time began: “It depends“.

It’s hard to read a short specification like above and know just how much work is required. We don’t know exactly what’s what with the spec and the question becomes something more like “does the total package provide good return on investment for the total cost?”

So here’s a quick run down of some of the steps involved in creating a custom WordPress theme from scratch and hopefully that gives you an idea of the scope of the work.

Designing for, or modifying, a pre-existing theme framework rather than creating a new custom design involves different knowledge and slightly different tasks, that’s a blog post for another day.

First of all is the design itself. In its own right this stage of the project can take months, or even years in the case of some huge (or badly executed) projects. What makes good design is subjective, but there are somewhat quantifiable issues around fitness for purpose and user experience.

Design the Theme

1. Overall look and feel, initial mood boards and mock-ups
2. Logo (optional)
3. Homepage design
4. Primary content page design
5. Secondary content page design (optional)
6. Blog listing page design (optional)
7. Blog single post page design (optional)
8. Integration of multiple screen size options for all of the above (responsive web design) (optional)

The output of this stage is usually several layered PSDs (PhotoShop Document image files) that are the input to the next stage where we need to translate the design(s) into working code.

I’ve seen prices for “PSD to WordPress theme” range wildly. I know some folks who do it for less than $100. Sound reasonable? Maybe if it’s a simple single page design with say Safari-only testing. But what if the WordPress theme must have multiple different page templates, design variants, if it must be fully widgetised with 12 widget areas, it must have WP menu support, needs to be SEO friendly, and have cross-browser support including support for 3 older Internet Explorer variations. Maybe there are also support contracts, training and other resources required. Then it’s a totally different ball game and $5000+ could easily be realistic.

Code the design

1. Coding of 3-7 above as valid, semantic, SEO friendly HTML.
2. Coding of multiple screen resolutions for responsive web design or mobile variation (optional)
3. Integration of homepage slideshow/animations etc (optional)
4. Testing in modern browsers
5. Require backward compatibility with older browsers? (optional)
6. Create WP page templates/theme files for 3-7 (optional)
7. Add WP menu support (optional)
8. Add WP widget support (optional)
9. Testing
10. Optimise for page load (optional)

The mobile or responsive designs can require a lot more planning and coding depending on the delta between the designs.

The output of the coding phase is a standalone custom WordPress theme. That is the input to the next phase – deployment!

In this phase we add the content. In the example from above we have 20 pages of content – text, images, video, etc. Be very wary of underestimating how long content takes to do, even if it’s “just copy and paste” – in my experience the addition of content usually takes far longer than expected for a myriad of reasons.

Content & Deployment

1. Planning content
2. Creation of 20 page stubs
3. Copywriting 20 pages
4. Editing & verification for 20 pages
5. Sourcing of 20-40 images
6. Integration of other content (images, featured images, video etc)
7. Setup of WordPress menus
8. Setup of WordPress widgets
9. Setup of WordPress plugins (usually ~5-10 in a typical site)
10. Testing in development environment
11. Migration to live server and go-live
12. Further user testing
13. Announcement/press release

That’s a quick overview of most of the steps involved in a typical custom WordPress theme build – it will vary from project to project, obviously small static brochure sites will have very different requirements to large sites with lots of functionality, etc. The alternative is to buy a high quality premium theme, and customise that with the organisation branding and logo. This is usually quicker, and significantly less expensive, but is less flexible than a fully custom build.

Do you have comments, questions or suggestions? I’d love your feedback on this blog post – please leave a comment below – thanks!