A big thanks to Stefano Aglietti and Mario Núñez Molina for providing localizations of the Giraffe theme in Italian and Spanish. I’ve added a small localization selector in the sidebar so that people can change the theme language and see what it looks like. It doesn’t translate the posts, but it provides dates and other phrases in the chosen language, making for a better experience for non-English speakers.
Tag: theme
Giraffe theme update
My Giraffe theme has now been updated. I’ve made some pretty major changes and these are summarised below:
- The theme is fully localised! I don’t have any translations yet, but once I release the relevant parts then hopefully people can translate the theme into their own language – no more hacking the theme to bits.
- Administrator interface. The support plugin now adds it’s own interface into the administration section. From here you can configure many aspects of theme’s appearance, such as colour scheme. More details in the themes section.
- Extra information can be inserted into the sidebar by creating a file ‘sidebar-extra.php’ and filling it with whatever you want. This saves you having to modify the core theme files.
- The layout can be configured to have the sidebar below the lead content, or to the side of it
Hopefully I’ve tracked down any problems already.
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!
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
Translation:
Resources:
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
Translation:
Resources:
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.
Italian translation of theme guide
Stefano Aglietti has done an amazingly quick job of translating Dissection of a WordPress theme into Italian, over at the Italian WordPress site. I’ve added a direct link from the article itself. Very nice work Stefano!