When I last looked at customizing feeds in WordPress, it was all to do with being able to offer a summary and full text feed simultaneously—making use of WordPress' flexible feed URL syntax and a .htaccess file. In this post I look at modifying the actual contents of the feed using a functions.php file (which may already exist as part of your current theme).

Just as WordPress provides a number of hooks for adding or removing actions in your theme header (see here), so to do the core files that generate your feeds. Editing the core files is however discouraged (it makes upgrading a pain), and although you can build your own replacement feed templates an easy alternative is adding a few lines to your theme's functions.php file.

As a perpetual PHP beginner I feel obliged to warn you that use of the following code is at your own risk.

If there are any PHP/ WordPress experts reading this who can improve on my code please make yourself known ;-)

Removing WP version info

Somewhere, a while back, I read a tip about not including the WordPress version you are running in your template header—potentially allowing hackers to identify you as a target if you haven't kept up-to-date. It's easy to remove if present. For example, in the K2 theme just delete the following line from header.php:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

I recently released that version information was still being sent out in my feed. The feed XML contained a line like this:

<generator>http://wordpress.org/?v=2.x</generator>

Thanks to Peter Westwood's helpful post I used my theme's functions.php file to remove this with the following code:

//Remove WP version info
function hide_wp_vers() { return ''; }
add_filter('the_generator','hide_wp_vers');

So wherever the_generator function is called (such as in the feed templates in /wp-includes) it gets replaced with... nothing. Job done.

Adding a feed image

A feed image (e.g. your site logo or avatar) is an optional part of the RSS 2.0 spec and shows up in some feed readers along with the feed description. There are plenty of tutorials (search Google) that tell you how to add a feed image by editing core template files, and there are plugins that will add one for you. I had previously edited my core RSS 2.0 template, and lost the changes during upgrades more than once. To avoid this in future here's what's now in my functions.php file:

//Add a feed image
function feed_image() { echo "<image>\n\t\t<title>bioneural.net</title>\n\t\t<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>\n\t\t<link>http://www.bioneural.net</link>\n\t\t<width>64</width>\n\t\t<height>64</height>\n\t\t<description>bioneural.net</description>\n\t</image>\n"; }
add_action('rss2_head', 'feed_image');

Having created my feed_image function I use add_action (Codex) to insert my function via the rss2_head hook (Codex).

Note that \n means new line, \t means tab, and \r (not shown) carriage return: these are just for the sake of formatting. They have no function other than making the feed XML—which you will likely never see—look more organized:

<image>
	<title>bioneural.net</title>
	<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>
	<link>http://www.bioneural.net</link>
	<width>64</width>
	<height>64</height>
	<description>bioneural.net</description>
</image>

Here's how the above renders when viewed in Bloglines:

Tip: If you want to add a feed image but don't want to do it via a plugin or functions.php, you can use Feed Image Burner from FeedBurner.

Adding a content license

I've noticed a rise in my content appearing on splogs, usually in the form "[Some random name] wrote an interesting post today: here is an excerpt". This violates the Creative Commons licensing of my content, which requires correct attribution. In a similar vein I've noticed some of my images turning up on "all rights reserved" sites with no attribution. While some folk are no doubt just ignorant, the sploggers are simply morons who don't give a damn. I can't do much about the latter (although I'm giving AntiLeech a spin) but it did get me wondering what I can do to improve the visibility of my licensing terms for the benefit of those "unaware".

The Creative Commons Wiki links to an RSS 2.0 module for annotating feeds. While this may be machine-parsable I've yet to come across a feed reader that actually picks up on it. As well as incorporating this extension I wanted to add a human-readable annotation to each feed item. This one took a bit of figuring out:

//Add CC license to namespace, item, inline img link within description
function add_license_ns() { echo "\n\t" . 'xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"' . "\n"; }
add_action('rss2_ns', 'add_license_ns');
function add_license_item() { echo "\t" . '<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>' . "\n"; }
add_action('rss2_item', 'add_license_item');
function add_license_img($join) {
	$join = _e('<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p>') . the_content();
	return $join;
}
add_filter('the_excerpt_rss','add_license_img');

The first function writes the required namespace declaration; add_action then adds this via the rss2_ns hook (Codex). The next function/ action pair writes the module to each feed item using rss2_item (Codex). The third part is the human-readable bit: writing the image, text, and links and concatenating these with the_content() (Codex) to replace the_excerpt_rss() (Codex). Note also the use of the rel-license microformat.

For this to work you must set your Reading Settings in WordPress to Summary, even though we will be displaying the full text (replacing the_excerpt_rss() with the_content()).

The XML will look like this (edited for clarity):

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	...
	xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	...
		<item>
		<title>Web developer widgets</title>
		...
		<description><![CDATA[<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p><p>Mac-based web developers...</p>]]></description>
		...
		<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>
		</item>

Rendered in a feed reader humans will see this:

The Creative Commons icon is hopefully recognisable and links to the correct license; the link to bioneural.net links to additional terms of use.

Tip: If you prefer not to have full text feeds containing HTML tags, you could use the_content_rss('', '', '', 250) (Codex) in place of the_content() to produce a 250 word text-only teaser.

Expanding the feed description

The text of the feed description is ordinarily the same text that appears as the tagline for your blog (set in General Settings). You might want to keep it short in your blog header, but perhaps send a more informative version out with your feed.

In K2 at least the description is only used in the head:

<meta name="description" content="<?php bloginfo('description'); ?>" />

and header:

<p class="description"><?php bloginfo('description'); ?></p>

One solution is therefore to replace the PHP call with short fixed text descriptions (e.g. "stuff worth sharing") in your theme template (header.php) and make the description/ tagline in WP General Settings longer, so it gets into your feed e.g.:

<description>bioneural.net is for stuff worth sharing: commentary by Bruce McKenzie. Major topics covered are gadgets, informatics, Internet, Mac, mobile, musings, New Zealand, photography, Project Koru, quicklinks, rant, rave, travel and Windows</description>

I was unable to successfully utilize rss2_head (Codex) in a way that avoided duplicate descriptions.

Tip: Another way to add a more detailed description to your feed only is to use Title/Description Burner from FeedBurner.

Adding a category image

I previously used the now neglected Category Image(s) plugin to send out a category icon with each feed item, replicating their use on my blog to readily identify Mac-related posts, etc. All I needed to do was replace the default item description with this:

<description><![CDATA[<?php c2c_the_category_image(); ?><br /><br /><?php the_excerpt_rss() ?>]]></description>

Sadly such a trick doesn't work with the Category Icons plugin I am now using, but I've been in touch with the plugin author and submitted this as a feature request.

Mac-based web developers may yet find a use for Dashboard. SeeSS is a CSS property reference detailing inheritance, CSS compliance, Safari support, possible and default values, examples, plus an informative description [screenshot]. PHP Function Reference provides offline access to the PHP manual, a cheat sheet, and an interactive date formatter [screenshot].

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.)

Get the files

Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory:

/wp-content/themes/k2/siteprefs/

At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below).

It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for improvement are welcome. If you do modify it in a novel way (or use it in a theme other than K2), please leave a comment so I and others can check it out.

Right then, let's hack some templates!

Step 1: Look for cookies

Add the following code into PHP block at the top of K2's header.php (e.g. before the closing "?>"):

// Check cookie for stored site prefs
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "alternate")) ? "alternate" : "style";

Here, "style" is the name of your main stylesheet (style.css in K2) and "alternate" is the name of a stylesheet we'll create at Step 5. If you're not using K2 pop this between PHP start and end tags at the top of your header template and set "style" to the name of your primary CSS file.

Step 2: Know your style

We need to replace the relative link to your stylesheet with one into which we can insert the value of the variable $layout. While we're here, we might as well link to the styling for the preference panel. In the head element of header.php replace this line (or your theme's equivalent):

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

with:

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/<?php echo $layout; ?>.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/siteprefs/siteprefs.css" />

Your K2 custom stylesheet will still be loaded too, if you're using one.

Step 3: Flick the switch

Create a toggle to switch visibility of the preference panel on or off (it will be hidden on page load). The actual "switch" might be a text or an image link, inserted into an appropriate place (e.g your header or sidebar). If you prefer to add the toggle in the form of a tab in your K2 menu, look for ul class="menu" in header.php and replace this code:

	<?php wp_register('<li class="admintab">','</li>'); ?>
</ul>

with the following code:

	<?php wp_register('<li class="admintab">','</li>'); ?>
	<li><a id="siteprefs-toggle" href="#" title="Click to show/hide site preferences (requires JavaScript)">Prefs</a></li>
</ul>
<script type="text/javascript">
	jQuery(document).ready(function() {

	// hide #siteprefs as soon as the DOM is ready
	jQuery('#siteprefs').hide();

	// toggle #siteprefs on clicking the #prefs-toogle link
	jQuery('a#siteprefs-toggle').click(function() {
	jQuery('#siteprefs').slideToggle(400);
	return false;
	});

});
</script>

If you'd rather use the supplied image (sitepref2.gif), place the following code after p class="description" (which is within div id="header") and before ul class="menu" in K2's header.php.

<a id="siteprefs-toggle" href="#" title="Click to show/hide site preferences (requires JavaScript)"><img src="<?php bloginfo('template_directory'); ?>/siteprefs/img/sitepref2.gif" width="52" height="28" alt="siteprefs" /></a>
<script type="text/javascript">
	jQuery(document).ready(function() {

	// hide #siteprefs as soon as the DOM is ready
	jQuery('#siteprefs').hide();

	// toggle #siteprefs on clicking the #prefs-toogle link
	jQuery('a#siteprefs-toggle').click(function() {
	jQuery('#siteprefs').slideToggle(400);
	return false;
	});

});
</script>

The CSS to position the #siteprefs-toggle image within K2's header image area is included in the download (it will be ignored if you create a menu tab instead). If this position doesn't suit your theme of course you can overwrite this in siteprefs.css.

The toggle's "slide" effect depends on jQuery, which comes with K2 by default. If you're not using K2, you'll need to include the jQuery library in your head, find an alternative JavaScript (here is how v1 did it using Proto.aculo.us), or you may wish to dispense with the toggle altogether and ventilate your preferences permanently.

Step 4: Feel included

The file siteprefs.php includes the XHTML and PHP to build your preference panel. As well as providing the Theme Switcher control, it works with layout.php to toggle your main and alternate stylesheets (and store your choice in a cookie), and advises your audience on link behaviour. You can change the content of these three columns as you see fit just by editing siteprefs.php.

To get siteprefs.php into your theme we have to include it e.g. immediately below the closing tag of the div #header in header.php, so it appears to slide out from the K2 menu:

<?php include (TEMPLATEPATH . '/siteprefs/siteprefs.php'); ?>

If you prefer you could put it at the top of your page, in the sidebar, or in the footer. Or anywhere. For sidebar placement, for example, you would likely edit siteprefs.php and siteprefs.css to respectively create and style a single vertical column.

At this point, if you refresh your site you should see the bioneural.net preference panel installed. If all went well and you're using a default K2 installation, you should be something like this:

Click thumbnail to enlarge image

Site preferences installed into default K2 theme (using image toggle)

Step 5: Go alternative

Finally we create an alternate stylesheet, named alternate.css (the name is specified in Step 1 and in layout.php).

What you put in here is up to you. You will likely want to import existing styling from your main stylesheet, and then write a handful of rules which, owing to the CSS "cascade", will overwrite some of those you just imported.

Here's a barebones example that increases font size and turns the default K2 fixed-width theme into a fluid/ liquid layout:

@import 'style.css';

body { font-size: 90%; } /* approx 30% larger than K2 default */
#page { width: 100% !important; border: 0; padding: 0; }
#primary { width: 100%; margin-left: -30px; padding-left: 30px; background-color: #fff;}
.content { background-color: #fff; } /* Match bg colour to #primary */
#sidebar-main.secondary { padding-left: 30px; border-right: 10px solid #f2f2f2; padding-bottom: 20px; } /* Border colour matches bg colour of .secondary */
.secondary { width: 100% !important; margin-left: -30px; background: #f2f2f2; }
#footer { background-color: #ccc; }

Upload alternate.css into the same directory as your main stylesheet (e.g. styles.css i.e. /wp-content/themes/k2/). This is important as the switch relies on your main and alternate stylesheets being in the same directory.

If you're having trouble overwriting rules for your alternate stylesheet, try !important e.g. width: 100% !important; but bear in mind IE6 will ignore it.

Build notes, features and credits

You don't have to read on—unless you're interested in how, why, and who helped make it work the way it does ;-)

The toggle effect

The toggle uses the jQuery JavaScript library and the code for this was covered in a previous article.

What if the user doesn't have JavaScript, or has it but disabled it? Version 1 hid the preference panel on page load using CSS, and showing it required JavaScript to change the styling to "display". Version 2 uses JavaScript to initially hide the panel, so if there is no JavaScript the panel will be revealed at the outset. Furthermore, because none of the controls in the panel utilize any JavaScript, no functionality is impaired. The only (minor) outcome is that the panel can't be hidden, but at least the "accessibility" preferences are, err, accessible.

A flexible 3-column framework

The XHTML mark-up and CSS for this is adapted from an example multi-column layout given in an ALA article by Alan Pearce. Alan cleverly builds on previous work that makes use of borders to simulate equal-height columns. Initially my mark-up used borders too, but after 2 days of trying to get it to work in IE6 and 7 with in-column padding I realised I didn't need them.

The fixed-width two-column K2 theme I use defaults to a width of 780px. To create our basic layout we create 3 divs (one for each column), and wrap these in a container div. The container sets up the 3 columns using floats and negative margins and then uses padding to effectively pull the outer columns back inside the container! We then create a header div and a footer div, and style the width of the outer columns (including padding) to 260px i.e. one third of our page width:

We can then apply a horizontally-repeating background image to the header and footer divs, match the background colours, and clear floats for the footer to position correctly. Here's what our panel now looks like topographically:

But the preference panel resizes, too. If your alternate stylesheet is "fluid" i.e. page content fits to the width of the browser window, the three columns will automatically space themselves out equally to fill the window:

Note that the left and right column width doesn't actually change, but the width of the middle column is no longer an implied 260px since we have set #siteprefs-center to occupy 100% width.

At this point everything is looking good—in Firefox, Safari, and IE7. You guessed it: Internet Exploder 6 is singing protest songs. We need to patch our CSS to make it work with IE6:

The IE escaping floats bug causes the contents of #siteprefs-header not to display. We just add width: 100%; to fix this.

The IE doubled float-margin bug causes #siteprefs-right to float outside of #siteprefs-wrapper! To fix this we add display: inline; to #siteprefs-right.

Switching whole themes

The Theme Switcher plugin for WordPress is by Ryan Boren. It sets a cookie so that the user's browser remembers their choice of theme for subsequent visits.

The bioneural.net preference panel uses conditional PHP to show the theme switcher dropdown menu or, if the TS plugin is not present or is present but not activated, they will see a "not enabled" message:

There are a few other things you might consider if you allow theme switching on your site; see Ben's list. To press the point, the preference panel includes a warning when the switcher is displayed that using it "may reduce functionality". At the very least you need to allow users to easily switch back to the previous theme—otherwise they'll have to wait a year until the cookie expires (not really; they could just delete the cookie!). In the sidebar of each theme you have installed, just paste the following:

<?php if (function_exists('wp_theme_switcher')) { ?>
	<?php wp_theme_switcher('dropdown'); ?>
<?php } ?>

If you don't like the list styling, this CSS (as used in siteprefs.css) will remove it:

#themeswitcher { list-style: none; padding-left: 0; }

Switching stylesheets

Previously I had used JavaScript to effect both a change in layout (fixed or fluid-width) and in text size (smaller, default, larger). Both of these are really accessibility issues—adapting to the size of your screen or the acuity of your vision. Add to this the observation that enlarging text size very soon causes problems within the confines of a fixed-width layout and it becomes clear why I decided to merge these features in version 2 i.e. biiger text, bigger container.

Stylesheet switching with memory is ideal, for example, if you want your iPhone/ tablet—or screen resolution-challenged work PC—to always use an alternative "accessible" layout. Cookies could likewise ensure that a different default style makes full use of your stunning 23" Apple Display.

Having decided against reusing the original ALA styleswitcher JavaScript, and considered using jQuery (as here—also JavaScript, but better), I looked at a few PHP options and settled on Roger Johansson's method.

Identifying off-site links

By default (Option 1) any link you tag with rel="external" will display the "off-site" icon (dimmed for visited links) using the included CSS. I prefer this option for identifying off-site links because it gives your audience the choice as to how links behave (the alternative is forcing them to open new windows using JavaScript or the depreciated target="_bank"). If you haven't religiously tagged your off-site links with rel="external" (or can't be bothered), you have two alternative options:

1. Open siteprefs.css and uncomment Option 2 (making sure the CSS for Options 1 and 3 is commented); this will apply the icon to all links other than to your own domain (credit). See the instructions in the file.
2. A WordPress plugin is available that will do it for you (Option 3). Once the Link Indication plugin is activated just uncomment the CSS for Option 3 in siteprefs.css (ensuring the CSS for Options 1 and 2 is commented-out).

Option 1 works in Firefox, IE7, and Safari (but not IE6). Option 2 works in Firefox and Safari (but not IE7 or IE6). Option 3 works in Firefox, IE7, IE6, and Safari (but does not differentiate between visited/ unvisited links).

Change log

Is WordPress altering your punctuation behind your back e.g. converting typewriter quotes (") to smart quotes (“ & ”)? It's down to the on-by-default wptexturize function. You can disable this by adding the following to your theme's functions.php file: remove_filter('the_content', 'wptexturize'); (for posts) and remove_filter('comment_text', 'wptexturize'); (for comments). Or, use a plugin.

If you had viewed the source of my WordPress-generated pages a while ago you'd have noticed that my head elements were a real mess. Now they've been spring cleaned, arranged neatly into related groupings and the needless clutter disposed of. Plugins that use the wp_head hook distribute junk all over the show, offending any sense of order. Luckily your WordPress theme is the key to taking control of your head, through a combination of edits to functions.php and header.php.

Removing actions using a functions file

Your theme may already include a file called functions.php. If it doesn't you can create one using the functions file found in the default theme directory (which is a bit busy), or copy-and-paste mine (with the K2 bits stripped out for clarity):

<?php 

// De-clutter wp-head

// Really Simple Discovery
remove_action('wp_head', 'rsd_link');
// Windows Live Writer
remove_action('wp_head', 'wlwmanifest_link');
// Quoter plugin
remove_action('wp_head', 'quoter_head');
// wp-forecast plugin
remove_action('wp_head', 'wp_forecast_css');
// K2 custom header
remove_action('wp_head', array('K2Header', 'output_header_css'));

?>

The real advantage here is avoiding the need to hack any plugins or core WordPress files (an upgrader's nightmare). Let's go through the removal actions in sequence.

Really Simple Discovery helps client software discover things about your blog. If you don't use a client and manage your posts directly in WordPress, you don't need to offer such help. The PHP script:

remove_action('wp_head', 'rsd_link');

will remove a line from your head that looks something like this:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.bioneural.net/xmlrpc.php?rsd" />

Windows Live Writer is one such desktop blogging client, but supporting it needs yet another line in your head. The script:

remove_action('wp_head', 'wlwmanifest_link');

will remove a line from your head that looks something like this:

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.bioneural.net/wp-includes/wlwmanifest.xml" />

The Quoter plugin defaults to inserting comments, JavaScript, and CSS into your head:

<!-- Added by Quoter plugin v1.1 -->
<script type="text/javascript" src="http://www.bioneural.net/wp-content/plugins/quoter/quoter.php?js=1"></script>
<style type="text/css" media="screen">
.commentlist blockquote cite { /* Fix for Kubrik theme */
	display: inline;
}
</style>

You don't need that inline CSS if you're not using Kubrik, and can remove it with this script in functions.php:

remove_action('wp_head', 'quoter_head');

You can then restore functionality with a much tidier JavaScript call in an appropriate place (moving any custom CSS to your CSS file):

<script type="text/javascript" src="http://www.bioneural.net/wp-content/plugins/quoter/quoter.php?js=1"></script>

The wp-forecast plugin insists on inline CSS too. The script:

remove_action('wp_head', 'wp_forecast_css');

will remove a line from your head that looks something like this (again, any CSS goes in your CSS file):

<link rel="stylesheet" href="http://www.bioneural.net/wp-content/plugins/wp-forecast/wp-forecast.css" type="text/css" media="screen" />

The K2 theme inserts some particularly messy inline CSS:

		<style type="text/css">
										#header h1 a, #header .description {
				color: #ffffff;
			}
							</style>

We can ditch this if not using custom K2 headers as follows:

remove_action('wp_head', array('K2Header', 'output_header_css'));

Finding the right function that adds the action can involve a bit of trial-and-error. Searching plugin (or theme) code for a partial match to an unwanted string appearing in your head is a reasonable first option.

The plugin alternative

The Codex describes the functions file as being "like a plugin". This turns out to be quite literal; you could take the above functions and roll your own plugin (as suggested here). Create a file (head-cleaner.php say) containing the actions you want removing (your list may differ from mine), upload it to /wp-content/plugins/ and activate it in the usual way:

<?php

/*
Plugin Name: Head cleaner
Description: Removes unwanted clutter from the head.
*/

// Really Simple Discovery
remove_action('wp_head', 'rsd_link');
// Windows Live Writer
remove_action('wp_head', 'wlwmanifest_link');
// Quoter plugin
remove_action('wp_head', 'quoter_head');
// wp-forecast plugin
remove_action('wp_head', 'wp_forecast_css');
// K2 custom header
remove_action('wp_head', array('K2Header', 'output_header_css'));

?>

Other head-cleaning tips

Have a poke around in your theme's header.php file, and see if you can organise it a bit better.

I also found I could remove the following, found in the header.php of many themes, with no adverse effects:

<?php wp_get_archives('type=monthly&format=link'); ?>

This script produced a whole bunch of lines in the head having the following form:

<link rel='archives' title='January 2008' href='http://www.bioneural.net/2008/01/' />

Removing the lengthy relative links list for archives doesn't seem important except in theory:

The rel="archives" does not have any specific use that I am aware of. It is used to define other pages that are archives of the site in question. In other words, it's defining pages where the content on this page will be seen in the future.

Finally, some plugins may insert code that, while not necessarily disorderly, may not be just the way you like it. For example, Simple Tags can automatically insert keyword metadata into the head of each and every page. You might feel, however, that it's not sensible to associate metadata with a dynamic index page that temporarily contains tagged posts on a variety of topics. You could therefore make metadata insertion conditional, using Simple Tags manually as follows:

<?php if ( function_exists('st_meta_keywords') and is_single() ) { ?>
	<?php st_meta_keywords(); ?>
<?php } ?>

Alternatively, if you shun dependence on plugins you may want to use built-in WordPress functions, as detailed here:

<?php /* Get the meta keywords */ global $post;
if( is_single() || is_page() ) :
	$tags = get_the_tags($post->ID);
	if($tags) :
		foreach($tags as $tag) :
			$sep = (empty($keywords)) ? '' : ', ';
			$keywords .= $sep . $tag->name;
		endforeach;
?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php
	endif;
endif;
?>

It looks like a lot more code, but remember it will still produce just the one line meta element.

That's enough. Too much of this sort of thing cleanly clearly does my head in.

It's amazing how much detritus accumulates in your server directories and MySQL tables over the years. Add to the mix a propensity to hack core files to the point where you dare not upgrade your packages, and you have yourself a fine mess. I hope it wasn't too obvious, but bioneural.net had developed Diogenes syndrome. It was time for a clear-out and makeover. If you're thinking that sounds like work, it is. What follows is not riveting reading, but if you're contemplating doing the same, perusing what this involved for me might help you judge how many days to set aside—and maybe bug-fix your own migration.

Why upgrade?

There were multiple reasons why I felt a major overhaul was called for:

• My host (mt) told me I needed to upgrade from my (ss) product to the (gs) product that had superseded it, and that if I took no action I would "loose the benefit of choosing [my] own migration timeline";
• The (ss) product was stuck at MySQL 3.23.58 and PHP 4.4.1, whereas the (gs) upgrade offered MySQL 4.1.11 and PHP 4.4.7 or 5.2.2;
• Such upgrades would bring security fixes, as would upgrading Gallery from 2.1.2 to 2.2.4;
• WordPress 2.3.1 (current as of this writing) requires MySQL 4.0 or greater, so I was stuck on WordPress 2.0.11;
• I wanted to configure ecto 3 to work with WordPress's new integral tagging system (ecto 2 did work with UTW and some hacks to xmlrpc.php);
• I made a number of hacks to core WordPress files (xmlrpc.php, wp_rss2.php, etc.) which makes updating a pain—something I'll try to avoid in future;
• My WordPress theme was a heavily-hacked edition of K2 Beta Two r163 and I've been unable to benefit from the many releases since;
• More to the point, my customised theme was plain incompatible with WordPress 2.3.1;
• I'd also hacked a number of WordPress plugins and thus using old versions, so time to start over and once again resist hacking in the interests of smoother updating.

Preparation

In case of disaster I wanted to ensure I had full backups. I therefore:

1. Made screen captures of all my current WordPress options and settings;
2. Downloaded the entire contents of my server to a backup directory on my local drive (which took a very long time, largely I think due to Gallery);
3. Used a backup plugin to download core WordPress tables, core tables plus UTW tag tables, and all tables;
4. Created a backup of my Mint settings and data;
5. Used phpMyAdmin to backup my Gallery albums etc. (not the images, but I downloaded those as above);

From (ss) to (gs)

The (mt) migration tool completed in around 12 hours or so, and seemed to go (ok).

After adjusting my FTP login I uploaded an info.php file which confirmed I was now using MySQL 4.1.11 and PHP 4.4.7 5.2.2 (after switching the default version in the control panel):

<?php phpinfo(); ?>

Although bioneural.net was there, tekoru.net wasn't. Prior to the upgrade tekoru.net was a sub-domain that pointed to ../category/project-koru/. To fix this I first had to re-create the alternate domain in the (mt) Account Center. Unfortunately visiting tekoru.net then showed

Forbidden

You don't have permission to access / on this server.

The reason? The new domain directory /domains/tekoru.net/html/ was empty. This could be fixed by adding an index.html file (with appropriate content) or, alternatively, using .htaccess to redirect visitors elsewhere. Thus I simply had to move the pre-existing redirect rule from my .htaccess file in /domains/bioneural.net/html/ to a new file in /domains/tekoru.net/html/ to restore normality:

## Redirect tekoru.net to www.bioneural.net/category/project-koru/
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?tekoru\.net$ [NC]
RewriteRule ^(.*)$ http://www.bioneural.net/category/project-koru/$1 [R=301,L]

Upgrading WordPress

I had reason to be concerned this wouldn't go well, since I had tried and failed to import an export of my WP database into the new WordPress running in a MAMP environment (ending up with a blank page when trying to update the database). The live upgrade from 2.0.11 to 2.3.1, however, went almost flawlessly:

1. Deactivate all installed plugins;
2. Overwrite all WP files except for wp-content (which requires more care);
3. Run /wp-admin/upgrade.php;
4. Apply a fix to wp_settings.php to resolve a database error related to WP-Cache;
5. Install and activate Full Text Feeds to compensate for a daft decision on the part of the WP development team;
6. Download up-to-date versions of some of my WordPress plugins, activating them one-by-one to test for compatibility;
7. Removed comments.php from the default theme (I've found that doing so, in conjunction with other methods, significantly reduces spam);
8. Import UTW tags (Manage > Import > Ultimate Tag Warrior) into the new native tagging structure (they now populate the new wp_terms, wp_term_relationships, and wp_term_taxonomy tables).

Cleaning out old WP tables

Using phpMyAdmin I dropped various disused or redundant WP tables. Most had been created by deleted plugins e.g. wp_tags as used by UTW, making my table list over twice as long as the default (shown):

Mint

The transition from (ss) to (gs) had no adverse effect on Mint; as with WordPress to migration tool automatically changed the database name. However, I wanted to move the Mint tables into their own database.

1. Drop backup and old Mint tables from the WordPress database in phpMyAdmin;
2. Export current Mint tables (prefixed with mint_) to file;
3. Create new database for Mint;
4. Import the file containing Mint tables;
5. Update /mint/config/dp.php with the name of the new database;
6. Tell mint about the change with /mint/?moved;
7. Delete the Mint tables from the WordPress database.

Gallery

The transition from (ss) to (gs) broke my Gallery 2.1.2 installation. Before I could upgrade to the current 2.2.4 version I had to get the old one working again, in order to run the Gallery Upgrader.

I edited gallery2/config.php to change the name of the database and also the location of the data directory. Gallery came online again, but the Upgrader often returned me to step one, and I could not get past the system checks at step two. I was seeing the following error:

Error: Some files and or directories in your storage directory are not writeable by the webserver user. Run chown -R webserverUser /domains/bioneural.net/html/gallery2/g2data/ OR run chmod -R 777 /domains/bioneural.net/html/gallery2/g2data/.

I tried chmod 777 to g2data via SSH in Terminal:

chmod -R 777 /home/32398/domains/bioneural.net/html/gallery2/g2data

But still no joy. Attempting cache maintenance (/gallery2/lib/support/index.php?cache) gave a shed-load of errors similar to this (contracted):

Warning: mkdir(/domains) [function.mkdir]: Read-only file system in .../gallery2/modules/core/classes/GalleryPlatform.class on line 624

Warning: rename(.../gallery2/g2data/cache/module/archiveupload/0/0/0.inc) [function.rename]: No such file or directory in .../gallery2/modules/core/classes/GalleryPlatform.class on line 487

Scanning the Gallery Forums wasn't much help, although as suggested here, I tried a test.php with the line:

<?php if (is_writable('/domains/bioneural.net/html/gallery2/g2data')) { print "yay"; } else { print "boo"; } ?>

I got "boo". It was (mt) Tech Support who came to the rescue. For (ss) Gallery's config.php read:

$gallery->setConfig('data.gallery.base', '/var/www/html/gallery2/g2data/');

For (gs) I had changed this to:

$gallery->setConfig('data.gallery.base', '/domains/bioneural.net/html/gallery2/g2data/');

But, as (mt) pointed out, it should be:

$gallery->setConfig('data.gallery.base', '/home/32398/domains/bioneural.net/html/gallery2/g2data/');

Gallery was back up! Thus I was able to get a "yay" out of test.php:

<?php if (is_writable('/home/32398/domains/bioneural.net/html/gallery2/g2data')) { print "yay"; } else { print "boo"; } ?>

With the old version working, I then upgraded by uploading the new files. Once again transferring the multitudinous Gallery files by FTP is a lengthy process. Once again the Upgrader kept returning me to the beginning step of the upgrade process for no apparent reason. It was very frustrating, but eventually I managed to click through to the last step and complete the process:

ecto

Configuring ecto 3 to work with the new WP integral tagging system is not difficult. Just set it up as below:

Unfortunately it doesn't seem to play perfect; I'm noticing some odd "tags" are being downloaded—not tags at all but image file names, for example. Hmm...

Regaining the bioneural.net look-and-feel

I just love BBEdit's Compare two front documents option (in the Search menu). By opening the corresponding files from both the latest version of K2 and from my theme and running this crosscheck I could see where my edits and other codes changes occurred. The majority of discrepancies were in 4 files:

• header.php
• sidebar.php
• theloop.php
• style.css

I haven't finished rebuilding my customisation of K2 as I write this. Actually I began developing my own theme from scratch but have put this on hold, figuring that my site would be down for less time if I simply re-hacked K2 to incorporate my modifications.

Miscellaneous issues

• Restored various scripts e.g. iBox;
• Restored SimplePie, updated syntax on my Links page (with help from (mt) here too, since I created the cache directory in the wrong place);
• Edited Quoter plugin (as here) to stop pre-quotation of earlier comments in the comment-textarea;
• Disabled wp-forecast as cause of errors in K2's Ajax-powered live search, live commenting, and rolling archives;
• Edited Gallery slideshow template (as instructed here) to alter defaults for description, time interval, and image size (example). NB fix for RSS feeds using Siriux theme is no longer necessary;
• Dropped Subscribe to Comments plugin as my subscriber database was being subjected to attack (also a source of bounced e-mails);
• Dropped the Prototype JavaScript framework (and the dependent effects scripts of script.aculo.us and Reflection.js), migrating to jQuery (as per K2 and WordPress itself);
• To overcome the loss of Ajax-mediated K2 functions with the wp-forecast plugin active, rename wp-forecast/functions.php to wp-forecast/funclib.php and within that file and within wp-forecast-admin.php change require_once(”functions.php”); to require_once(”funclib.php”);.

What did I learn? I may not have any more patients, but I do have more patience than I thought.

According to Mint, most of my blog visitors are American. To reflect this I decided to change my default Amazon Associates links from the UK to the US. In the process I got confused over the link syntax I should be using, but now have this sorted. For managing links to specific items on my site (automatically tagged with my Associates ID) I use Amazon Media Manager. AMM is a WordPress plugin that will randomly show a specified number of product links, categories of which can be matched to categories on your blog. AMM development is not active, however, it is easy to hack the plugin to use the more recent link syntax.

Which link to the Amazon homepage?

My links to the UK store (as indicated by the -21 in my Associates ID) looked like this:

http://www.amazon.co.uk/exec/obidos/redirect-home?tag=bioneuralblog-21&site=amazon

Unfortunately you can't use the same Associates ID for each store; it is necessary to apply for an Associates ID for each program individually. Your referral fees thus cannot be combined. In my first e-mail from Amazon US I was advised that this was my unique Amazon.com homepage linking format:

http://www.amazon.com?%5Fencoding=UTF8&tag=bioneuralnet-20

Soon after I received a second e-mail confirming my application had been approved, saying that this was my unique Amazon.com homepage linking format:

http://www.amazon.com/exec/obidos/redirect-home/bioneuralnet-20

I contacted Customer Support and was advised to use the following syntax:

http://www.amazon.com/?tag=bioneuralnet-20

Hence my confusion. Some more prodding and Customer Service explained:

All of the links track to your account. Some formats are not compatible with some web building programs, so we supply a variety of linking options... the [last] link is the newest format.

Syntax for linking to specific items

It's a similar story with links to a specific Amazon.com item. For example, the AMM v1.5 plugin generates links using this syntax:

http://www.amazon.com/exec/obidos/ASIN/0192627058/bioneuralnet-20

However, Amazon.com advised me to use the following newer syntax to link directly to an item's detail page (although they prefer use of the Build Links tools):

http://www.amazon.com/dp/ASIN/ref=nosim/?tag=your_Associates_ID

In this case:

• Replace ASIN with the 10-digit ASIN/ISBN of the product;
• The text "ref=nosim" is what allows your visitor to be taken directly to an item's detail page when the link is used;
• Replace "your_Associates_ID" with your Associates ID.

As for the syntax AMM uses although it still works, it isn't preferred:

The API plug-in you are using, is an older link format. This format is still tracked, but instead of building more links with the old format, the new format, which goes directly to the new servers, should be used.

We don't "retire" old linking formats, since it would be a burden to our many Associates to have to replace old formats with new.

Fair enough. So I decided to automatically convert all my links into the new format in one fell swoop. After-all, isn't this why I'm using an Amazon Media Manager, rather than doing it all by hand?

Hacking the AMM WordPress plugin

It's easy to update AMM to use the more recent link syntax. There is one line in two files to change (in version 1.5 of the plugin). The first is line 294 in amm.php. Change this:

return 'http://www.amazon' . $ext . '/exec/obidos/ASIN/' . $asin;

To this:

return 'http://www.amazon' . $ext . '/dp/' . $asin . '/ref=nosim/';

The second is line 362 in amm/amm_output.php. Change this:

return 'http://www.amazon' . $ext . '/exec/obidos/ASIN/' . $this->currentItem['amm_asin'] . '/' . $this->affiliate . '/';

To this:

return 'http://www.amazon' . $ext . '/dp/' . $this->currentItem['amm_asin'] . '/ref=nosim/?tag=' . $this->affiliate;

Job done. Confusion cleared.

As previously noted, the currently available RSS module (1.0.6) is incompatible with the Siriux theme for Gallery (2.1.2). I wanted to be able to offer a feed (photocast) for an album in my own gallery, but finding a hack for the code was only half of the problem. For some reason defining a feed in Gallery is very non-intuitive. Here's how it's done, step-by-step.

There are perfectly valid reasons why you might want to offer a web (RSS) feed for a dynamic album on your website. In our case, as we explore and photograph Wellington ourselves, those with an interest in Project Koru can visually explore with us via a photocast/ photostream. If they subscribe to the photo feed, they go where we go.

Hack the RSS module

To improve compatibility with the Siriux theme, you need to edit Callbacks.inc, located in /gallery2/modules/rss/. As described here, make the following PHP edit:

if (isset($blocks)) {
	foreach ($blocks as $block) {
		if ($block[0] == 'rss.RssBlock') {
		$params = $block[1];
		break;
		}
	}
}

Define a feed

Using the instructions I found here as a basis, with a bit of trial-and-error, the following steps proved successful. This assumes you have the RSS module installed and activated, and that the Item actions block is already set to display on album pages. First you need to add the RSS Feeds block:

• Login to your Gallery as administrator;
• Edit the Album for which you want to display a feed;
• Add the List of RSS Feeds block to show on album (and/or photo) pages and Save.

Now go to Site Admin to set up the allowed feed types:

• From the main menu, under Export choose RSS;
• Uncheck Allow Simple RSS Feed to be used and check Allow configurable RSS feeds to be used;
• Also check Allow RSS feeds of photos inside an album then Save Settings.

Go back to the album for which you want to generate a feed:

• From the album actions drop-down menu, choose Configure RSS Feeds;
• Add a new feed, giving it a name and description;
• For Type of feed, choose Items in this album;
• Set other feed options to suit and save.

If successful, each page in your album should offer a clickable link to your new feed, together with a link to all feeds (if there are more) available via your Gallery installation:

Update 30.12.07: The above edit is not necessary for Siriux version 1.1.3 as included with Gallery 2.2.4.

Shorty is free link aliasing utility like TinyURL except it resides on your own server (requires PHP and MySQL). An alternative to writing redirect rules in your .htaccess file.

Having settled on SimplePie as a solution for embedding iStockPhoto feeds, I decided to see if I could use it to parse the latest posts from multiple sites in my OPML file (blogroll if you prefer). Would it really be as simple to cook as it sounded? There were qualifiers, however. I wanted to show only a selection of headlines at any one time. I wanted to vary the order in which the sites were listed. And I wanted to automatically fetch and display the favicon for each site. Armed only with copy-and-paste level PHP know-how, I was going to need help in the kitchen—that much was clear at the outset.

Update 18.08.06: Ryan has added error handling for feeds which specify no author; this eliminates most of the fatal errors I was getting with some feeds. If a particular feed doesn't work for you there are several things to try: Is it specified in the page (required for auto-discovery) or must you specify the full feed URL cf. the domain name? Is the feed valid? If a site offers RSS and Atom feeds (WordPress sites do by default) try varying the feed format. Also, specifying the actual feed path rather than relying on auto-discovery should reduce display time. Many thanks Ryan!

Link lists

Lists of links to other sites are just plain boring. But they can be functional, potentially serving a number of purposes:

• Bookmarks that the siteowner uses to track sites of personal interest;
• Serving readers by linking to sites with related news or resources;
• Reciprocal link exchange (with the aim of increasing one's PageRank/ Google listing);
• Giving credit (e.g. services or software used in site construction);
• Social bookmarking (e.g. my del.icio.us);
• Content for a sideblog or asides using RSS syndication.

WordPress includes a links manager, which has the option to tag links with XFN metadata using the "rel" link attribute. Such link relationships may involve self-identification/ site ownership, friendship type, a record of physical meetings (!), professional associations, geographic location, family or romantic ties. XFN is a tool for social networking much as Del.icio.us and Digg are tools for social bookmarking. Personally, I think this is taking link lists a bit far (and I like to be organized!).

Link lists can still be more functional than mere lists, even without tagging them with such metadata. Why list a site by name day-after-day? It doesn't change, yet the content of the site does. Sometimes, so does the author. And how do you know when it last had new content? But what is function without form, right? We also want our link lists to be aesthetically pleasing (OK, pretty).

So the aim here is to improve on the basic link list: to make it both more functional and more attractive.

Prepare your ingredients

We don't need much actually:

• An installation and activation of the SimplePie WordPress plugin (but you don't need WordPress or if you do have WordPress, you don't need to install the plugin if you follow these instructions);
• A WordPress page template for the K2 theme (this is how I chose to implement it; again you don't need WordPress, and if you do have it but don't use K2 you can create your own page template);
• An OPML file from which to extract the links (easy to export from NetNewsWire);
• Some generic PHP code to shuffle and pick from a list. I found a snippet I thought would do at Scriptygoddess;
• A Guru. I am indebted to Ryan Parman, one of the two SimplePie developers, for his patience and much-appreciated assistance via the SimplePie Support Forum.

Every pie needs a good base

I didn't even realize WordPress page templates existed until I read Kristin's post. There are two steps: first we create a template, then we create a new WordPress page and tell it to use the template we just created.

Here's a skeletal page template that you can adapt (or not) for your own use:

<?php
/*
    Template Name: Baking
*/
?>

<div class="content">

    <div class="primary">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div class="item">

                <div class="pagetitle">
                    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title='Permanent Link to "<?php the_title(); ?>"'><?php the_title(); ?></a></h2>
                </div>

                <div class="itemtext">

                </div><!-- Close itemtext -->

            </div><!-- Close item -->

        <?php endwhile; endif; ?>

    </div><!-- Close primary -->

    <?php get_sidebar(); ?>

</div><!-- Close content -->

<?php get_footer(); ?>

Save this as baking.php and upload to your WordPress themes folder.

In WordPress Admin, choose Manage > Pages > Create New Page... Give the page a title but leave the content area blank and choose "Baking" from the Page Template: control:

Save the new page and you're good to go. There's nothing on this page yet of course; we'll address that shortly. Let's first consider two other elements we want to build into the page: randomness and favicons.

Mix well before baking

Here is the Scriptygoddess random blogs list script:

<?
$array = file("/path/to/your/file/bloglinks.php");
shuffle($array);
for ($i=0; $i<10; $i++) {
echo $array[$i];
}
?>

First the code loads the links (from an external file) into an array, then it shuffles them, selecting 10 (in this case) to output to the screen. Sounds good; we'll see it adapted below.

Favicon topping

I'm a big fan of favicons. They're easy to make and I've used them in my blog in conjunction with "blockquote" since my CSS reboot in 2004. For example:

Instant recognition. A 16x16 pixel image is a valuable visual aid to source attribution and can confer authority on the cited wisdom. The markup is extremely simple:

<blockquote>
<img src="http://9rules.com/favicon.ico" alt="favicon" width="16" height="16" />
blah blah blah...
</blockquote>

I use CSS to have the favicon display as a fixed-size block element so it sits on a line of its own. Other folk use favicons in lists, presumably for partly decorative and partly navigational reasons. Here are some examples:

• 9rules.com Communities;
• Kristin Pishdadi's Low End Theory;
• Ben Gray's Open Switch.

A 9rules.com favicon pick-list

Ben tells me he maintains his link list manually, and pointed me towards Kristin's inspirational how-to post. But I'd prefer to automate favicon-finding if possible.

There is WP plugin, Favatars, that does automatically gather and cache favicons. Caching is probably necessary since, as Ben also pointed out, page load times would otherwise increase (and storing permanent local copies might not reflect the favicon in use at the site). Unfortunately the plugin only works inside the WordPress "comment loop". There's an alternative PHP script that tries to guess the favicon URL here, but my skills were not up to repurposing this either.

However, we can (in most cases) display a favicon much more simply using SimplePie and a neat PHP concatenation trick—the tying together of multiple strings into a single string. You'll see this in the code below; it was a bugger of a job to get all the punctuation right—and you can stop smirking if you've been coding PHP for years—this was all new to me!

It wouldn't be pie without filling

We have our base, the mixer is on stand-by, and we've decided how to prepare the topping. On to the filling...

The best way to present this is to see the finished page. It went through several earlier iterations, but this version has been re-worked by Ryan so that the code is more efficient (not so much jumping in-and-out of PHP blocks) and so that it loads only one feed into memory at a time (apparently PHP is readily exhausted). The page is commented so your can hopefully follow what's going on, and I've left in some of the lines that you will need to uncomment (and edit) if you are not using the WordPress plugin:

<?php
/*
    Template Name: Baking v4
*/

// Require simplepie.inc not necessary as already called via WP plugin
// require($_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/simplepie.inc'); 

// Set cache folder to non-default location as used by WP plugin
$cache = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/cache';

// Create array with any number of site URLs; SimplePie will auto-detect feed location
$myfeeds = array();

$myfeeds[] = "http://www.siteone.com";
$myfeeds[] = "http://www.sitetwo.com";
$myfeeds[] = "http://www.sitethree.com";

shuffle($myfeeds); // Randomize order of the feeds in array

// Manually setting content type and character encoding not required as set via WP get_header function
// header("Content-type: text/html; charset=utf-8");
get_header();
?>

<div class="content">

    <div class="primary">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div class="item">

                <div class="pagetitle">
                    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title='Permanent Link to "<?php the_title(); ?>"'><?php the_title(); ?></a></h2>
                </div>

                <div class="itemtext">
                    <h4>Recent posts elsewhere</h4>

                <?php
                for ($i=0; $i<10; $i++) { // Where 10 = number of posts to show
                    $feed = new SimplePie($myfeeds[$i], $cache);

                    if ($feed->data) {
                        echo '<div class="sploop">';

                        $max = $feed->get_item_quantity(1); // Show only 1 post, the most recent
                        for ($x = 0; $x < $max; $x++) {
                            $item = $feed->get_item($x);
                            $author = $item->get_author(0);

                            echo '<span class="spfavicon"><a href="' . $feed->get_feed_link() . '">' . '<img src="' . $feed->get_feed_link() . '/favicon.ico" alt="X" width="16" height="16" />'. '</a></span>';
                            echo '<span class="sptitle"><a rel="external" href="' . $item->get_permalink() . '">' . $item->get_title() . '</a></span>';
                            echo '<span class="spauthor">&mdash;By ' . $author->get_name() . '</span>';
                            echo '<span class="spdate"> on ' . $item->get_date('j M Y') . '</span>';
                        }

                        echo '</div>'; // Close sploop
                    }

                    unset($feed);
                }
                ?>

                </div><!-- Close itemtext -->

            </div><!-- Close item -->

        <?php endwhile; endif; ?>

    </div><!-- Close primary -->

    <?php get_sidebar(); ?>

</div><!-- Close content -->

<?php get_footer(); ?>

Making it pretty

I initially wanted to add some fancy styling (hence the classes in the markup). But then sometimes less is more. I decided not to add any CSS other than a rule for positioning the favicon:

.spfavicon img {
	display: inline;
	position: relative;
	bottom: -4px;
	border: 0;
	}

Any more images and it would look to crowded. Perhaps you don't like white space? Feel free to make some CSS suggestions!

I ended up with a link list with visual attribution and exposure of the latest content, the author, and the date the site's content was last refreshed. And lots of lovely white space:

The "live" version is here.

Caveats

• Not all sites work. I don't know why—perhaps a SimplePie bug? Several URLs in my array resulted in a fatal error. I commented them all out and uncommented them one-by-one to ID the troublemakers;
• Not all sites have a favicon at root directory level. As I mentioned I found some PHP that might help here, but didn't manage to make it work due to sheer incompetence;
• Favicons aren't cached, but caching (and automatic favicon-finding) is a SimplePie feature request.

Is there any desert?

The tweaking ain't over 'till the fat lady sings... and I ain't heard me no singing. If you want to show the feed title when hovering over the favicon, make this edit:

echo '<span class="spfavicon" title="' . $feed->get_feed_title() . '" ><a href="' . $feed->get_feed_link() . '">' . '<img src="' . $feed->get_feed_link() . '/favicon.ico" alt="X" width="16" height="16" />'. '</a></span>';

If you want to show the item description when hovering over the post title, make this edit:

echo '<span class="sptitle"><a rel="external" title="' . strip_tags($item->get_description()) . '" href="' . $item->get_permalink() . '">' . $item->get_title() . '</a></span>';

Firefox already displays an excerpt only:

Ugly missing favicons in Firefox? Safari isn't a problem as when it can't load an image you'll see this "missing image" icon:

However, Firefox renders the alt text (here "X"; "favicon" is even worse!):

We can however create a favicon-like "alt" text (still valid XHTML, although it will displease the accessibility camp) and style it so that it is inline with the existing favicons:

echo '<span class="spfavicon" title="' . $feed->get_feed_title() . '"><a href="' . $feed->get_feed_link() . '">' . '<img src="' . $feed->get_feed_link() . '/favicon.ico" alt="&curren;" style="font-size: 24px; padding-right: 6px;" width="16" height="16" />'. '</a></span>';

You'll now see this (the CSS causes the image and the alt text to be a similar size and vertically aligned):

Not perfect—but to my eye at least a whole lot better!

For your convenience, here is a SimplePie with favicon topping and the above extra ingredients that I prepared earlier. Bake in warm oven until you see a golden crust (.zip file, 4 KB)

Update 15.12.06: SimplePie 1.0 b3 introduced the get_favicon() function. You can use this to look for a favicon in the default location and, if not present, substitute a generic alternative—as per the following code:

echo '<span class="spfavicon" title="' . $feed->get_feed_title() . '"><a href="' . $feed->get_feed_link() . '">' . '<img src="' . $feed->get_favicon(true, 'http://www.bioneural.net/images/nofav.jpg') . '" alt="Favicon" style="font-size: 24px; padding-right: 6px;" width="16" height="16" />'. '</a></span>';