The conference was in the convention centre at Darling Harbour, near Sydney’s central business district. I’d been to a few conferences before, but never to an IT related one. I was going on my own and i didn’t expect there to be anyone i knew there.

When i registered, i was given a large name tag to hang round my neck, with a conference timetable on the back and a flyer for a couple of after conference parties. I was also given a conference shoulder bag containing a bundle of sponsors’ leaflets and a book with various articles in it and information about each of the conference sessions.

The opening session was a talk by Matt Webb, called “Escalante”. To be honest, i can barely remember anything about it and i’m not really sure what it was about. It was a bit rambling and seemed barely relevant.

After that there were four streams of split sessions. I went to Mark Stanton’s talk, “Speed Matters”, on optimising web sites for speed. Mark’s a good speaker and what he had to say was interesting. I picked up a couple of tips from his talk, but mostly it served to reassure me that i was pretty well up to speed on this subject already.

After that, i stayed in the same room for “Using Ajax to enhance UX”, by Tania Lang. It was in the “Design” stream, but it sounded like it would be interesting. Unfortunately, it wasn’t – not to me, anyway. I bailed after about ten minutes and went to the “Development” stream talk by Ben Galbraith, entitled “The state of development tools”. I found that much more interesting, although i can’t remember anything about it now!

After lunch, i listened to Dmitry Baranovsky explaining why he hates the HTML 5 “Canvas” element. He was a highly entertaining speaker and got a lot of laughs while he was talking. I knew very little about Canvas before his talk and i came away with quite a good understanding of what it’s all about.

The next session in the Development stream was Earle Castledine talking about “jQuery”. Although i don’t like jQuery much (i prefer plain javascript), i do want to learn it, so i was hoping this talk might give me a bit of a basis to start learning it from. Unfortunately, as well as not being a particularly good speaker, Earle only mentioned jQuery in passing once during the first fifteen minutes and was talking about stuff that i found pretty much incomprehensible and which seemed completely unrelated to  jQuery.

I left there and went to a panel discussion on the state of the web as a platform. There were five men, one from Microsoft, one from Adobe, one from W3C – i don’t know who the other two were. Their discussion was mildly interesting, although didn’t really seem to have much substance. They were an improvement on the non-jQuery talk though.

The closing session of the first day was Cameron Adams talking about Google Wave. He was a good speaker and the talk was entertaining and reasonably informative.

Kelly Goto started the second day, talking about “WorkFLOW”. I’m not sure i really got very much out of her talk, but she was a good speaker and it was an entertaining start to the day.

Next i listened to Gian Wild talking about WCAG2 – which is the second version of the W3C web accessibility guidelines. I have to admit i’m not fully up to speed on WCAG1 (although i am familiar with the principles and practices of web site accessibility), but it was interesting and it will definitely be useful to me to have a bit of background in this in the future.

Elliot Jay Stocks’s talk on “Progressive Enhancement” was the next one i went to. Elliot’s a good speaker and his talk was interesting. I wouldn’t say i actually learnt anything from it, as such, but it was good to get an insight into his perspective on things.

After lunch, i listened to Kevin Yank talking about “CSS Frameworks”. I’ve considered and rejected CSS frameworks a couple of times, but the talk was interesting and informative. I don’t think i’ll end up using CSS frameworks as a result of listening to it, but it’s good to hear some of the pros and cons in case i work on a site that could benefit from it in future.

Rob Mitchell and Mike Williams did the last talk in the development stream for the conference. It was called “Test your JavaScript”. Neither of them were the best speakers at the conference, but they kept it flowing reasonably well and it was interesting. I didn’t come out of it feeling like i knew much more about the subject, but it did inspire me to investigate it in more depth soon.

The closing talk was “15 years in” by Dan Hill. He was quite a good speaker and it was interesting enough, with some of the best slides of the conference. But he was off in designer fantasy land for a lot of it, and most of what he was talking about barely seemed to relate to reality, let alone to the web. According to the conference book, the subject was about something like taking ideas from web design and incorporating them into the real world. Yeah, right!

There were about 700 people at the conference. Attending it was certainly an interesting experience, although i’m not really sure what or how much i gained from it. But it was definitely worth going to – apart from anything else, to get a bit of a finger on the pulse of the Australian web industry.

You can get it with Windows XP or Linux (for £20 less). I chose the Windows version because i wanted to be able to dual boot – so i could upgrade the firmware on my Nokia 5800. I tried doing it using XP in a VirtualBox virtual machine on my Thinkpad, but it didn’t work. I could take it to a Nokia service centre and get it done for free, but i’d have to leave my phone there for a day or two and £20 for a Windows system seemed worth it to avoid that hassle. Anyway, i’m going to be running XP in a virtual machine on this system too (for testing web sites), so i don’t mind having a licence for it.

The first thing i did was install Linux. I’m running Fedora 11 on my Thinkpad, so it made sense to install that on my netbook too. Installation was fairly easy – using the live version and writing it onto a flash stick using the supplied utility. There was one annoying glitch in Fedora installation though – when i tried to manually set up the partitioning system it refused to allow the root partition to be ext3 because the image on the installation system was ext4 and it refused to allow it to be ext4, saying it had to be ext3. (I must remember to file a bug report!)

In the end, i allowed it to set up its own choice of partitioning scheme – which i’m not really happy with, but which worked. When you first set up XP on this system, it allows you to create two partitions – so i created the minimum possible one for Windows (which is still way too big) and i used the rest for Linux. Samsung’s system restore system also grabbed a 7GB partition at the beginning of the disk. At some point i’ll get round to deleting that and shifting the windows system down there, freeing up 25GB of hard drive space in the process.

Most things worked out of the box with Fedora 11 – sound, bluetooth, ethernet, SD card reader, touchpad, webcam. But the wireless interface didn’t work and nor did the built-in mic.

I think support for this wireless card (Realtek RTL8192) is included in version 2.6.31 of the Linux kernel – which is currently in development – but it’s not in the current Fedora version (2.6.30.5) and  i didn’t really want to build a custom kernel if i could avoid it, so i used ndiswrapper – which works fine.

I got the RTL8192 driver from the CD that came with the computer – it wasn’t easy to find, but it’s there on the disk. But i had a bit of trouble getting ndiswrapper to work. For some reason when you install ndiswrapper using yum, it doesn’t require the kernel module – so, of course, it won’t work. You have to explicitly install kmod-ndiswrapper as well. Once i’d worked that out wireless networking just worked (with NetworkManager).

Once you’ve installed ndiswrapper, install the driver with

ndiswrapper -i net819xp.inf

(you’ll need all three of the driver files in the directory you execute that command from).

then

ndiswrapper -m

should write the configuration file for modprobe. Once that’s done,

modprobe ndiswrapper

should get wireless working and the interface showing up in NetworkManager. If not, a reboot will do it.

Getting the built-in mic to work was a bit trickier. First, i installed the gnome-volume-control (also known as gnome-alsa-mixer) application, hoping that there would be a switch somewhere that would turn it on. But there wasn’t. So i resorted to the best mixer of the lot – the one that always seems to show all controls, even when nothing else does – gamix. Unfortunately gamix isn’t packaged for Fedora any more (i should try lobbying for its inclusion again i guess), so i always keep the source code handy.

Getting gamix to build required installing a few development libraries – glib-devel, alsa-lib-devel, and gtk+-devel. Once i built and installed it, gamix showed a switch that the gnome mixer didn’t: “mic”/”front mic” in the capture section. Switching this to “front mic” made the built-in mic work. The sound isn’t very good though, so unless you really need it, it’s not worth the bother!

The other problem i had was with some of the software. In particular, Thunderbird’s account settings window and Nautilus’s configuration window are too tall for the 600 pixel screen. This is really annoying, as it means you can’t get at important parts of the configuration. Both of these bugs have been reported on their respective bugzillas.

The workaround i used was to use the System–>Preferences–>Display dialog to rotate the screen left – and then turn the netbook on its side. That way, you can get at everything on the config window. It’s a bit awkward, but it works!

Some of the function keys work with Fedora and some don’t. Using the ‘Keyboard Shortcuts’ dialog i set Fn-ESC (which has a moon on it) to suspend, and Fn-F12 (which is “scroll lock”) to “lock keyboard”. I wanted to use Fn-F10 for this, as it’s got a picture of a screen with an “X” in the middle of it, but that doesn’t seem to generate a key code.

The volume keys work, but the brightness keys don’t – which is a bit of a problem, as when the N140 is being used on battery power the brightness drops to a very low level and there’s nothing you can do about it. This obviously helps with battery life, but it would be nice to have the choice.

A workaround for this seems to be to suspend it with the power connected, then disconnect the power and then wake it up. When you do that, it comes back on with full screen brightness, even though it’s running on batteries.

Overall, i’m very happy with the N140 so far. It’s mostly very well designed and a pleasure to use. Its one really weak point, however, is the keyboard layout – it’s not centered. That might not matter much if you type with two fingers, but if you touch type it’s a big problem.

Surely it would have been simple to move one key from the right of each row over to the left hand side. That would leave the centre point of the letter and number keys – the gap between the ‘g’ and the ‘h’ – in the middle. As it is, it’s too far to the left and if you touch type your left palm is sitting on the corner of the palm rest, which isn’t very good ergonomically. A single key width to the right and it would be perfect.

I considered pulling the keys off and moving them over, and then modifying the key mapping. But keymapping is an awkward business in Linux and it may well be more trouble than it’s worth. It’s also complicated by the fact that i may want to dual boot Windows – i don’t even know if it’s possible to remap the keys in XP.

That plugin obviously requires NextGen Gallery to be installed – or, at least, for its database tables to be available – but WordPress’s plugin activation system doesn’t have any built-in way of checking dependencies.

I tried testing for one of NGG’s tables in the activation function of my plugin, but i couldn’t get that to work, as there doesn’t seem to be a mechanism for plugin activation to fail gracefully. So i did a bit of google searching and turned up a possible solution at http://fullthrottledevelopment.com/creating-dependent-wordpress-plugins.

Their solution uses a function which runs every time plugins.php is loaded, which checks to see if the plugin is being activated and, effectively, deactivates it with an error message. That half worked for me, but it didn’t prevent the code in my plugin’s activation function from being run (it creates a page and registers some permalink rules). That leaves plugin activation stuff done but the plugin not activated – which isn’t good.

So i tried moving the plugin activation code into the dependency check function – but it wouldn’t work there and i couldn’t quite manage to work out why. Then i tried moving the dependency check code into the plugin activation function – but that didn’t work properly either.

I was just about to give up and not bother with dependency checking when i came across a blog post called “I’ve made a useless WordPress plugin…” by Simon Wheatley. He’s checking for PHP version, but the principle’s the same.

Simon’s solution is so simple that i can’t see why you’d need anything more complicated. Just check dependencies in the top of the plugin file and die with an error message if they’re not met. None of the other code in the file will ever be executed if this dependency check fails – so there’s no half done activation to worry about.

This was the code i ended up using:


global $wpdb;

$sql = "SHOW TABLES LIKE '{$wpdb->prefix}ngg_gallery'";
$results = $wpdb->get_results( $sql );
if ( ! $wpdb->num_rows )
{
die( '<p>This plugin will not work unless NextGen Gallery is installed and activated.</p>' );
}

So far, i’m impressed with the 5800 – it’s pleasant to use and the interface is well designed. It’s got a very usable full-screen keyboard for fast text input. I used it to write this and i didn’t find it at all frustrating – and i haven’t got dainty little fingers, that’s for sure! I can type reasonably fast and accurately by holding the phone in both hands and hitting the keys with the corners of my index finger tips. I touch type but i reckon with practice i could get fast enough with this phone to be happy with it.

I’ve installed putty on it and i can ssh to my laptop. The font is really small in putty, but i can just about read it without glasses. The user interface is a bit clunky – you have to click “send” and then a button for the type of thing you’re sending, e.g., a line of text or “ctrl+” – but it works well enough. I wouldn’t want to have to do a lot of work via putty on this phone, but it’s nice to have an ssh terminal i my pocket. The only thing i haven’t found a way to do is send a right hand angle bracket – which means i’ve got no way of redirecting output to a file – which isn’t a particularly big deal most of the time, but it would be useful. Putty doesn’t seem to have any way of scrolling back up the screen buffer either, which is a bit irritating.

The thing that really bemused me though was the ability to go to a full-screen display. Once you’re there, that’s it – you’re stuck. There’s no way back and no way to input anything, so you can’t even log off. Symbian doesn’t appear to have any way to kill rogue programs, either, so (although you can switch to other programs) the only way to close putty is to turn the phone off and back on again.

I was hoping to find a usable pdf reader for the 5800, as i’ve got quite a backlog of pdf literature that i want to be able to read away from the computer, but there doesn’t seem to be one. Adobe reader is available, but it’s not very good – and it’s expensive. Being used to downloading the linux and windows versions of it for free, i can’t say i’m excited about having to pay for an inferior version of it for my phone. But it’s useless anyway, so i won’t be buying it. However, the combination of the display size and the inherent inflexibilty of the pdf format means it’s probably not much of a goer on this size of device anyway.

The onboard gps is handy – particularly when combined with the google maps app. It’s nice to be able to get a map of the area with your location already marked on it. No need to carry a map ever again – so long as there’s mobile coverage, anyway!

And i’ve finally discovered a device that i can bear to watch television on. I’m not at all a fan of tv – and won’t even have one in the house if i’ve got a choice. But i’ve been enjoying watching downloaded programs from Australia’s SBS and ABC television stations. Despite its small size, the 3.2in, 640 x 360, 16m colour screen is surprisingly pleasant to watch – and i never thought i’d be saying that!

I started thinking about converting it back again almost straight away, but i didn’t do it. However, the more i worked with Drupal, the less i wanted to – and thoughts of moving back to WordPress came into my head every time i had to do anything with it. At first it seemed like a pain in the arse, but the more i thought about it the better it seemed – and it would be less of a pain in the arse in the long run than having to keep working with Drupal. The longer i left it the harder it would be – as there would be more blog posts to shift from platform to platform – so, this morning, i decided to bite the bullet and do it.

I did it the same way as i’d done it going in the other direction – manually. I copied and pasted the posts from Drupal into the WordPress editor (as source, so the formatting got copied too) and i set the “published” time and date to what they’d been originally. Then i copied the comments – inputing them as normal comments, but then editing them to change the poster’s name and web site and set the date and time to match the originals.

While i was using Drupal, i got a bit slack with keeping up the URL scheme that i’d been using under WordPress (i’d had WP configured to automatically add a date prefix, but Drupal didn’t do that), so i had to write a few “Redirect permanent” entries to .htaccess to make sure anyone following a Google link would arrive at the right page.

I’d also improved the layout a bit when i converted the template from WP to Drupal – so i had to do the same thing to the old WordPress theme now.

But finally, i’m pleased to say, this blog is back running on WordPress again!

Like i said, i don’t like Drupal much, for several reasons, but this was more about which is the best blogging platform rather than which is the best content management system. I’ve no doubt that Drupal is better for some things than WordPress is, but blogging isn’t one of them.

What i’d missed about WordPress was the excellent editor setup, the really useful statistics that you get with the Statpress plugin, notification of comments (it never worked in Drupal), very easy plugin update – and you can even update the whole system with just a couple of clicks now, too! I missed the nice, user-friendly dashboard and the useful administration bits and pieces that come as standard with WordPress.

Overall, WordPress is just much more pleasant to administer.

Nowadays, rather than basing a theme around WordPress, i build a static page and then slot WordPress into it. I create the page exactly as i would if i was going to build a static site – starting off with just one single HTML file and the CSS. That way i can get the layout right without having to mess around with any WordPress stuff. Then, once i’ve got it looking right, i slot in the content management system.

The basics of building a WordPress theme are quite simple – once you get the hang of it. If you want to build a theme yourself, or if you want to convert a static web site into a content managed WordPress site, here’s how to go about it. This explains how to create a theme with just two files – index.php and style.css (those names are important) – which is a very rough and ready way to do it. This is aimed at people who do know HTML and CSS, but who don’t know WordPress.

The first thing to understand is that WordPress doesn’t do the layout – you do. WordPress just injects the content into the page you design. The way it does it is with PHP statements that output the relevant part of the content wherever you put them in the page. You don’t need to know anything about PHP to make this work – and if you don’t know PHP, you can think of the PHP statements as sort of magic HTML tags, and not worry too much about the code that’s inside them. WordPress documentation usually refers to them as “template tags”.

Note that these PHP tags start with “<?php” and end with “?>” and you must keep the whole thing together as a unit. They mostly produce plain text – and therefore will be formatted only by the HTML tags you wrap round them. However, a few of them do produce HTML – for example the output from both the wp_list_pages and the dynamic_sidebar tags is formatted as an unordered list (<ul>) (they’re mentioned below).

An example of one of WordPress’s “magic” PHP tags is <?php bloginfo('name') ?> . This displays the name of your blog at whatever position you place the tag in your HTML. You set the name that’s displayed with this tag in the WordPress control panel’s “Settings” menu, on the “General” page – in the field labelled “Blog Title”.There are probably two places where you’ll want to use the <?php bloginfo('name'); ?> tag – between the <title> and </title> tags in the <header> section, and between the <h1> and </h1> tags in the header part of your <body> section. So you can start off by replacing the text in those places with that tag.

If you care about search engine optimization (and about making things more pleasant for your users), you won’t want to have just the blog name in the <title> tag on every page, so you’ll probably want to put the page title in it as well. To do that, you use the <?php wp_title(); ?> tag. Now your header title should look something like this:

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

These are some other tags you’ll probably want to use in your <header> section:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

And you’ll definitely want this one

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Then, immediately before the </header> tag, you should put this one:

<?php wp_head(); ?>

which allows WordPress to put anything into the header that it needs to put there to make it work properly.

In the <body> section you’ll probably want to use the <h1> page header tags, which i’ve covered above. You may also want a sub-header, or tagline, which you can set in the “Tagline” field of WordPress’s “General Settings” page. To include this in your HTML, you use this tag: <?php bloginfo('description') ?>

Then we come to the site’s main content. You’d probably want to have a div that’ll hold the main content on each page. I’ll call that div “content”. This is what it will probably look like:

<div id="content">

<?php if (have_posts()) : ?><!-- see note 1 -->

<?php while (have_posts()) : the_post(); ?><!-- see note 2 -->

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<span style="font-size:80%";><?php the_time('F jS, Y') ?> by <?php the_author() ?></span>

<div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?>

</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

</div>

<?php endwhile; ?><!-- see note 2 -->

<div class="navigation">

<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>

</div><!-- end of content div -->

The above is mostly taken from the WordPress default theme – but i’ve modified it a bit and reformatted it to try and make it work a bit better in this blog post. At first glance it may look like total gobbledgook, but you can just lift the whole thing and paste it into your main page section. The above code will take care of displaying blog posts or static pages – which you can create and organise using WordPress’s content management system.

I’ve inserted html comments referring to note 1 and 2. The tags that these are next two are structurally important and you should be careful not to delete them or move them around.

(1) The “if (have_posts())”, “else”, and “endif” tags wrap around two separate code sections – the part before the “else” displays posts (or pages) and the part after it displays a “Not Found” page if there are no posts or pages. Exactly what posts or pages are displayed by these is controlled by other parts of the WordPress system – but whatever it is that should be displayed on the page will be displayed by the code between the “if” and “else” tags.

(2) The “while (have_posts())” and “endwhile” tags wrap round code that may be used multiple times in one page. This happens on pages that show several blog posts, or teasers from several blog posts. For example, the home page of a blog might show the most recent 5 posts in reverse date order. How many are shown per page is set in the “Blog pages show at most” field on the “Reading Settings” page.

I’m not going to go into too much detail about most of what’s in that block of code – but if you’re reasonably familiar with HTML you should be able to work out more or less what’s going on. However there are one or two things worth pointing out. If you read through it, you’ll notice something that makes the “template tags” different from normal html tags – and that’s that they can be embedded within html tags. For instance, in

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php the_title(); ?></a>

the <?php the_permalink() ?> tag is inside the <a> tag. When the page is sent to the browser, it gets replaced by the URL that’s needed by the ‘href’ attribute.

This section of code:

<span style="font-size:75%";><?php the_time('F jS, Y') ?> by <?php the_author() ?></span>

puts the date and time that the post was published, along with the author’s name, at the top of the post, underneath the header. Depending on how you want your site, you might want to leave this out altogether – or you may want to style it differently.

This section:

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

Displays “meta” data that may be associated with the post or page. It shows tags and the category it’s in. If you don’t want to display tags or categories, you can delete those parts of it. The “edit_post_link” bit produces an “edit post” link that’s only shown to users who are logged on and are authorized to edit that post.

If you follow the logic of the html, you can probably move things around within this main code block fairly easily, or remove them altogether. Get it working properly first, before you start playing around with it though.

Next, you’ll probably want a sidebar with some menu items in it. Of course, you set your sidebar up with HTML and CSS as usual. All you need to put in it for it to work with WordPress is

<?php dynamic_sidebar() ?>

Then you can add “widgets” to it from your WordPress control panel’s “Widgets” page (in the “Appearance” section of the main menu).

To make the sidebar work, though, you must have a file called ‘functions.php’ in your theme directory, containing something like:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));


If you don’t have this file, your sidebar won’t show up in the Widgets menu.

At the bottom of your HTML, immediately before the </body> tag, you should add the <?php wp_footer(); ?> tag – it allows WordPress to insert anything it needs to insert into the foot of the page, just like the <?php wp_header(); ?> tag did in the header.

That’s pretty much it for the absolute basics of WordPress theme development. There’s one other thing you may need to know, though, and that’s how to make a horizontal menu (at the top of the page, say). For that you use

<?php wp_list_pages('title_li='); ?>

which will produce an unordered list (<ul>), which you can set to display inline and style appropriately using CSS.

Talking of CSS, i’d recommend using Firefox web browser for developing your WordPress site – and installing the “Web Developer” plugin and the “Aardvark” plugin. They both work differently, but they both allow you to hover the pointer over any part of a web page and see what class or id that HTML element is set to. It’s very handy to be able to do this when you’re working with WordPress layout, because it’s the simplest way to find out what you need to put in your CSS for styling some of the elements. This is particularly true when it comes to styling the sidebar – because the list tags for that are produced by WordPress and the only way to find out what they are is to view the source in your browser, to read the documentation at wordpress.org, or to use Aardvark or the Web Developer plugin to see what the element ids and classes are. The last option’s the easiest!

The final thing that you must do to make your theme work is to have a file called ‘style.css’ and to put the following comment right at the top of it:

/*

Theme Name: Your Theme's Name Here

*/

Without that, it won’t show up in the “Manage Themes” page of your WordPress control panel. (You get to that page by clicking on “Themes” in the “Appearance” section of the main admin menu.) The theme files should be in a subdirectory in wp-content/themes in your WordPress installation. It’s worth putting a screenshot in there as well – called ‘screenshot.png’ and about 300×200 pixels – as that will show on the “Manage Themes” page.

This really has been the absolute rough and ready basics of creating a WordPress theme. I haven’t been building a theme while i’ve been writing it and i can’t guarantee that if you follow exactly what i’ve written here, your theme will work. It’s not intended to tell you everything you need to know, but i hope it’s given you a rough idea of how it all fits together. To do the job properly, you’ll probably want to split your html up into at least 4 separate files – index.php, header.php, footer.php, and sidebar.php. WordPress has its own way of loading those files where they’re needed, and you’ll need to know how to organise that – having a look at the default theme should give you some clues.

Most importantly, there’s a vast amount of very good documentation at http://codex.wordpress.org – you should definitely start by reading the Theme Development page.

Since i started working with PHP, a year or so ago, i’ve been using OO concepts a bit. I’ve written a couple of classes to do things that seemed to require it, and i always use the object oriented style for functions if it’s available. However, that’s as far as it went. I understood the concepts of OOP, but i didn’t really understand its application.

A few days ago, however, i started playing around with CodeIgniter and i was impressed. So i decided to rewrite a project i’m currently working on using the CodeIgniter framework. And now, as a result of using it, i think i really do finally get object oriented programming!

In the words of their web site, “CodeIgniter’s an Open Source Web Application Framework that helps you write kick-ass PHP programs”. It uses the “Model – View – Controller” approach, which separates logic from presentation and, if used properly, forces you to write code in an object oriented and modular way.

Controllers are functions that run first when a URL is requested. They then load one or more Views – which is where all the HTML is. Models are where your database functions go – and they can be called from either a controller or a view. Keeping these aspects of code separate helps considerably with reusability and it also helps keep individual sections of code simple. For me, at least, this approach seems to noticeably reduce the number of errors in my code.

CodeIgniter comes with a lot of useful built-in functionality – although the framework’s filesystem footprint is surprisingly small (only about 3MB). The included libraries help with things like accessing a database, sending email, validating form data, maintaining sessions, manipulating images, working with XML-RPC data, etc – most of the functions that you need to use all the time when developing web applications. The database abstraction layer not only simplifies the code, but should help with portability.

One of the best things about it, from my point of view, is that there’s no fancy template stuff involved – you just use PHP.  Rewriting the project that i’m currently working on, to fit into the CodeIgniter framework, has proved to be relatively easy. Mostly, i can just cut and paste from the old php files into new ones – putting the relevant bits into either controllers, views, or models. I’ve had surprisingly few problems doing that – and i’m quite sure that’s because breaking the code down into smaller, more modular chunks has helped eliminate mistakes that would creep in otherwise.

I’m sure the work i’ve had to do rewriting this project will pay dividends in the time that i’ll save on the parts i’ve still got to do – and also in the added ease of maintenance and modification. And, as a bonus, i’m learning my way around a framework that i’m sure i’m going to be using a lot in future.

When a user typed two characters into the search input box, my script would fire off an ajax request to the server and get a list of all matching strings from the relevant database field. If they typed a third character, it would do the same thing again for that string. And so on. I didn’t bother getting suggestions for just one typed character, as there would be too many suggestions for the user to handle easily and the extra load on the server and network seemed unnecessary.

However, i realised yesterday that there’s no point doing any requests after the first one – so long as the first two characters of the search string stay the same – because we’ve already got all the suggestions we need. After the first request, subsequent requests for longer search strings only return a subset of the results for the first two characters. So all i needed to do was to keep that first set of results and narrow it down as more characters were added to the string it needed to match.

The decision to reuse the old results or retrieve a new set depends on whether the first two characters of the search string match the first two characters of the first result of the old result set. If they match, then we’ve already got the results we need – if they don’t, then we do an XMLHTTP request and get some new results.

This change should result in quite a considerable saving in http request overheads and server load if users type more than two characters into the search box. It should also mean responsiveness improves noticeably – particularly on slow network connections.

While i was making these changes, i realised the way the search suggestions were being sent from the server could be optimised too. To keep things simple, i was retrieving the data from the mysql database, putting it into an array, and then json_encode’ing it and returning it to the browser, without doing any other processing. This seemed most efficient at the time. However, because mysql was returning an associative array with the field name as the key, the field name was included with every record – which was quite a lot of redundant data.

Looking at it a bit more critically, i realised there was no need to return the field name at all, as it was never used in the search suggestions code (it’s already known by the browser) – and having it there made the code more complicated anyway. I could have used a numeric array, rather than an associative one, but the key would still have been redundant. So i rewrote it to just push the value from the result into the array to be json_encoded.

On average, this ought to knock about a third off the data that needs to be sent in the XMLHTTP request. It probably won’t make much difference over a fast network link, but it should be noticeable over a slow one.

This dropdown search suggestions system was my first Ajax project – and i was focussed more on getting it to work than on proper optimisation. Next time i’ll be thinking about optimisation from the outset.

Of course, while i was modifying my original code, i discovered a bug i hadn’t noticed before – so now i’m going to have to fix that too. Groan…

Instead of calling my JavaScript script files “something.js”, i’ve started calling them “something.js.php” – so they’ll be parsed by the php interpreter. This allows me to dynamically create JavaScript scripts – for example, to attach a dynamically created dropdown list on a page when a user clicks on a link. The ability to create something like a dropdown list according to what else is happening on a dynamically generated page can be useful – but it can be a bit confusing to debug, because seeing the JavaScript file you generated isn’t straightforward. It can also require some mental gymnastics to work out whether a bug’s in the PHP or the JavaScript!

Anyway, i wanted to pass a parameter through from the page’s URL to the js script, in order to be able leave the subject of the current page out of the dropdown list. The first thing i tried was to include the following tag in the header, immediately before the tag calling the javascript file:

<script type="text/javascript">var personId = <?php echo $_GET['id'] ?>;</script>

This works ok, but it’s a bit messy and including it in the HTML goes against the principle of separating structure from function. So, instead of that, i changed the script tag which loads the javascript file to:

<script type="text/javascript" src="person.js.php?id=<?php echo $_GET['id'] ?>"></script>

The browser now gets the javascript file with that parameter, which i can easily access in the javascript file itself, thus:

var personId = <?php echo $_GET['id'] ?>;

To help debug this sort of script, i view the page source. Then i copy and paste the URL of the js.php file, along with any URL parameters, from the script tag in the page source into the browser’s address bar. Then i use “View Source” to look at the dynamically generated javascript.

I’m also going to start naming css files as “something.css.php” – so they, too, will be parsed by the php interpreter. I haven’t investigated the possibilities it opens up yet, but it would allow me to use variables in the CSS file and it would make it possible to set something (e.g., a colour) in one place, at the top of the file, which can recur wherever it’s needed (using php ‘echo’ statements). This would mean i’d only have to change it once and changes would be propagated throughout the file.

However, i had a bit of struggle to get that to work with Firefox 3. It works fine in IE7, Safari and Opera – and i was puzzled about why it didn’t work in Firefox as well. After a bit of experimenting, i realised that apache sends a “Content-type: text/css” header if the filename suffix is “.css”, but a text/html content-type header if it’s “php”. Obviously the other browsers don’t worry about that – but Firefox does. So, to make .css.php files work (if you’re using apache), you have to put the following line at the top of the file:

<?php header( 'Content-type: text/css' ); ?>

Note: this must be the very first line in the file. If there’s anything else before it – even a blank line – it won’t work, because once apache has sent anything to the browser it can’t send another header.

With this in mind, even though files with the .js.php suffix seem to work ok, it’s obviously a good idea to send an application/javascript header with js.php files, too – like this:

<?php header( 'Content-type: application/javascript' ); ?>

But implementing a search system when you’re dealing with band names and record titles isn’t a simple matter. I considered mysql’s fulltext search methods, but they turned out to be useless for searching through this type of text. There were two main problems. Firstly, there’s a minimum length of words that will be indexed – this is only configurable at system level and, on a shared web hosting server, changing it wasn’t a viable option. The default minimum is 4 – which excludes band names like “yes” and “who”.

Mysql also has a “stopword” list, which contains words that don’t get indexed. The stopwords list includes words like “them”, “who”, and “yes” – all names of groups which appear in the database and need to appear in search results. Again, this list is a system variable and  it wasn’t viable for me to change it. So i had to give up on the idea of using fulltext searching and do it the hard way.

The “hard way” consisted of using the “SELECT ... FROM ... WHERE ... LIKE %...%” sql construction with the search string. But that wasn’t good enough on its own as , so i also split multi-word search strings into statements for the individual words and strung them together using “AND” operators – so the search should turn up what they were looking for even if they had the words in the wrong order.

This worked fairly well, but for some searches it threw up lots of results that weren’t really what you were looking for. For example, searching for “yes” produced results that included “Isaac Hayes” and “Eyes Adrift”. Not a particularly big deal, i guess, but when they come at the top of the list it’s a bit confusing. I could have added more code to make sure any results that contained the search string alone came at the top of the list, but it was getting fairly complicated already and i decided that a drop-down suggestion list containing relevant search terms would be a better option.

I hadn’t used ajax before – in fact, i hadn’t written much javascript at all – but i was surprised at how easy the ajax side of the job was. I decided to use JSON, rather than XML, to transport the search results from the server to the client, for two reasons. PHP has a nice function to convert an array into JSON which was neater than writing several lines of code to build the XML document “manually”. Also, JSON is a more efficient way of sending the search results – in terms of the number of bytes that it contains – which is important when you’re trying to get a feel that’s as close to realtime as possible.

Getting the user input from the input box in the search form proved to be an altogether trickier challenge. The only reason it was trickier was because i had trouble finding good documentation on the relevant DOM events. I knew i needed to use one of onKeyDown, onKeyPress, or onKeyUp in the html tag for that input, but working out which one would be best wasn’t easy. Some of documentation kicking around on the net is just plain wrong.

After a bit of experimentation, i settled on onKeyDown – as it seemed to work better for what i needed than onKeyPress. For some reason – possibly reading inaccurate documentation – i rejected onKeyUp as an option. The KeyDown event fires for more keys than the KeyPress event, which may be why i chose it – i don’t really remember.

Anyway, KeyDown fires before the current character has been written to the input field, so i wrote an input handler to construct a string from the contents of the search box plus the key that had just been pressed. This isn’t a trivial matter, as you have to take into account the cursor position, the delete and backspace keys, as well as any selection that may be in effect at the time.

I ended up with the following code to handle user input:

var keynum;
/* Get key code depending on which browser it is. */
if ( keyevent.keyCode )
{
  keynum = keyevent.keyCode;
}
else if ( keyevent.which )
{
  keynum = keyevent.which
}
else if ( window.event.keycode )
{
  keynum = window.event.keycode;
}

/* Get the text that's already in the input field. */
var inputText = document.someform.searchstring.value;

/* Get the value from the select box. */
var field = document.someform.field.value;

/* Which key? */

switch( keynum )
{
  /* first - ones we ignore */
  case KEY.LEFT:
  case KEY.RIGHT:
  case KEY.UP:
  case KEY.DOWN:
  case KEY.ESC:
  case KEY.PAGEUP:
  case KEY.PAGEDOWN:
  break;

  default:
  {
    /* Get selection information */
    var selectionStart = getSelectionStart( document.someform.searchstring );
    var selectionEnd = getSelectionEnd( document.someform.searchstring );

    if (( keynum == KEY.BS ) || ( keynum == KEY.DEL ))
    {
      /* Backspace or delete - don't add it to the string, but delete
      whatever character(s) it relates to. */
      if ( selectionStart == selectionEnd )
      {
        /* There's no selection - just a cursor position. So delete one character
	- either before or after the cursor, depending on whether it's BS or DEL. */
        cursorPosition = selectionStart;

        if ( keynum == KEY.BS )
        {
          // backspace - delete char before cursor
          var searchString = inputText.slice( 0 , cursorPosition - 1 )
+ inputText.slice( cursorPosition );
        }
        else
        {
          // del - delete char after cursor
          var searchString = inputText.slice( 0 , cursorPosition )
+ inputText.slice( cursorPosition + 1 );
        }
      }
      else
      {
        /* There is a selection - delete the characters covered by it. */
        var searchString = inputText.slice( 0 , selectionStart )
+ inputText.slice( selectionEnd );
      }

    }
    else
    {
      /* Not deleting, so add character to search string, insert
      it in search string, or replace selection with it. */
      var searchString = inputText.slice( 0 , selectionStart ) + String.fromCharCode( keynum )
+ inputText.slice( selectionEnd );

    }
}

[......]

/* Functions to get the selection start and end positions. If this is IE,
we need to approach it in a bit of a roundabout way to find the positions.
If Mozilla etc, it's simple. */
function getSelectionStart( thisElement ) {
  if ( thisElement.createTextRange ) {
    var selectionRange = document.selection.createRange().duplicate()
    selectionRange.moveEnd( 'character', thisElement.value.length )
    if ( selectionRange.text == '' ) return thisElement.value.length
    return thisElement.value.lastIndexOf( selectionRange.text )
  } else return thisElement.selectionStart
}

function getSelectionEnd( thisElement ) {
  if ( thisElement.createTextRange ) {
    var selectionRange = document.selection.createRange().duplicate()
    selectionRange.moveStart( 'character', -thisElement.value.length )
    return selectionRange.text.length
  } else return thisElement.selectionEnd
}

[The last two functions were pinched from Diego Perini's script at http://javascript.nwbox.com/cursor_position - i didn't get round to rewriting them before i scrapped this approach.]

Of course, it took a while to get all this working properly. But as soon as i had got it working i discovered that there was a much easier way to do it!

I stumbled across Peter-Paul Koch’s excellent Quirksmode site and his Event Compatibility Tables, which told me that “[the keyup] event fires after the keystroke has been processed; for instance after a character has been added to a text input.” Doh! That was what i needed to know before i wrote all that code above!

A minimal amount of experimentation told me that onKeyUp was what i should be using, so i scrapped all the code above and replaced it with:

/* Get the text from the input field. */
var searchString = searchfield.value;

which was much neater! I hadn’t wasted my time though, because i now had a good understanding of text input handling with javascript and the DOM.

There are several jQuery plugins for dropdown suggestion lists, but all the ones i looked at either seemed a bit buggy or didn’t work the way i wanted them to. Using one of them would also mean including the jQuery library in the page’s code – which adds a slight download overhead – so i decided against it. If i’d been using jQuery for anything else in the page, it probably would have been different but, as i wasn’t, writing my own code was easier and more efficient.

I was surprised at how easy it was to implement the dropdown search suggestions list. It’ll make searching easier for my client’s customers and hopefully it will help him sell more records. But i’m not sure if it will fix the problem with searching for “yes” – with short names like that, anyone who can type at a reasonable speed will have typed the whole thing into the search box before they see it in the suggestions. And unless the string comes from the suggestions, the search will be loose, rather than exact.

But Yes are crap anyway, so who cares?