Close
Close

Designing a Custom WordPress Theme – Working with a Designer

Today, Amir Helzer from WPML (WordPress Multilingual) shares his experience building a custom WordPress theme.

When you’re designing your blog all sorts of options are open to you – starting with a free theme (that you can later edit), through a premium customizable theme (like Thesis or Revolution2) and ending with a custom theme, created just for your site.

In January, Web Designer Matt Brett talked here about how to redesign a blog (and part 2). These posts covered the design goals, functionality and implementation. I’d like to talk about the process of working with the designer – the person who’s going to create your theme.

If you’re thinking about getting a custom theme, following these steps can make the process shorter, more productive and more enjoyable for both you and the designer.

1) State what you need and define the scope of the work

We’ll start with a list of everything that we need from this design:

A WordPress theme – sounds obvious, but you don’t want the designer to supply you just the PSD files, or a HTML file that you can turn into a theme yourself, right? Specify which version of WordPress you’re going to use it with.

Logo – a professionally designed logo can be expensive by itself, so make sure it’s included. When you ask for a logo, remember that you’ll also want to use it in printed material (like business cards or in magazines). This means asking for a high resolution version of your logo with transparent background.

Copyright – make sure it’s crystal clear that you have full copyright and exclusivity. This implies that the designer cannot use anything that violates the rights of others.

The discussion about copyright should clearly mention back-links. Web designers often give away free themes in exchange for credit links. If you want to link back to your designer’s site, that’s great, but you should decide that. You can instruct the designer to get your approval for any outgoing link placed in the theme.

Testing – ask the designers to supply a preview of your theme on their server. Normally, you can’t test their work on your live site. You might need to supply contents for this, or just do with the standard Lorem Ipsum.

2) WordPress theme basics – which elements to ask for

WordPress is evolving and theme design is more than just putting HTML in pages. You need to specify what kind of functionality you expect to get from your website.

List everything that you know you need. Here is what I told my designer when we started:

My design should include:

  • Front page
  • ‘Regular’ internal pages – for general purpose texts.
  • ‘Features’ internal pages – these pages should have a unique template that lets me highlight special features.
  • Posts (with threaded comments)
  • Category pages
  • Search

The design should have site-wide navigation including top tabs with drop-down menus, breadcrumbs trail navigation and context-dependent sidebar navigation. There should also be room reserved for the language switcher (inside the header).

The sidebar should be widget ready. Comments in posts and pages must support threading. Every page in the website must be HTML clean (pass HTML validation).

This list doesn’t tell the designer how I want the site to look, it just lists which things I need. Since she was doing a redesign for an existing site, I didn’t need to explain much about the contents for each page. If you’re getting a theme for a new site, there’s more explaining to do.

3) Prototypes come before the design

Even though you’ve chosen great designers, they’re not mind-readers. Ask the designer to provide prototypes before building any HTML or coding the theme. This way, you can approve the design concept before too much work has been put into it.

A prototype is normally delivered as an image (JPEG or PNG). During your work on the prototype, you need to take care of all the design issues. This includes the color scheme, look and feel, layout and content arrangement.

When you’ve accepted the prototype, know that this is how your site will appear. There’s not much room for design changes later on in the process. The designer’s job changes from design to implementation.

4) Payment and delivery terms

Last, but not least, before the project kicks off, you should agree on both payment and delivery terms.

Design work is not like building a railroad. You can’t pay per mile. However, there are some checkpoint on the way:

  • Prototype / wireframe design
  • Working draft
  • Completed and polished design

Both you and the designer would feel better if payment is split per delivery. You can make an initial payment, release payment when each milestone is met and the final payment is left for when the work completes and is fully reviewed.

Ready to begin your custom theme design? Here’s a quick checklist of what we talked about:

  1. Project overview
  2. Detailed scope of work
  3. Payment and delivery terms

In the next part of this post (tomorrow), we’ll talk about how to help the design go smoothly and make sure you’re getting everything you asked for.

This post was written by Amir Helzer, founder of WPML, a mega-plugin that aims to turn WordPress into a fully featured multilingual content management system.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Dee Yan says:

    The good theme is working on many browser, so after design, before we give the money, we should try on main browser like IE and Firefox.

  2. This is a good route to go, for people who can afford it.

    With a little bit of elbow grease, though, you can do quite a bit of customization on your own. A bit of PHP knowledge will be required (assuming wordpress), and a bit of time searching the internet for how to perform specific actions in WordPress. Make sure you back up your theme files before you start playing. I always have 2 copies of my theme on my site – experimental and production.

    I wouldn’t say that my site is on par with some of the professionally designed site, but it was free :) I started with a free theme (elements of SEO) and made quite a few changes.

    The theme originally had two sidebars on the right; I shifted on to the left. I manually added adsense code, including the ability to display ads for different publishers (we have 3 writers who share the revenue). I added the functionality to have author images appear at the top of posts and tweaked the verbiage at the top and bottom.

    And, of course, I added several plug-ins. The end result – http://www.observingcasually.com – is much different than the starting product.

  3. BloggerUser says:

    I agree with cosmo working it on own if you have general idea of using wordpress. I think going for a designer just adds some more cost , however its pretty much good for those who can really afford all those.
    I wonder someone could also write about the blogger/blogspot.

  4. Omar Zaibak says:

    A solid overview of the major things to look for. In my own experience, it can be very tricky finding the right designer, and in many cases the person looking for one doesn’t know much about websites and design so can be taken advantage of.

    That being said, this gives a high-level overview of what is required. Me personally, I ended up custom modifying the WordPress Atahualpa theme to my own needs.

    The process of doing so has made me feel very comfortable in designing and creating websites.

    Like Kosmo said this is good, if you have the money, and it ain’t cheap for a quality job!

  5. Omar Zaibak says:

    I’d just like to follow up on Kosmo’s comment, here’s my website http://www.bluefalconmarketing.com that is based on the WordPress Atahualpa theme, the best one in my opinion because of its ease of use and friendliness, check it out!

  6. Nok says:

    I’ve lucked out here,My girlfriend is a professional web designer. :) Sites not done yet,but I’m getting excited. This will be my first blog as well so it should be a fun adventure.

    This might not be the right area to ask, but do you have to have a established blog with traffic before you can get Google adsense? The reason I ask this is actually relevant to this topic,because I would like to have her smoothly build the ads into my site design.

  7. Pat with SPI says:

    This is really good advice.

    I have a custom theme on my website, and I have to tell you…the response from my readers have been overwhelming. Many people have asked where I got my theme, and when they find out it was custom made just for me, they think that’s really awesome.

    A lot of people don’t go this route because they don’t want to spend money on a designer, but really, it’s not all that expensive…especially if you’re going to make money off your website eventually – you’d be surprised at how much the design of the website has to do with that.

    Thanks Darren. Cheers mate!

  8. hey, found your post on twitter..
    and i have one more doubt, how did you add your logo in the feed burner feeds page??

    please reply me..

  9. ThatBloggerBroad says:

    Having worked in IT (as a not-quite-geek) and in commercial writing, I can tell you this is a good, time-tested process in creative work in general, particularly asking for Photoshop prototypes and a test environment for the finished code as “checkpoints.” Providing examples of websites and blogs whose design you want to emulate (not copy – emulate) will also give the designer an idea of your visual sensibility and go a long way toward minimizing misunderstandings.

    Hats off to Kosmo for wading into all that code – I still struggle with getting the dithering right in Photoshop! Thank goodness for WordPress 2.7.1 and all the automation!

  10. Markus says:

    I would love to hear tips on good WordPress designers. I live in Finland and I know of only one person in whole Finland who knows how to both design and turn the designs into WordPress templates.

  11. Thanks Darren. This is something I’ve been seriously considering. I know that personal branding is so important to setting yourself apart. When a someone visits my blog I want them to be able to pick up a bit of what my blog is all about just from the theme and look of it. I definitely want it to look professional but don’t want to spend more time on designing the look than I do blogging.

    What are average prices for professional theme designs? What is “not that expensive?”

  12. R Kumar says:

    A Custom design is always the best option. People starting out at blogging might not have the financial ability to buy a theme or, to get one designed. So the best option that they have is to get a free theme. But once you have established your blog, you can always go in for a good theme or, probably get a theme designed. For people who are a bit good at HTML and PHP, even modifying a theme that they have bought is another good option. Whatever the situation, if one is serious about his blog then you have to have a theme that matches your personality and niche.

  13. Youngistaan says:

    Nice one Amir Helzer and thanks @darren for sharing this post with us. really good experience and it can help us to design a custom theme.

  14. Excellent advice. This is how I did my blog working with a designer and it is a great way to go. I always learn new things reading your blog. Thanks for putting time, organization and thought into your posts.

  15. For Marcus. My designer is John at Pixel-whip.com in Colorado Springs Colorado USA. He designed my book cover as well, and is a talented young designer and smart about Word Press guy.

  16. Great info. Where does one look for a designer? Elance, Guru.com or some other site?

    What about designers for Blogger.com themes?

  17. Caden Grant says:

    Good post. When it comes to getting a wordpress design I design my own. I like designing so it works out for me :)

  18. Yenova says:

    This is really helpful advice for a lot of people. I personally can’t pay for a designer to make me a custom theme. My theme may not be custom, but i still think it’s nicely designed. Great article man, i believe it’ll help a lot of people.

  19. There is a lot to take into consideration, some of which I wouldn’t have thought of. I am not overly familiar with wordpress so it might be a struggle, so let me just say I appreciate your passing on this info. Do you have any recommendations on how to go about choosing a designer? I mean, if I were to go with one, how do I know going into it that he/when will deliver quality goods. Are there any basic questions to ask — other than price because I assume this will be a heft endeavor.
    cheers

  20. foodwoolf says:

    Buyer beware! There are lots of designers/web developers ready to take your money and put a noose around your neck. Be very, very careful when chosing a designer.

    Some five months ago I did some research and came across what I thought was a good and talented designer for bloogers. After paying half of the money up front, I have spent the past 5 months trying to get the designer to actually deliver what was promised to me. I have yet to see one element of the re-design. Forget about follow up. The designer says her gmail account “is acting funny.” God help me.

    So, for what it’s worth, in your search for a designer do NOT do business with Delicious Design Studio.

    If anyone has found a reputable designer, I’d love to hear about them! At this point, I think I’m going to have to do it on my own!

  21. venkat says:

    I don’t have that much skill and knowldge in designing my onw theme,I suffered a lot with adstheme for my blog.

  22. It is always good to have a custom designed theme. But to start with one can just have a free theme. Also having a unmodified paid theme is not so good. Nowadays I see a lot of blog with thesis theme default template.

  23. Joel Brown says:

    I have not really gone to this length yet, however there are a few really good points here that I would have completely missed when the time does come to get something custom. Which i think will be quite soon for one or two of the websites that i am working on.

    While custom can be an expensive option, (compared to free or nearly free). Going custom is what i think can set you apart from the crowd. Yes you can heavily customize a theme, however they often still look like the original in many or at least some respects, and to make your individual mark you need something fresh, not just remade.

  24. You make excellent points, lots of food for thought
    :) Sheri

  25. Yikes! Caught a big, big mistake! If you have a logo made your designer needs to give you a .esp file or a vector format as well. Specify this from the beginning as it is an entirely different program. Very important! This will never pixelate when scaled larger, such as for a banner at a tech conference. “High-resolution” does not cut it.

  26. Kaushik says:

    If you’re doing just a little more than blogging, you probably need to custom theme. There are many free and inexpensive themes, but no one theme will satisfy. I’ve been able to steal and borrow from other themes to hack together my own, and in time I learned enough about PHP and wordpress to customize on my own. I suggest that find a website that you like and model yours to it. Find the closes free theme, and in time you will learn what you need and then consider a designer.

  27. When I started out blogging, I used whatever free theme that is available.

    After reading posts and trying out experiments on the themes, I realised that your blogging theme would really affects the traffic and how sticky your blog can be.

    It took me a while to find a theme that works for me best and I ended up paying some money for it. Feel free to take a look at http://nil2million.com
    and let me know what you think.

    Thanks!

  28. I wish I had this list to work with when I hired a designer for my web site (as opposed to blog). While my web site looks exactly as I had specified, the structure is messed up and Google can’t index all the pages. Since I have my web site to promote my business, SEO (search engine optimization) is of vital importance. I just assumed that all legitimate web designers are well versed in SEO, which I learned the hard way, was not true.

    Because of my personal experience, I would add to your list that before you hire a designer, you determine their understanding of SEO and how to implement it if SEO is important to you.

    I’m building a new web site myself based on a WP platform. That way I can get the look I want, make changes myself and make sure it is SEO optimized.

  29. NIce stuff there. Its a good idea to get new themes designed to increase backlinks.

  30. alone says:

    A nice start in making a theme. It’s easier if you have a checklist and the preparation if there’s any there problems.

    The steps given seems effective and ease the starting phase of making a theme. However there’s more thing to consider, some of them are the tricky one such as CSS and etc, but I’m sure there are more steps to come.

    Very helpful. Waiting for the update. Thanks =)

  31. Matt says:

    What does a custom wordpress theme run these days?
    What is range on the rates?

  32. It is small chance to get another blog that have a same template like yours. So, don’t worry just look for a template that you like……….

  33. Thanks for the great post once again, one thing i always find a pain is the css issue you get with diffrent browsers like in IE 7 it will show up fine and in firefox and chrome the sidebar or the footer will be somewhere else lol.

    or vice versa i think wordpress is more forgiving when creating a theme or redesigning an exisiting which what i tend to do

  34. Lara Kulpa says:

    Sorry, but it has to be said… All of this is Amir’s way of working this through, however while the core ideas are useful, the implementation is a bit too specific to his tastes.

    It’s not true that a designer can’t theme test on a client’s site. I do it all the time. In fact, with every client I’ve ever had. And no one but the client and myself are even aware that it’s happening. Then once we’re done, we switch the theme live, and in seconds the project’s finished and I’m being paid.

    Also, there’s no harm in working on a 50% deposit, 50% upon completion. No need for three or more “stops” along the way.

    All of Amir’s design ideas are his own. Not every client I have WANTS a “drop down menu” in their top navigation, and assuming that’s what others want is a mistake. Some clients only want their main focus pages highlighted in the top nav bar, to which I then recommend they use a small, link only nav in the footer to display all their pages.

    Not for nothing, but it just really bugs me when people try to lay out standards like these for web design projects. I’ve been doing this for over 10 years and no two projects are ever the same. Yes, “core elements” tend to be the same, and every good designer who knows more than just how to lay out a site in photoshop should know about proper navigational structure, SEO, etc… but the beauty of wordpress design is that it’s structured in a way that allows for ultimate creativity. Limiting it or making strict rules is a bastardization of that creativity.

  35. Agent SEO says:

    I think testing is an important stage that needs to be done by both designer and customer. Should be before payment is received.

    • Lara Kulpa says:

      You’re right – it’s very important. My point was that it doesn’t have to be done on the designer’s server. It can be done, and the entire WordPress site can be built, on the client server, without anyone except the client and the designer having any clue.

      This works for both an initial install, as well as a redesign.

  36. Omar Zaibak says:

    Darren, how about a post that discusses what to look for in a freelance designer?

    This article describes the process once you have found one, but how to choose one that won’t burn you in the end?

    I and most others have had bad experiences with freelancers starting out because we don’t know what to look for and what questions to ask.

    An obvious one is to find out their past referrals, and actually call them to see what they thought of the freelancer. Be sure to ask for referrals that ARENT LISTED on the website as well.

  37. Amir Helzer says:

    Hi Lara,

    You’re absolutely right about all your comments. What I wrote is not a ‘how to’ recipe for working with a designer, but actually, what I did for that particular theme design.

    The work came out good and the process was smooth and I wrote about it.

    I realize other people do it differently. There’s no problem doing a theme test drive on a live server. For my own reasons, I can’t allow any development work done on our production server, so the designer had to demo it all on her site. Once she set it up, this made things easier for her because she could play with whatever she wanted without worrying about me.

  38. James says:

    I have been throughly impressed by the blogs that I have come across. I was not aware that blogs now are literally like mini social websites that are specialized and customize to ones taste.

  39. Think Flick says:

    I have been through impressed by the blogs that I have come across.

    I know about like this nice beautiful Online Word-press Themes making Website… Where all can make or customize your themes in few clicks..”wpthemebuilder Dot Com”