How to use lettering.js in WordPress

I had a need on a WordPress website to style the fifth letter of a specific word. In CSS there is no pseudo selector or otherwise that allows us to do this. We have, in CSS, pseudo-classes such as :nth-child but this doesn’t allow for targeting a specific letter in a word. There are also various native jQuery means of achieving the outcome but I just couldn’t get any to work. I then came across lettering.js which does exactly what we want.

What is lettering.js?

The lettering.js jQuery plugin, whilst lightweight and simple to use, opens all sorts of opportunities for using CSS to style specific words or letters. Lettering.js adds child classes under the class you select. This means that we’re then able to style the individual child classes with CSS.
As an example, if we have a class called organicweb_lettering with the following HTML

Make the third letter of
<span class="organicweb_lettering">
this
</span>
 word red in colour 

and use lettering.js to inject child classes then we will get HTML output like

Make the third letter of
<span class="organicweb_lettering">
<span class="char1">t</span>
<span class="char2">h</span>
<span class="char3">i</span>
<span class="char4">s</span>
</span> word red in colour

We’ll then simply add the following CSS to colour the third letter red

.organicweb_lettering .char3 {
color: #F00 ;
}

How to use lettering.js in WordPress

Fortunately using lettering.js in WordPress is simple. Just two steps are involved:

Load lettering.js in WordPress

First we need to add the following to functions.php:

// Register Script
function ge_custom_scripts() {
// From: http://wp.me/pxhFk-4UE
	wp_deregister_script( 'lettering_js' );
	wp_register_script( 'lettering_js', '//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js', array( 'jquery' ), '0.6.1', false );
	wp_enqueue_script( 'lettering_js' );

}

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'ge_custom_scripts' );

Note that version 0.6.1 was the latest version at writing. Also, loading from a CDN isn’t WordPress best practice but you be the judge 😉

Instruct lettering.js where to be used

In the step above lettering.js will be loaded. We now need to tell lettering.js where to weave its magic. To do this we add the following script to the header or footer of your WordPress website (footer is probably better for webpage load speed reasons).

<script language="javascript">
jQuery(document).ready(function ($) {
    $(".your_class").lettering('');
});
</script>

In the above change your_class to the class which you’d like sub-classes injected for each letter. As an example, for the WooThemes Canvas Theme, the following is the script added to inject classes per character in the title:

<script language="javascript">
jQuery(document).ready(function ($) {
    $("#logo .site-title").lettering('');
});
</script>

How to style individual letters in WordPress

Now all we need do is use CSS to style the letter or letters as required. Using the Canvas theme site-title example, we’d add the following CSS to colour the fourth letter of the site-title red and increase the size of that letter:

#logo .site-title .char4 {
color: #F00 ;
font-size: 150% ;
} 

Now that we’re able to style individual letters we can also start to use animations on letters. Nice!