/** Register taxonomy for images */
function olab_register_taxonomy_for_images() {
    register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_action( 'init', 'olab_register_taxonomy_for_images' );

Now add the category field to the Media Library table. This will also add a filter to the table to allow search of
attachments by category. Super useful if you’ve got a bunch of files you need to categorize.

 /** Add a category filter to images */
function olab_add_image_category_filter() {
    $screen = get_current_screen();
    if ( 'upload' == $screen->id ) {
        $dropdown_options = array( 'show_option_all' => __( 'View all categories', 'olab' ), 'hide_empty' => false, 'hierarchical' => true, 'orderby' => 'name', );
        wp_dropdown_categories( $dropdown_options );
    }
}
add_action( 'restrict_manage_posts', 'olab_add_image_category_filter' );

Make sure to replace ‘olab’ with whatever prefix you’re using in your theme and/or plugin.

If you’re hard at work in terminal and want to quickly open a finder window to show the current directory you’re in just type:

$ open .

Quick and painless!

Then I started building a site in Drupal.

It’s hardly a secret that Drupal’s markup is really terrible. I have to control my urge to run back screaming to WordPress and never leave again! But such is life. Drupal sure has it strong points and nowadys I actually mostly enjoy working with it. Having said that 4,000 divs doesn’t always make working with the front end so easy, especially if we’re working with a CSS grid.

So, I wrote a tiny mixin for SASS/Compass that can will work out your grids for you when the markup is against you:

$columns: 16;
$gridWidth: 960px;
@mixin drupalCols($rows: 4, $padding: 0 10px) {
  width: ($gridWidth / $columns) * $rows;
  float: left;
  padding: $padding;
  @include box-sizing(border-box);
}

.my-div {
  @include drupalCols(8);
}

// This becomes:
/*
.my-div {
  width: 480px;
  float: left;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

// You can also add more or less padding like this:

.my-div {
  @include drupalCols(4, 10px 20px 30px);
}

/*
.my-div {
  width: 240px;
  float: left;
  padding: 10px 20px 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

This one has fixed pixel values because the project I wrote it for is not responsive and is based on a grid 960px wide divided into 16 sections (yes 16)!

Here’s one that is responsive based on 12 columns:

$columns: 12;
$gridWidth: 100%;
@mixin drupalCols($rows: 4, $padding: 0 10px) {
  width: ($gridWidth / $columns) * $rows;
  float: left;
  padding: $padding;
  @include box-sizing(border-box);
}

.my-div {
  @include drupalCols(4);
}

// This becomes:
/*
.my-div {
  width: 33.333%;
  float: left;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

For the responsive one to work (if you’ve got full control of your markup) then you could use this:

@mixin clearfix {
  &:after {
    content: " ";
    display: table;
    clear: both;
  }
}

$columns: 12;
@while $columns > 0 {
  .span-#{$columns} {
    width: percentage(0.083333 * $columns);
  }
  $columns: $columns - 1;
}

$gutter: 10px;
.row-container {
  margin: $gutter 0;
  @include clearfix;
  > div {
    border-right: $gutter solid transparent;
    border-left: $gutter solid transparent;
    float: left;
    @include clearfix;
    @include box-sizing(border-box);
  }
  &:first-child {
    border-left: none;
  }
  &:last-child {
    border-right: none;
  }
}

//This produces the following:
/*
.span-12 {
  width: 100.0%;
}

.span-11 {
  width: 91.666%;
}

.span-10 {
  width: 83.333%;
}

.span-9 {
  width: 75.0%;
}

.span-8 {
  width: 66.666%;
}

.span-7 {
  width: 58.333%;
}

.span-6 {
  width: 50.0%;
}

.span-5 {
  width: 41.667%;
}

.span-4 {
  width: 33.333%;
}

.span-3 {
  width: 25.0%;
}

.span-2 {
  width: 16.667%;
}

.span-1 {
  width: 8.333%;
}

.row-container {
  margin: 10px 0;
}
.row-container:after {
  content: " ";
  display: table;
  clear: both;
}
.row-container > div {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row-container > div:after {
  content: " ";
  display: table;
  clear: both;
}
.row-container:first-child {
  border-left: none;
}
.row-container:last-child {
  border-right: none;
}
*/

// Use it like this:
/*
<div>
  <div>
    ...content...
  </div>
  ...more columns
</div>
*/

If you’re wondering about support for

box-sizing: border-box;

be happily surprised: It’s supported by all major browsers, including IE8! I tend to use it liberally these days in all my projects.

Driving home this evening I was inspired to write my own CSS grid system. I HATE the idea of bloated CSS frameworks. I’ve never been able to bring myself to use one, despite the obvious advantages. I do, however love SASS and particularly Compass (wait, isn’t that a framework already..?!).

The solution is simple: write my own. I haven’t really started yet, but the basic setup took around 10 seconds using SASS and I just had to share it!

.row-container {
  width: 100%;
  > div {
    float: left;
  }
}

$columns: 12;

@while $columns > 0 {
  .span-#{$columns} {
    width: percentage((1 / 12) * $columns);
  }
  $columns: $columns - 1;
}

which magically becomes:

.row-container {
  width: 100%;
}

.row-container > div {
  float: left
}

.span-12 {
  width: 100%;
}

.span-11 {
  width: 91.667%;
}

.span-10 {
  width: 83.333%;
}

.span-9 {
  width: 75%;
}

.span-8 {
  width: 66.667%;
}

.span-7 {
  width: 58.333%;
}

.span-6 {
  width: 50%;
}

.span-5 {
  width: 41.667%;
}

.span-4 {
  width: 33.333%;
}

.span-3 {
  width: 25%;
}

.span-2 {
  width: 16.667%;
}

.span-1 {
  width: 8.333%;
}

With an HTML structure like:

<div class="row-container">
  <div class="span-4">
    <p>Stuff</p>
  </div>
  ...
</div>

Not bad for 10 seconds work! Let’s see how long it takes to build something (responsive) that can actually be used for production stuff. Fun, fun, fun :)

I’m looking for 30.000SEK / £3000 or thereabouts. Don’t hesitate to get in touch if you’re interested or if have any questions about the instrument.

I’m selling my guitar built by Ivo in 2006. Ivo is probably most well known for his guitars and this is a great instrument that has served me well in the opera pit and concert hall for many years!

Due to it’s life as a working instrument the guitar has a bit of wear-and-tear on the soundboard but is otherwise in good condition. Comes with a Kingham case (in good condition).

I’m looking for 22.500 SEK / £2200 for the instrument. Don’t hesitate to get in touch with any questions you might have.

ConcertPress is an events management plugin specifically designed for classical musicians. It’s largely inspired by the excellent GigPress which I used for a few years. GigPress is fab for most musos and the main difference between it and ConcertPress is the ability to add programmes and programme details.

ConcertPress can be downloaded via the WordPress plugin repository or via github.

My goal this time round was (as well as creating a responsive site) to not use any WordPress or JavaScript plugins. This time I wanted to build everything myself. I’m delighted to say that I managed it all except for the plugin I use for server-side caching, which is not my area of expertise. WP Super Cache is such an excellent solution and so very easy to implement, so I used that.

So, what did I do then?!

Well, I build the contact form on the contact page. The form uses JavaScript validation (my own) and is submitted via AJAX. I used Akismet for spam protection on the server-side and a honey-pot* as an extra anti-spam measure. Works great.

I also wrote my own comment form script (see below this post!), which again uses Akismet for spam checking and simple JavaScript validation. Comments are submitted via AJAX.

Speaking of AJAX… I also wrote a custom pagination solution for my blog in AJAX. I used the HTML5 history API to push changes in page to the URL so all pages will have proper, linkable URLs. I freely admit here that I used Benjamin Lupton’s History.js to sort out all the rough edges of different browser implementations of the API!

Also on the blog page I use a custom excerpt function that’s a bit more versatile than WordPress’ built in the_excerpt().

I also wrote my own script in jQuery to fetch my Instagram feed (check out the right-sidebar/below this post). Fetched results from the Instagram API are cached in localStorage (where available) for speedy subsequent page visits. For good measure I also wrote the lightbox script used to enlarge the images. The twitter feed is also written in jQuery and all scripts are loaded asynchronously so that page load is not blocked.

That’s about it! It’s a great feeling to have such control over the entire contents & markup of a website. I ♥ WordPress.

*An input field in the form that is hidden from visitors via CSS. As it’s hidden, user’s won’t fill it out, but if form fields are filled out automatically (ie by a spam bot), it will help to show up spam.

It turns out it wasn’t particularly difficult, but I couldn’t find any documentation about it online, so I figured I’d write this wee post, in the hope that it might come in useful for my fellow WordPressers!

My plugin code is written in OOP:

class MyCoolPlugin {
// All my methods + properties here
}
// Instantiate the class
$cool_plugin = new MyCoolPlugin();

The class contains a method to create the HTML that I want to use for both a shortcode and a widget.

class MyCoolPlugin {
  // Returns the HTML for a shortcode or widget
  function shortcode_widget() {
    return '<p>HTML rocks</p>';
  }
}
// Instantiate the class
$cool_plugin = new MyCoolPlugin();

Register my widget:

class CoolWidget extends WP_Widget {
  function CoolWidget() {
    // Instantiate the parent object
    parent::__construct( false, 'Cool Widget' );
  }
}

Then I can add the HTML from the shorcode_widget method of MyCoolClass like so:

class CoolWidget extends WP_Widget {
  function CoolWidget() {
    // Instantiate the parent object
    parent::__construct( false, 'Cool Widget' );
  }
  function widget($args, $instance) {
    // reuse my plugin's code
    global $cool_plugin;
    echo $cool_plugin->shortcode_widget();
  }
}

Nice. Saves me writing a bunch of code multiple times, which I guess is the main point of OOP!

I’ve got an HTML element with an ID of ‘niceText’ that I’m looking to grab. I’ll save the string as a variable called ‘niceText’.

var niceText = $('#niceText').text();

I’ll also save the opening and closing spans I’m going to wrap the text in as variables like so:

var openSpan = '<span class="grey">', closeSpan = '</span>';

Next, we’ll use the native JavaScript split method. This makes an array out of a string – all you have to do is to specify the separator that’ll be used to divide the string. In this case the separator is a blank space, so we can write:

niceText = niceText.split(' ');

Our variable ‘niceText’ is now an array of strings (go ahead and use your console to take a peek at what’s happened to our variable).

Next we’ll add the span to the start of the array using the unshift method. It you’ve ever used the push method, this is very similar except that it adds elements to the beginning of the array instead of to the end.

niceText.unshift( openSpan );

Fab. We now need to add the closing span to the array. We can do this with the splice method. If you’re not sure how this method works, do have a good read of the docs as it can come in super handy when performing array surgery!

As I want to wrap the first 2 words in my sentence, I’m going to add the closing span as the 4th item in the array. The first item is now my opening span, then comes the two opening words, then my closing span. The second value in splice indicates how many values, if any, to remove from the array. We’re not removing any, just adding, so this will be equal to 0.

niceText.splice( 3, 0, closeSpan );

Next I’ll turn the array back into a string using join. Like split, join accepts a value for the separator, only this time, the separator is what will be printed between every array item. As this is just a sentence, we want to add a space between the words, so we can write:

niceText = niceText.join(' ');

Finally I’ll add the string to my HTML element like so:

$('#niceText').html( niceText );

That’s it! Here’s the whole function.

jQuery( function($){

   /* Get the text of the element I'm after */
   var niceText = $('#niceText').text(),
      openSpan = '<span class="grey">', closeSpan = '</span>';

   /* Make the sentence into an array */
   niceText = niceText.split(' ');

   /* Add span to the beginning of the array */
   niceText.unshift( openSpan );

   /* Add  as the 4th value in the array */
   niceText.splice( 3, 0, closeSpan );					

   /* Turn it back into a string */
   niceText = niceText.join(' ');					

   /* Append the new HTML to the header */
   $('#niceText').html( niceText );

});

If you’re not already using jQuery in your site, it might be a bit much to add it for just this tiny function! Rather, you can simply replace

var niceText = $('#niceText').text();

with

var niceText = document.getElementById('niceText').textContent;

and

$('#niceText').html( niceText );

with

document.getElementById('niceText').innerHTML = niceText;

Grand stuff. Hope it comes in useful!