My Wordpress Weather Widget v 2.0

I first had a stab at this kind of thing a couple of years ago but removed it when it broke the blog completely…! This new version seems a bit more stable, but still suffers from missing data from the Yahoo! Weather feed, especially overnight. Also, and here’s the problem, it’s still hard coded into a text widget, which isn’t exactly ideal. You should be able to see the real thing at the bottom of the sidebar on the right… (UPDATE : I’ve just turned the weather widget off – it should be back once I’ve worked out how to make it not quite so easy to download a free set of my weather icons..!)

So if there are any bored PHP / Wordpress experts out there who’d be interested in a collaboration, please do get in touch. It’d be nice to make this into a proper Irish Local Weather widget downloadable from wordpress.org/extend, with options in the admin page to select your county branding, your town or city (or long-lat?), and choose from current, 1 day or 2 day forecasts or combinations.

As before, the XML parsing and CSS classes are based on those by Marco Voegeli. The data is currently coming from Yahoo!Weather, but I’m in the process of investigating the free weather API from World Weather Online – they offer a longer-range forecast, and they’re also using my weather icons!

Tolkien Fonts - cufon text replacement example

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('h5');
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

I’d previously looked at Scalable Inman Flash Replacement (sIFR) but I have to say I think Cufón may have the edge if only for ease of set-up – although, granted a lot of the hard work has already been done by the plug-in. Oh, and Cufon doesn’t use Flash.

I don’t claim to understand exactly how Cufon works, but if you’re interested in that kind of thing have a look at http://wiki.github.com/sorccu/cufon/about which goes into all the nitty-gritty.

And here’s a link to the creator of the wp-cufon plugin, Tobias Battenberg

OK, Tolkien fans

So this next bit is only really of interest to fans of The Lord of the Rings… (look away now if hobbits and dragons aren’t your thing!). No really.

The site I’ve used Cufon on is a Tolkien book collecting site – and I created a special font that brings to mind the calligraphy of the author J.R.R.Tolkien – I was pretty pleased with the end result, so if anyone’s interested they can buy a copy of Tolkienesque Regular (in Truetype font format) from my store.

I also ended up tackling another Wordress theme design from scratch – so the entire site has a kind of ‘Tolkienesque’ feel to it. That’s the name I gave to the theme too.

Tolkien Wordpress theme

The Wordpress theme makes heavy use of categories to organise the 400-odd entries, and has a neat ‘Random Item’ widget that I made to pull a text link and the first thumbnail image from a random post. Anyway, I was quite pleased with the end result. It’s been a labour of love built in spare minutes snatched here and there over the last few months.

But I’m most pleased by the fact that I can now use any old font I like in Wordpress, subject of course to EULAs and other legal niceties, or at least until the legal quagmire surrounding @font-face, font embedding and linking gets sorted out.

The changes to the basic proportions of the page were made by increasing the #page and #footer divs from 760 to 900pixels and adjusting the right sidebar content to be 250px wide (to match my own ‘content_sub’ div) and expanding the rest of the content to fill the gap.

Next I changed the basic colour scheme – or as much as I could using color values in the style sheet (text etc). I searched all the template files to see exactly where the background images appeared and then added my own versions (at the new widths) including a body background, a footer image that closes off the main grey box backround, and a new ‘topper’ image that does the same at the top (this needed a new div – added to the header.php file).

I changed the header box to be left aligned and smaller and removed the top margin from <h1> tag (blog title).

Lastly, I put a new DIV into the header php code – this is where I place all my own header content.  I also moved the background image from the body (to stop it scrolling when the browser is resized) into my own header code.

The last few tweaks were mainly little cosmetic changes – a bit of margin/padding adjustment and a new background colour and border around the comment boxes. And that was pretty much it.

I’m intending to blog about the changes I’m making as I go along. There are two possible outcomes here :

1. This may serve as a useful resource for anyone else attempting to customise their own blog.

or

2. This will be a catalogue of disasters, showing how to mess things up royally.

Obviously, I hope it’s not going to be (2) – but if by any chance you happen to be reading this and can spot disaster looming – please feel free to comment and point me back in the right direction!

As it stands, having spent about 2 minutes looking at the Design > Theme Editor tab I’m thinking this is the way to go. I’ll make a complete copy of the themes/default directory on my hard drive just in case I mess anything up. If I do, I should be able to selectively replace either the messed up style sheet, image, or (god forbid) php file.

By the way, I’ve recently been working on optimising my main website. Currently I’ve only replaced a couple of pages, but I have managed to create a pretty well-formed HTML template, and a style sheet that seems to render it identically on most browsers (according to the excellent Browsershots.org). So I’m hoping that with a bit of sly CSS cut’n'pasting, I should be able to impose my style on the default WordPress template – which also uses a basic two-column layout like my main site. Anyway, here goes. I think maybe the first thing to do is to change pixel dimensions only, and leave fonts, colors and images until later.

I’ve a good few years’ experience hand-coding HTML and CSS. I’ve got a pukka copy of the Adobe CS3 suite. I’ve got the O’Reilly book ‘Learning PHP & MySQL’ (I knew it might come in handy one day). I’ve got ‘The Convincer’ by Nick Lowe on repeat.

What could possibly go wrong?

To fix this, I had to go to Settings and Permalinks to choose a new format for the post URL – there are a few ready-made formats to click and choose from – I decided to use the form

www.mikeafford.com/blog/$year/$month/$title_of_post

For this to work, I needed to add a .htaccess file to the main blog directory – rather strange that it wasn’t included in the installation. Anyway, with that in place, the new permalinks appeared immediately.

failed to write to disk

So obviously something strange was happening at my servers end – I initially thought it might be read/write permissions, but after a brief search on the WordPress forums, and another quick email to my hosting support, it turned out that I needed to set up a couple of customised php settings on my site. This might not be the case with every hosting provider, but I needed to go to my site control panel and click PHP settings and set the upload_tmp_dir to be /tmp . And also in my case I to actually create the /tmp directory itself (I guess up until now I didn’t really see the need to have one…)

But I wasn’t quite there yet. When I tried again, I got a brand new error

Unable to create directory
…………./blog/wp-content/uploads/2008/10. Is the parent directory writable by the server?

Now that smelt even more like file permissions than the last time – and sure enough that’s what it was.

Another quick scout around WordPress.org and I saw that they do say “A default WordPress installation comes with permissions settings for its files and folders (i.e. directories) that can be regarded as very secure.” I should say so. Particularly having a content folder into which you can’t actually place your content.

But they do give comprehensive instructions on how to change various permissions to get things working more smoothly. See Changing File Permissions for more information on this.

It’s also worth looking at htaccess for subdirectories which explains how to put back some of the security on folders that you’ve allowed more write access to – for example, restricting uploads of only image files (JPG, GIF, PNG) to that /tmp directory.

OK, with that all sorted, I’m fast approaching the time for customisation. Although the default template is sweet enough, I want to get my sticky paws on the HTML and CSS..

Step 1: I found this page on WordPress.org which details the procedure for installing WordPress on your own site (this assumes that you have your own domain, and FTP access to upload all of the WordPress files to your own site). Now, being a graphic designer, and itching to get on with the task of customising the page to make it look all arty and such, it’s fair to say that I only read the instructions briefly, so this might all end in disaster, but here goes…

Step 2: I downloaded WordPress 2.6.2 to my local machine (I’m using one of my Macs – a Dual 2 GHz PowerPC G5 – OSX v10.4.10) and unzipped the file.

Step 3: Using the control panel on my website supplied by my hosting company, I added a mySQL database – as this was the first database I’d added, all I had to do was select ‘default’ and there it was. Surprisingly easy so far. From reading the WordPress documentation I wondered if I needed to have a database called ‘wordpress’, but it seemed not so – I checked this by emailing my hosting support who replied within minutes (hats off to Mark at Supanames). The name of the database doesn’t matter, provided you enter it correctly in the wordpress config file (see Step 4 below).

Step 4: Now this bit I’m guessing wouldn’t be for the faint-hearted, but if you’re happy editing files that have lots of $’s and /’s and other gobbledegook in them then it’s quite straightforward. In the unzipped WordPress files you’ll find one called wp-config-sample.php – you need to edit this to include the name of your mySQL database, and your username and password. Also you need to set 3 secret keys – but instructions on what to do are included in the file itself. Once you’ve finished this, save the file as wp-config.php in the same folder where you found the original (wp-config-sample.php) file.

Step 5: I created a directory on my site called ‘blog’ in the top directory – so my blog should hopefully appear at www.mikeafford.com/blog . Then I FTP-ed the entire contents of the wordpress folder on my local machine into the ‘blog’ folder on the remote server. Another way of doing this would have been to rename the ‘wordpress’ folder to ‘blog’ and uploaded the folder itself to the top directory on your server (assuming you don’t already have one called ‘blog’ there already. Naturally enough.)

Success!

Step 6: In my browser I typed in the URL of my blog (mikeafford.com/blog) and there was the WordPress set-up page all ready for me to enter a title for the blog and my email address. With that completed, moments later the bog-standard blog appeared…

At this point my wife walked in and I proudly showed her my new blog. “That looks really good” she said.

I wonder if she’ll say the same after I’ve fiddled with the design…

Right now I’m having a few issues with uploading images, which may well be the subject of my next post.