Technotags plugin updated

I’ve updated my Technotags WordPress plugin to v1.1. You can now add Google search links as well as tags to each WP post. Increasingly I wanted to be able to add ‘further reading’ links to my posts without having to break up the flow of a piece. Adding Technorati tags etc. are useful but still far from being a comprehensive way of linking to related information. Plain old Google searches are still probably the easiest way of finding related information so you can now add Google search links to your posts metadata, and have them rendered as a clean and simple further reading section at the end of each piece. I’ve also added CSS support so you can style your links/tags however you like.

Grab a copy of the plugin and let me know how you get on.

Technotags WordPress plugin

Thought I’d see out the year by releasing my first WordPress plugin. The Technotags plugin allows you to specify Technorati, Flickr, and tags as well as geo tag your post using Google Maps. Tags are stored as custom fields in your WordPress database. I implemented tags in this way as I believe that your posts’ metadata, the tags themselves, should be stored separately from the post itself to future-proof your tags rather than lock them into post content.

Get the plugin here. Let me know how you get on and please be gentle as this is not only my first WordPress plugin but also one of my first attempts at PHP scripting.

Exploring WordPress metadata

Sweet. My adventures with WordPress have lead me to explore the metadata capabilities of the posts database. I wanted a way of adding Technorati tags to my posts in such a way that I can optionally render the same tags as Flickr or tags. Plus I wanted to future-proof my tags (metadata). There are a number of existing plugins that allow you to add Technorati tags for example and editors such as Ecto even allow you to specify tags by importing from your account. But in most of the plugins that I found, tags are added into the post body itself and are not stored as seperate metadata in the database. I didn’t want to mix my data with metadata so I looked around for a solution that allowed me to create metadata using WP’s custom fields. Aha! I thought, another excuse to learn a bit more about the WordPress gubbins and PHP. So I delved, read the WP Codex of wisdom and wrote my first plugin.

My first WordPress plugin allows you to add tags as custom fields then render them as hyper-linked tags, Technorati tags by default but also Flickr and tags and in fact tags for any web service that you care to develop an API for. I’m very pleased with the result. No doubt there’s already a plugin that does something similar but heck, this is my plugin and I had fun learning more about WordPress in the process of writing it. I don’t have any plans to release it to the wider world but if anyone’s interested, even if it’s from the point of view of a newbie like me who wanted to find out how to write WP plugins and to explore WP metadata, then drop me a line. The tag links you see at the end of this post are courtesy of my first few steps with PHP.

Random banner images in WordPress

I am thoroughly enjoying working with WordPress. Since changing my blogging software I’ve not only found that I have more control over my weblog but I’ve also learnt a little PHP/MySQL too which is coming in handy for other projects. Knowing a little PHP (all my other scripting experience has been with UesrTalk) has allowed me to tweak this weblog’s templates and functionality. Yesterday I figured out that I can have a random weblog banner image, an excuse to dust off some of my older iPhoto pics. Here’s a how-to for anyone else who’d like to do the same:

1. WordPress stores PHP template files used to make your weblog’s HTML pages in the /wp-content/themes/ directory. I use a modified version of the default theme so my templates files are in /wp-content/themes/default/ and the images used by the template are in /wp-content/themes/default/images/. The template that’s used to create the header of your weblog is called simply header.php.

2. Opening the header.php file in a text editor shows that the section that dictates the header graphic is:

#header { background: url("<?php bloginfo ('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }

3. Opening the kubrickheader.jpg image in Photoshop shows me that I can use any rectangular image that’s 720×182 pixels in place of the default blue box that comes with my chosen template.

4. I selected a range of images from my iPhoto collection that I’d like to use as weblog banner images and cropped them to the correct size saving them with incremental file names e.g. personalbanner1.jpg, personalbanner2.jpg, personalbanner3.jpg, etc. The trick is to save them with the same filename except for an incremental number suffix. You’ll use that number to randomly choose an image later.

5. I uploaded my series of custom banner images, 9 in total, into the WordPress theme image directory of my weblog and changed the header.php template to use the new image series:

#header {background: url ("<?php bloginfo ('stylesheet_directory'); ?>/images/personalheader1.jpg") no-repeat bottom center; }

6. So far so good but the change to the header.php template only allowed me to use the first of my custom banner images. I wanted to show a random banner image every time any of my weblog pages is viewed. By adding a bit of custom PHP, in this case a function that returns a random number, the banner image suffix is randomly chosen with every page load. Job done!

#header { background: url ("<?php bloginfo ('stylesheet_directory'); ?>/images/personalheader<?php echo rand (1,9); ?>.jpg") no-repeat bottom center; }

The rand (1,9) function generates a random number between 1 and 9. Obviously you must change the last number to reflect the number of banner images you have created. We need to add echo rand (1,9) to make sure that the random number is added to the HTML page. By converntion, each instruction in PHP must end with a semi-colon and finally we enclose the instruction in a PHP tag that tells your web server to interpret everything between the tags as PHP code.

And that’s it! Learnt a little bit about how WordPress makes weblog pages and learnt a little bit of PHP! Have fun hacking your own WordPress weblog.