• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Marketing Strategy Facilitators & Mailchimp Pro Partners

  • Home
  • Marketing Strategy & Planning
  • Mailchimp Services
    • Service Catalogue
    • Mailchimp Improvement Audit
    • Shopify & WooCommerce Marketing
    • Mailchimp Online Courses (on Udemy)
    • Mailchimp Live Classes
    • Mailchimp Corporate/Team Training
    • Consulting
  • Free Tools
    • 5 day Mailchimp marketing boost
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
You are here: Home / WordPress / How to use lettering.js in WordPress

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!

Found this useful? Please share:

Filed Under: WordPress

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Leave a Reply Cancel reply

Primary Sidebar

Ready? Boost your marketing …

Get Started

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Mailchimp Video Tutorials

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer ratings

Mailchimp pro partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2021 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service