Design & development of your WordPress CMS

So, after reading the article on getting from your website’s goal to a proper site structure, and having determined which kinds of page templates and functionality you’ll need, you’re ready for the next step: designing and developing your site.

At the end of this article I’ll go through a short list of often-needed functionality, and point you to the plugins I use for those cases.

Designing your WordPress theme

DesignGetting design requirements right is a hard thing to do: you need to make sure you get what you want and need, and thus the requirements have to be quite strict, but if you’re not doing the design yourself, you’ll also need to allow for breathing room for the designer, and allow them to be creative.

It helps to split the design requirements into two sections: functional and design requirements. You should also be very specific about what you’d want or like and what you need.

The first one is simple: your design should incorporate all the functionality you have determined upon, and allow for all the different page variations that you need. Depending on how much you trust your designer, you can just say “I need these functions on a page, make it work” or you can create a wireframe, outlining how you’d like the page to be laid out.

A lot of people get this wrong: layout is not design. Some very good designers are crap at layout and vice versa, and positioning of certain elements in certain spaces might make a lot of sense to a designer, but not to any of your users. If your designer hasn’t already read it, I highly suggest you buy him a copy of Don’t make me think, and even pay for the 3-4 hours he might need to read through that. You’ll get a better end result because of it, promise.

There’s a load more to be said about this subject, but to be honest: I’m not the expert. What I can, and will, tell you is what has worked for me in the past: get a kick ass designer, give him a wireframe so he get’s your line of thought, and allow him to stray away from the wireframe if he wants to, while maintaining all the functionality.

I am a bit of a lucky bastard though: I get to work with some of the best people in this industry. Frederick and his team created the current design of this website, the Quix design was made by Liam. They’re not cheap, but they are good. It pays to pay for quality. It’s truer than with anything else: if you pay peanuts, you get monkeys.

Some people might remember that I use sites like 99designs.com for some of my projects, in fact, the Yoast logo (not the avatar, the logo) was done with a 99designs competition, and I’m still very happy with it. As for site designs, I haven’t been that lucky. All the site designs gotten through 99designs recently were bland. It’s ok if you can live with that, for me, it’s just not going to work.

In fact, if you don’t mind the design of your site that much, you might as well go with a premium theme. Woothemes, Thesis, StudioPress, Pagelines; there’s loads of sites with very decent premium themes. Change the header a bit, and it might already start looking good. The good thing about a premium theme is that you can skip the next section: developing your design into a theme.

When designing your pages, keep SEO in mind. The main point of on page SEO is to focus search engines on the topic of each particular page, and keep disturbances at a minimum. This means you don’t want so-called boilerplate content. An example of such content you don’t want: there’s no need to tell people on each page which site they’re on; if your navigation is clear they should be able to find that easily enough.

Another thing that is useful to do for SEO, and that your users will like a lot too, is adding breadcrumbs. When doing that, the development part is easy, just use my WordPress breadcrumbs plugin.

The development of your WordPress theme

DevelopmentThe goal of the development phase is twofold:

  1. Turn your design into a working and flexible WordPress theme, with a clean separation of style and content.
  2. Make sure the theme is as SEO friendly as possible.

Theme SEO & Speed considerations

We’ll start with the latter. What you’ll need to do is to turn your design into clean HTML, as clean as you can possibly get it, with proper use of semantics: one <h1> on each page, no more, no less, subheadings in <h2>’s, <h3>’s etc.

Bonus points are given for themes that have the content in the upper part of their HTML. No matter what your design looks like, the ideal order of things in HTML is as follows:

  • Content
  • Related navigation (related posts, taxonomy links)
  • Unrelated content (sidebars etc.)
  • Unrelated navigation
  • Utilities (like sitemap, privacy policy etc.)

This can be achieved using CSS, and in most cases you won’t have to change your design to achieve this.

Things you do not want in your HTML:

  • Inline CSS styles
  • Inline JavaScript
  • Relying heavily on JavaScript for pieces of the design to work

I’m not saying you can’t use JavaScript based features like sliders; just make sure that if you have JavaScript disabled, the content still shows properly. If you use a lot of JavaScript, and need a library, use jQuery. It’s embedded with WordPress; most plugins that need JavaScript use it. There are other libraries, and I’m not saying they’re not good, but if you’re using WordPress, stick with jQuery.

Inline styles and JavaScript are examples of lazy web designers, and can make further development of a site quite hard, as you have to look for styles or JavaScript pieces in several places. To make your theme load as fast as possible, combine all CSS files into one, and combine as many JavaScript files as possible. Also try to load the JavaScript files before the </body> tag, instead of in the <head> section of your site. This way they won’t block rendering of the page.

Flexibility in your theme

When you have blocks of content or functionality in your design that you might want to move around, it might be a lot smarter to develop them as widgets or widget area’s. Using some smart widgets you can do just about anything you’d want to do content wise. Two widgets  / plugins you should check out are the Side Content plugin and the Rich Text Widget.

After you’ve had a look at these, you’ll realize why I use a lot of sidebars. That’s a lot easier to maintain than to use custom fields or hard coded content blocks in template or any other crappy solution…

Adding functionality to your theme

If you have core functionality that your site will always need, you can do two things: build it into a plugin, or add it to your themes functions.php file. Of course, there are a lot of things you don’t have to build, as there are a lot of plugins that can help you add functionality to your WordPress CMS site. Let’s go through some options for often-needed functionality. Before we do that let me remind you of custom post types and custom taxonomies: a lot of the things people would do with plugins don’t need a plugin anymore, just a properly created custom post type.

Contact form

As they’re the most needed functionality on any site, contact forms are probably on your list too. There are several options:

  • By far the best contact form plugin is a premium plugin called Gravity Forms. The most configurable of all the contact forms on this list, and the one that you can use for complete lead forms too. If you use it, the Gravity Forms widget I built might come in handy.
  • If you use Salesforce, try the WordPress to Lead plugin for Salesforce I developed for and together with Salesforce.
  • If you don’t want to pay for a plugin (though Gravity Forms is worth the money, seriously) try my WordPress contact form plugin.
  • Another good option is Contact Form 7.

Multimedia content

You’re probably going to be posting video and other multimedia, I use these plugins for that:

E-Commerce

Two options, I’m not into them enough to give you a solid opinion on whether to use one or the other:

  • WP E-commerce, the “original” WordPress E-commerce plugin.
  • Shopp, another ecommerce plugin.

SEO

I can list them all here but that’d be a bit stupid, as they’re all listed nicely in my WordPress SEO article.

Next steps: deploying your site

Now that we’ve got our theme developed, the next steps are: installing and deploying your site, we’ll have a look at them in the next article in this WordPress CMS series.