Well hello guys 'n' girls! It's been a while since I last posted here hasn't it? There have been a lot of things I've wanted to write about but apathy, procrastination and downright laziness just kept on holding me back. I found myself completely lacking in motivation (for pretty much anything) over the past six weeks or so. I have no idea why the melancholy struck but it hit hard - and it kept me in it's vice-like grip.

Anyway, while I may not have had the inspiration to write, I have been fiddling a little with my CSS and the underlying WordPress installation that keeps this website online. This has resulted in three little tweaks that I'd like to draw your attention to.

WP-PageNavi

I have installed Lester 'GaMerZ' Chan's excellent page navigation plugin, WP-PageNavi. This plugin replaces WordPress' previous and next page links with a more intuitive and useful floating page number grid, similar to that which adorns the hallowed pages of Google's search results.

On this site, the grid enables the reader to quickly access the first and last pages of a set along with the two adjacent pages either side of the current one. It's much more useful than the default WordPress behaviour.

Truncated Link Titles

Still on the subject of page navigation, something that'd been bothering me for a while was the way that long next and previous page link titles resulted in a mangled button alignment under the current page design.

I'd chosen to display page titles for my next and previous page links rather than the generic "next" and "previous" as I think it benefits the reader if he/she knows what to expect on clicking the link.

Unfortunately my design for the relevant controls fell apart if the adjacent page titles were longer than 32 characters, as can be seen from the screen capture below.

What I wanted to do was to automatically truncate a title if its length exceeded 32 characters and append an ellipsis to the truncated title to indicate such to the reader.

Unfortunately I was unable to find an API hook in WordPress that would enable me to make this simple adjustment to its logic. So I had no choice but to hack the WordPress source itself.

I made a small change to the file link-template.php which is in the wp-includes directory. The modification begins at line 961 and looks like this before the change:

$title = apply_filters('the_title', $title, $post);
$date = mysql2date(get_option('date_format'), $post->post_date);

Replace the above code with the following to enable automatic truncation of titles:

$title = apply_filters('the_title', $title, $post);
$alt_title = $title;
$hack_length = strlen($title);
if ($hack_length > 32) {
$title = substr($title,0,32);
$title = $title . '…';
}
$date = mysql2date(get_option('date_format'), $post->post_date);

Then replace both instances of "32" to whatever character length suits your design.

This resulted in page links that look much better to me:

Notice the ellipsis indicating the truncated title! I think this is a much neater handling of the title-too-long edge case.

WARNING: If you make this change then please ensure that you take a backup of the link-template.php file before you do so. Also be aware that you will probably have to make this change after every subsequent WordPress update until such time as the WordPress crew provide an option or API to handle this.

Multi-column Text

In The Sorry State of Browser Rendering I bemoaned not being to easily present copy in a multi-column format (think newspapers). What I didn't realise was that, using the CSS 3 Multi-column layout module, I could! Furthermore, implementation is simple and degradation is graceful for none-supporting browsers. I've added some multi-column CSS to the Urban Mainframe's stylesheets so expect to see some 2 and even 3-column copy making an appearance on here (assuming you're using a supporting browser like Safari or Firefox).

2-column Example

.twoColumns { column-count: 2; column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px; }

3-column Example

.threeColumns { column-count: 3; column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; -moz-column-count: 3; -moz-column-gap: 20px; }