WordPress Theme: Giraffe

After the (almost) complete restoration of my system I can now get back to finishing off the things I was working on. The result of this is I’ve now made the theme for this website available for download.

I’ve tried to tidy it up as much as possible, although it’s still not perfect. There is also one small issue with Firefox 1.0.4. Sometimes, on a wide screen (1400 pixels on mine), FireFox will incorrectly add a 1 pixel gap between a border in the comments section. I’m not sure what the cause of this is, and it only occurs on FireFox – all other browsers display it perfectly. I know it’s a browser inconsistency because resizing the screen causes the gap to disappear. Until I can figure out a fix, or if anyone else knows the reason, then I will put it down as an acceptable problem that will hopefully disappear in the next FireFox release.

Anyway, the theme can be found in the themes section. I’m looking forward to any feedback and suggestions!

InScript

I’ve been tinkering away on a WordPress plugin idea I’ve had, and it’s now finished and available for download.

It’s a bit of a complicated plugin to explain fully, but the core effect is very simple: it is an expandable pattern matching script engine. Phew, what a mouthful!

Basically it means that you can insert patterns into posts, or have patterns applied to dates, titles, even the whole blog. These patterns can contain variables and functions that, when InScript processes them, will insert or manipulate the data as the page is being generated.

A theme to call my own

So after all the articles about creating themes I finally got round to finishing my own. After much pulling of hair I also made it work in Internet Explorer. Really, the pain that browser puts people through is unreal. Roll on IE7.

Anyway, I’ve tried to rearrange the layout so as to make it not look like Kubrick. The front page has a full-width lead article, followed by three smaller articles, and finished off with a list of titles. A single page post uses the full-width of the page. This was all designed to give maximum space for long articles. The CSS is also print-friendly.

The comments have been filtered so all ‘real’ comments are grouped separately from pings and trackbacks. A little bit of JavaScript hides the pings until clicked open. I think having many pings on a page really puts people off from commenting, not to mention looks really ugly.

I’d really appreciate any feedback, especially with regards bugs and problems. I’ve tested it in Firefox, Internet Explorer, and Opera, so I hope this means it will carry through to Mac browsers.

Oh, and there’s a giraffe at last!

Printable theme guide

A lot of people have asked for a printable version of my WordPress theme dissection and so I’ve been beavering away and have now released a PDF. This has been fully revised and expanded, and weighs-in at just over 1MB.

In a further fit of productivity I’ve also made a version available to buy from the online publisher Lulu. The guide is the same, so you can download the PDF and print it out yourself, but you also have the option of ordering a professionally printed and bound copy. As more of an incentive, the Lulu version has an extra chapter including my guide to installing WordPress on your own computer, as well as extra bookish things such as content pages etc. There’s also a full-colour durable cover – just like a real book!

Full details of this, and the PDF, can be found in the WordPress theme guide section.

Dissection of a WordPress theme: Part 4

In previous guides we have concentrated on the building blocks of a WordPress theme. A basic design structure has been defined, followed by enclosing header and footer elements, and finished off with a navigational panel. While important aspects of any blog, they are secondary to its main purpose: the content.

In this fourth and final part we carefully dissect the process of taking content from WordPress and arranging it on screen. Attention is paid to the alternative methods of grouping this information, from the multiple posts of the front page, to search results and archives.

We will look at how WordPress distributes responsibility for this work, and how everything is tied together with the all-seeing all-knowing construct known as ‘The Loop’.

By the end of this guide we should have a fully working theme and enough WordPress experience and knowledge to extend our theme beyond the basic design presented here.

Japanese translation

There’s a great Japanese translation of the WordPress theme dissection (part one), written by Tai over at Tekapo. There’s a link directly from the article.

Nice work Tai, and thanks for the translation!

Dissection of a WordPress theme: Part 3

Personalising a blog can require patience and perseverance. There are times when it seems a fruitless task and the blog absolutely refuses to do what you want, despite your best efforts. There are many sources of information on the internet, but it can be hard to locate exactly what you need.

One of the simplest solutions is to look at other people’s work and see if you can make use of their ideas. This is the third part in a series of articles concerned with the dissection of the default WordPress theme, Kubrick. The hope is that walking through this theme may provide help for your own blog or, at the very least, open up new areas of research. After all, there is no shortage of information out there.

Dissection of a WordPress theme: Part 2

Web design is a notoriously tricky subject. Often we give up any thoughts of innovation when the process of realising them is such hard work. Part two of this WordPress dissection continues to try and explain the basic workings of the software, how this relates to the layout, and how anyone can personalise their blog.

The focus will be on finalising the basic layout from part one, and then finishing the header and footer sections. Both of these are important as they stylistically define a blog and act as visual focal points – do it well and people will want to read your blog, do it badly and they may not even bother.

Proliferation of plugins

Yet more WordPress activity. This time I’ve organised my collection of hacks and made a seperate plugin page, available from the navigation menu. Now I can contemplate the calm and zen-like organisation of the rest of my life.

The plugins are:

  • Jump-To – Direct navigation from multi-page posts
  • PageView – Embed an webpage inside a post
  • HeadSpace – Manipulate meta-data