Sidebars Class for Thesis

Adding new sidebars (widget areas) can sometimes be a bit of a pain with the Thesis theme, so this class not only adds the concept of sidebar sets, but also makes adding them require just two lines of code per set.

Set up

  1. Create a new folder inside the Thesis custom/ folder called classes
  2. Copy the following to a blank file and save it to custom/classes/GT_Sidebars.php:

View the code

Syntax Highlighting Shortcodes in WordPress

  1. Install Easy Google Syntax Highlighter plugin.
  2. The actual highlighting library this plugin uses requires all sorts of markup and specially formatted classes to be used. It used to allow nice shortcodes, like [php], which you can re-enable. Add the following to your theme’s functions file:
// Stops WordPress from mangling our code.
// Be aware, you'll now need to explicitly include <p>...</p> tags for non-code text,
// which is why you won't see much of it here if I can help it :-)
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
remove_filter('the_content', 'convert_chars');
remove_filter('the_content', 'convert_smilies');
remove_filter('the_excerpt', 'wpautop');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('the_excerpt', 'convert_chars');
remove_filter('the_excerpt', 'convert_smilies');

function php_shortcode_function($attr, $content = null) {
  return get_code_output('php', $attr, $content);
}
add_shortcode('php', 'php_shortcode_function');

function js_shortcode_function($attr, $content = null) {
  return get_code_output('js', $attr, $content);
}
add_shortcode('js', 'js_shortcode_function');

function html_shortcode_function($attr, $content = null) {
  return get_code_output('html', $attr, $content);
}
add_shortcode('html', 'html_shortcode_function');

function css_shortcode_function($attr, $content = null) {
  return get_code_output('css', $attr, $content);
}
add_shortcode('css', 'css_shortcode_function');

function get_code_output($brush, $attr, $content) {

  extract( shortcode_atts( array(
      'autolinks' =&gt; 'true',
      'classname' =&gt; '',
      'collapse' =&gt; false,
      'firstline' =&gt; 1,
      'gutter' =&gt; 'true',
      'highlight' =&gt; '',
      'htmlscript' =&gt; false,
      'light' =&gt; false,
      'smart-tabs' =&gt; 'true',
      'tabsize' =&gt; 4,
      'toolbar' =&gt; 'true',
      'wraplines' =&gt; 'true'
      ), $attr ) );

  $output = '<pre>' . str_replace('&lt;&#039;, &#039;&lt;&#039;, do_shortcode($content)) . &#039;</pre>';

  return $output;
}

Now you can use the [php] shortcode and add your full code (no need to escape those < characters). Same goes for for the other shortcodes added ([plain], [html], [js], [css] etc). The shortcodes also support attributes (like highlighting of a line) as per the Syntax Highlighter Parameters.

The above code will be edited as I edit the underlying code for this site to allow for all of the Syntax Highlighter parameters. This is all very meta…

Get Shutter Reloaded and Twivatar Working Together

I use Shutter Reloaded as my Lightbox-esque WordPress plugin of choice for enlarging images. To work though, it requires a link to an image. The very useful Twivatar application for pulling live Twitter avatars however, uses a non-image link. Here’s how I got them to work together.

Read on to find out this very simple solution

Custom Gallery Shortcode Plugin

As I’ve been working recently on fixing all of the broken image galleries on Leovanna I came across a situation in which the built-in [gallery] shortcode was not sufficient.

The Problem

To highlight the problem, it’s worth seeing what the final result looks like, and work backwards. The page on Keira looks simple enough – a couple of larger pics at the top, with a gallery of thumbnails underneath. WordPress users won’t see anything unusual here except that the gallery does not contain the two larger images in its collection of thumbnails!

What I needed, was some way of using the [gallery] shortcode, but being able to exclude certain images. Step up Michael Fields and his Custom Gallery Shortcode WordPress plugin (which he’s now deprecated as WP natively provides most of the same functionality).

[Read more...]

Even Simpler Pluralization with jQuery

Davide recently posted an article entitled Simple pluralization with jQuery.

Now while the whole premise is fairly easy to grasp (changing the pluralisation of words depending on user input), and his code works, separating the function from the event handler, I just thought that those who are a bit more confident with jQuery or JavaScript in general would find it a bit cumbersome to do a very simple job.

Here’s what I would do:

<label for="interval">Time since you last birthday:</label>
<input id="interval" name="interval" size="2" value="" />
<span id="interval-desc">days</span>

Nothing tricky there – a label, input and span element.

jQuery(function($) {
    $("#interval").blur(function() {
        $("#interval-desc").text(($(this).val() == 1) ? "day" : "days");
    });
});

Obviously you need to make sure to include the jQuery library. When the DOM has loaded and is ready to be manipulated, then we want the check to happen when the focus has left the input field (blur).

Davide has his code doing the check on the keypress, but I dislike this for several reason. Firstly, this calls the check on all keypresses, when actually after the first keypress, we would already know whether the contents were just a 1 or not. Secondly, entering a number like 12, would mean the display changes from days to day, then back again. This maybe distracting to the user, and as the actual description shown is not critical to future inputs, there’s no reason to change it until the user has finished entering their numbers.

The actual check is relatively simple, but looks confusing due to using the JavaScript tertiary operator, instead of If…Else code block that you may be more familiar too. It simply sets the text value of the element with ID interval-desc to either day, or days, depending if the value of input box is 1 or not.

Demo page

All this is not to say Davide’s version is wrong – indeed, in more complicated scripts, unhooking the functionality away from the HTML elements and the event handler is definitely a good thing. In this case though, the above is succinct enough that having to repeat it on another page is not going to be the end of the world.