The inevitable disclaimer:
This WordPress plugin was thrown together in a fit of boredom by someone who is only vaguely aware of how the API is supposed to work, and whose last real contact with PHP development was, oh, so many years ago. If you want a proper FLIR plugin for WordPress, 23systems have the real thing in the WordPress Plugins directory. The one described here is for the few, the chosen, the band of brothers (and sisters) who want a daft excuse for a plugin to take apart.
A couple of days ago, She Who Does Web was telling me about various ways of making a web page look a bit less crap, and the difficulty of making things stand out better when the only things at your disposal are about three fonts and a bit of chewing gum. sIFR was mentioned briefly, but being a grumpy old hack, I can’t make myself plonk a Flash movie into a page for the sole purpose of displaying some pretty fonts. I said so, and then I was told of FLIR. No, I am not making these acronyms up.
What’s a FLIR and what do I do with it?
FaceLift Image Replacement is a collection of JavaScript and PHP functions which let you mark text based elements in your html. The JavaScript parts pull out the text, and send it to the PHP part on the server, which turns it into a spiffy image of the same text, with different fonts. This image is then returned to the browser, and is displayed instead of the original text. This lets you have nice headers, without having to load up a paint application every time.
In the image above, the only difference between the two screenshots is that one was taken with the FLIR plugin disabled, and the other one was taken with the FLIR plugin enabled. No content, markup or style was modified between the two shots. The font used in the second shot is, incidentally, Koczman Bálint’s “Capture It” from DaFont.
So why a WordPress plugin?
Why indeed, especially considering there’s already a very good one out there? Simply put, I wanted to fool around with the WordPress API for a bit – I’ve used it as a blogging service for over a year now, but I never actually tried to see how it works, which is kind of sloppy for me. Combining the two things seemed to make sense at the time.
Ok, so where do we start?
I’m working off WordPress 2.6.2, so if you’re interested, grab a copy from wordpress.org. My local installation lives on Apache. Not being naturally disposed to fudge around with configuration files, I downloaded and installed XAMPP for Windows, and it’s working pretty smoothly so far. I also downloaded the latest release of FLIR. This has some requirements of its own, but the default installation from XAMPP is enough for the basics. In my case, I dropped WordPress and FLIR into the htdocs subfolder of XAMPP, and named them “blog” and “facelift”, respectively.
Writing a plugin
Once everything is up and running, create a subfolder in the wp-content\plugins folder in wordpress. This folder should have the same name as the plugin. While the WordPress documentation says that the folder is optional (you can put the plugin directly in the plugins folder, like the hello plugin packaged with WordPress), I strongly suggest you make one – plugin files can grow pretty big, and you’ll find yourself wanting to break them up pretty soon. Once we have a folder, we can create a plugin file. This will be a PHP file with the same name as the plugin. To begin with, let’s add some metadata to it so that WordPress can see what the hell it is.
Plugin meta-data is written in the form of a structured comment:
<?php
/*
Plugin Name: FLIRt
Plugin URI: http://no.place.yet
Description: FLIR (FaceLift Image Replacement) helper for wordpress.
Version: 1.0
Author: Karl Agius
Author URI: http://karlagius.wordpress.com
*/
?>
The above gives WordPress enough information to display the following in its plugins page:
As you can see, the engine parses these comments and forms a plugin entry in this page. The Plugin URI is used to create a link off the plugin name, while the Author URI is linked off the name of the author (bet you saw that one coming). If you can’t be bothered to enter all the fields, only the Plugin Name is required.
So far we have a plugin that does absolutely nothing. That’s all very Zen, but also very useless, so let’s make it do something. Create a PHP function in the plugin file – any old function will do, as long as it writes something to the output; even:
<?php
function Something() {
echo “Hello world!”;
}
?>
Once we’ve figured out what we want to do, we now have to tell the engine WHEN we want to do it. This is where actions come in. We need to register the function with an action – think event handlers, and you’re there. To register a function, we use the add_action function, like so:
<?php add_action(‘wp_footer’, ‘Something’); ?>
The first parameter is the action we want to hook to; in this case, the wp_footer action. The second parameter is the name of the function we want to hook. Once this line is executed, WordPress will know that it has to call this method when the wp_footer action is raised. Exactly when this happens is up to the template, which would usually include a call to wp_footer() – it doesn’t matter to us at this stage, since all this is abstracted from us. All we need to know is that, when the action is triggered, we’re going to run. If we activate the plugin now, and view the page, we should see the effects of our little plugin somewhere in there.
WordPress has a ton of actions you can hook to, and then some. The online documentation has a full list, so pick the one that makes most sense for your plugin, and hit it.
Closing off
I’ll be writing more on this subject tomo… um, soon… uh, no, make that eventually, to discuss how to set up a database table when the plugin is first activated, and how to create an administration page. In the meantime though, don’t be shy, rip the sample to shreds and see what makes it tick. Should you try to build it up on your own though, let me give you some advice: $wpdb->show_errors(); is your friend. Learn to love it, it will save you hours of frustration. See ya all whenever.
One Reply to “FLIRt – A WordPress plugin”
Comments are closed.