OK, so for all you WordPress design experts out there this is not exactly world shattering news, but this has taken me quite a while and several false starts to achieve.
As you can see from the new look and feel of the site (if you ever saw it before) I have changed to a much cleaner, simpler theme which, with fewer configuration options and extras (it’s all built in), is a lot more lightweight as well.
Why would I bother? Well first of all, I wasn’t entirely happy with the themes I found on the WordPress web site – they are all marvellous and creative, but none of them quite fitted the look I wanted without me having to do a fair bit of work.
Also, I was curious to see how it is done – and the answer is very easy. Creating the design was like pulling teeth; I’m not a great creative visual artist. But converting the design to WordPress was surprisingly easy and there is a load of good help on the WordPress.org website or via a Google search.
Another reason was to create something that I can turn into a “skin” for other web publishing environments – using the Apache Maven “site” plugin, for example; I’d like to create a few blocks of static content – both auto-generated and hand crafted for some of the projects I have been working on (YearChart, Tools for C#, and others).
Of course, although it’s gone live now, it’s not completely finished. I’ve yet to give it a good going over for Accessibility (one of my colleagues is something of an expert so I’d better get it right).
Printing is a bit of an issue – best to check the print-preview for now – it still includes a load of unnecessary junk.
Creative Design…
I approached the development from a couple of directions – the design of the look and feel and building a WordPress theme with the design.
I’ve been looking for a good design for a while and, after spending a few evenings over a couple of years wandering through various web sites, frameworks, themes and such, I had a few different styles started. They were all fairly pedestrian and didn’t quite pass muster.
Then, I downloaded some web development podcasts (The Art of Code, CSS-Tricks) from iTunes and followed a couple about styling some pages. The approach was very simple, a bit arty for me but it gave me a better idea of how to approach it.
So, I took a page from my blog and removed all of the styling and images. Then, I searched for a good font to use – and found this one, Avant Garde. Well, I like it, anyway. I took a colour scheme of red (from the logo), blue (cause it’s nice – and matches the Williams Technologies colours), and black all on a white background. It was starting to looked quite good.
Next I found a whole panoply of 2 and 3 column layouts and picked a three column one with three columns (I think it was this one) that provided a page structure I liked the look of.
Plugging the two together and using borders temporarily to show the block structure while I tweaked it and I finally had a design that made me happy.
Conversion to WordPress Theme
I have an instance of the Kajabity.com site running locally on my laptop using XAMPP, so I created a new theme folder under C:xampphtdocswww.kajabity.comwp-contentthemes.
I installed a version of Eclipse with PHP plugins and created both a kajabity.com project to for the whole WordPress installation and a theme project – “kajabity-theme-feb-2011”.
I needed to understand how to create a WordPress theme – and the best place I found to start was on the WordPress site at http://codex.wordpress.org/Theme_Development. Also, the Template Hierarchy diagram was instructive as I tried to customise different pages on the site.
The first step was to create a “style.css” file – the minimum content of a theme. This file includes the main CSS styling for the site so I copied in the CSS from the design page I had developed. It also provides the description of the theme used by the WordPress theme manager page: –
/* Theme Name: Kajabity Theme Feb-2011 Theme URI: https://www.kajabity.com/ Description: Another kajabity theme. Version: 0.1 Author: Simon J. Williams Author URI: https://www.kajabity.com/ Tags: kajabity WordPress Theme */ html,body { margin: 0 auto; padding: 0; font-family: Avant Garde, Avantgarde, Century Gothic, sans-serif; font-size: 12pt; } etc.
Next, I created the “index.php” template. From the Template Hierarchy it can be seen that this template will suffice for all pages on the site. The base for this came from the Theme Development documentation and from looking at the same page in other templates. I adjusted the HTML around the usual WordPress function calls and hooks.
At this point, I could begin to test the theme using the XAMPP installation so I started it up and selected the theme in the theme manager (Hmmm, I need a theme thumbnail). It wasn’t quite what I hoped, but now I had a way to interact with the theme as I tweaked the details.
Most of the information I needed was in the WordPress Function Reference.
Building on the Theme
The recommended approach appears to be to split out common parts of the page – header, footer, and to add sidebars using standardised hooks. This also lets the Widget manager work properly. This leaves just “the loop” in the index template.
I created “header.php”, “footer.php” and the” sidebar-left/right.php” files and copied the relevant parts of the page into them. Then I added the PHP tags to include them – e.g. “<?php get_header(); ?>” and so on.
Next, I added a “functions.php” which is automatically picked up by WordPress and added code to link in the two sidebars: –
<?php if( function_exists( 'register_sidebar' ) ) { register_sidebar( array( 'name' => 'Left Sidebar', 'id' => 'left', 'before_widget' => '<li class="widget">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); register_sidebar( array( 'name' => 'Right Sidebar', 'id' => 'right', 'before_widget' => '<li class="widget">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); } ?>
I wanted to use a slightly different layout for single posts so I created a “single.php” template and adjusted the appearance to add the Comments Form and Next/Previous post links. Otherwise, it’s pretty much the same.
The “page.php” template is a similar case – at which point I realised I didn’t want a Comments link for all pages. The solution to that was as follows: –
<?php if ( comments_open() ) : ?> <?php comments_template(); // Get wp-comments.php template ?> <?php endif; ?>
I retro fitted this to the single post template as well.
Google Search
One of the reasons that triggered me to start this process was so that I could more confidently handle integrating Google Site Search into the blog.
Ah, just tested it on the live site and it doesn’t work… Fixed it. Just as well, it reminded me of the bits I needed to set up to get it working (Hmmm).
I’ll cover this in a separate posting as I think it’s worth describing in a bit more detail.
Next Steps
Well, over the last two or three days since I first set the new theme live on this site I’ve noticed and fixed a few bugs and issues. One or two I fixed as I wrote this (search…). There are still some others I want to fix and a few other improvements. I’ll add a thumbnail image as well.
Printing is an obvious flaw – I’d like the printed version to consist of the article/page/whatever with just the Logo at the top and Copyright at the bottom.
I also want to make sure it’s properly Accessible and tidily structured.
Next, I will convert the page design into an Apache Maven skin for use in generating static content and to publish a couple of Java projects I have been working on as well as some .NET ones and a Microsoft Word themed set I keep promising to do.
I might even publish the theme in the future…