I recently finished up a website redesign project with Andy Wheatley from IT-IS International Ltd. The project involved a redesign and rebuild of itisint.com, and used the WordPress application to cover the core functionality of the site. Let’s take a look at the process of tweaking WordPress to transform it from a blogging platform to taking on the job of a typical Content Management System.

The Client:

IT-IS International are a small research and development company working in the life science industry, they develop software and instrumentation for the analysis of DNA (PCR- Polymerase Chain Reaction). Sounds complicated, right?!

Andy was a fantastic example of an awesome client, giving complete creative freedom and providing excellent feedback throughout the project. It’s lines like this in an email every designer dreams of –

I hope that this project might be something you could really get your teeth into (free reign on the design).

The key requirements for the site were to showcase the company with creativity and innovation while being updateable by the team. The structure was pretty simple with a collection of static pages, a news archive and a client only area.

The Solution:

I’m a big fan of the WordPress application, and use it for pretty much every website I take on, whether it’s a blog or not. WordPress has some amazing versatility, and can easily take on the role of CMS, eCommerce and more!

The IT-IS International site could easily be ported into WordPress. The static pages could be listed as WordPress pages, the News section could make use of WordPress’ blogging functionality, and the Client Area could be tackled with a mix of the default WordPress user hierarchy and a handy plugin or two.

The Design:

The design was put together using the IT-IS International Ltd corporate colour scheme of blue, grey and white. I took inspiration from the typical website design styles of web apps that use subtle details, and white space to create a fresh concept.

Being a topic focusing more on the WordPress section of the project, I’ll not go into too much detail on the design and coding stages, but here’s a screencast I recorded of the process of cutting and coding up the concept into a working XHTML/CSS page.

Building the WordPress Theme:

Once my coded concepts are complete, I’ll then move onto the WordPress theme creation. I have a handy template saved on my machine that’s based on the Default theme, but with the majority of the HTML removed, leaving the collection of PHP snippets ready for insertion in the relevant areas of the theme.

Active Navigation States

A little customisation was required in the navigation bar to allow the active link state to show on each item. The home link was inserted manually, followed by WordPress’ default list_pages tag. The News area needed to be active whenever the user was viewing a category, an archive or a single post so conditional tags were used to tailor the appearance of the active link class. A similar tweak was also needed for the Client Area section; This area uses sub pages, so the menu also needed to be active when a child of page ID 12 was active.

Date Stamps

The little blue date stamps were easily built using a mix of CSS and the_time PHP tag. The whole date is contained within the paragraph tag with a class of date; within this is a span that contains the month of each post. There’s an extensive range of options available for the PHP date function, so it was a case of simply choosing which letter represented the type of date I required. I needed a good old number (d), followed by the shortened display of the month (M).

Custom Pages

Continue Learning…