Building a Website with a Custom Design Theme

Best of the blog

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?”

custom-wordpress-theme-coding-690x421

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!

Share on facebook
Facebook
Share on twitter
Twitter
Share on google
Google+
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

About the Author

I specialize in helping consultants, speakers and published authors to increase their sales. Unlike other marketers, I focus on customer lifetime value before focusing on conversion optimization. I’ve been building websites and software since 1996 and co-founded several software, web and information based startup companies and provided solutions for businesses and organisations of all sizes. I am the author of Running a Website with WordPress: A Quick Guide for Business Owners, available from Amazon in print and Kindle editions. I blog, and make media of all kinds at WebsiteDoctor.

Close Menu
Ecover of Increase Conversion Rate Free Guide

FREE Guide: 5 Tactics to Help YouSell More Online

This free guide will show you 5 different free methods to massively increase your website conversions (sales and opt-ins). It will also show you HOW and WHEN to use these methods, all with the goal of increasing your online sales.

Get the WebsiteDoctor newsletter & instant access to the free guide:

You have successfully requested the free guide, please check your email in a couple of minutes to find out how to download.

Get Your Free Website Transformation Cheatsheet

This cheatsheet will help you 

 - Find out whether your site needs tweaking or a full rebuild

 - How much you should spend

 - Which website platform you should choose for your project

 - The 3 different types of web designers

 - How to find a good web design company

Get the WebsiteDoctor newsletter & instant access to the free guide:

Your download is on the way!

Ecover of Increase Conversion Rate Free Guide

FREE Guide: 5 Free Ways to Massively Increase Your Website Conversions

This free guide will show you 5 different free methods to massively increase your website conversions (sales and opt-ins). It will also show you HOW and WHEN to use the methods, all with the goal of increasing your online sales. 

Get the WebsiteDoctor newsletter & instant access to the free guide:

You have successfully requested the free guide, please check your email in a couple of minutes to find out how to download.

FREE Website Strategy and Voucher Guide

This free strategy guide contains checklists and tips to help you plan your project to make the most of the Trading Online Voucher Scheme, and avoid mistakes that will cost you time and money. Discover:

  • Which website platform you should choose for your project
  • The 3 different types of web design providers
  • How to find a good web design company

Get the WebsiteDoctor newsletter & instant access to the free guide:

You have successfully requested the free guide, please check your email in a couple of minutes to find out how to download.