WordPress Website Design Process for IT-IS Ltd
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.
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.
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 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.
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).
To apply custom styling to individual page, I used custom page templates to specify a unique title graphic, and to determine whether the page had one or two columns. Custom page templates also came in handy for inserting the map on the contact page, allowing the embed code to be slotted straight into the code, safely keeping it away from the WordPress editor.
This page template could then be attached to the specific page in the WordPress admin area.
To create a hidden client only area on the site I employed a mix of plugins to work alongside the default WordPress user system. The relevant pages were created, then a handy plugin called Member Access allowed permissions to be set on a per-page basis. This covered the main chunk of functionality that was required, but the user still needed to be able to login…
This is where the second plugin comes in. Sidebar Login creates a username/password login form that can be placed anywhere in the template with a little template tag. Once the user logs in, a collection of links are displayed in place of the login form, allowing the user to access their profile in the WordPress dashboard, or to log back out.
A mix of new CSS styling and some tweaks to the HTML in the plugin file soon tailored the appearance of the form to match the rest of the site.
To completely finish off the login screen for both front end users and the IT-IS admin, the awesome BM Custom Login allows super easy customisation of the default WordPress login screen, giving a branded appearance that ties in with the rest of the site.
Overall, it was a pleasure working with Andy and the IT-IS International team. I hope this little insight into the customised areas of the WordPress site provides a couple of handy tips to anyone taking on a WordPress based project of their own!