Thesis Tutorial: How to create Multi-Coloured Headlines

Welcome to the first instalment of the ‘Pimp my Thesis’ Tutorials.

‘Pimp my Thesis’ is a series of tutorials where you can get a free Thesis Modification! Go here for more details.

This post is inspired by Avinash D’Souza. (who coincidently has probably the coolest email address I’ve ever seen)

He contacted me with the following…

I want to be able to colour differently a word in every title of my posts

My first instinct was to use css pseudo-elements something like h1:nth-word(1) – this idea came to an abrupt halt when I discovered :nth-word it doesn’t even exist!

Hello lettering.js!

The solution I came up with (after several thought-racking moonshines) was to use lettering.js – A jQuery script by Dave Rupert that injects <span> tags into text.

The injected span tags automatically create their own classes (.word1 .word2 ect) – we can then use these classes to add colour (or anything else for then matter)

This is a much better method than simply hand-coding a <span> tags into your page title in the admin screen, since this would actually output the <span> tags everywhere your title appears such as breadcrumbs, teasers, even titles produced by social buttons such as linked-in. By using lettering.js we can target it to only effect your .headline_area and not anywhere esle a h1, h2 tag appears (not that the should for SEO best practice)

First things first…

Download this folder with the lettering.js scripts. Unzip and upload the folder onto your server. I prefer to upload it to the custom folder within Thesis so on the assumption you have a pretty standard set up your url  to the folder should be:

http://richerimage.co.uk/wp-content/themes/thesis_18/custom/jqs/filename.

However, that’s just me, you can upload it to wherever is convenient to you, the important thing is to know the exact url address of your jqs/ folder (we’ll need this in a minute) .

Add the jQuery Library to Thesis

• Go into the Thesis Options panel in your wordpress admin area.
• Under ‘Design Options’ (second one down) open up the ‘Javascript’ menu – it’s bottom-right.
• Check the 1st option ‘jQuery’
• Now go to ‘Home Page Display Options’ (same page bottom-left) open up ‘Javascript’ and again, the 1st option ‘jQuery’

Adding lettering.js into Thesis for WordPress

Copy and paste the following into custom_functions.php (BACK IT UP FIRST!!!) and don’t forget to change the url in lines 3,4,17 &18 to yours.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function lettering_to_singles() {
if (is_single() || is_page()) { ?>
<script src="http://yourdomain.com/jqs/jquery.lettering-0.6.min.js"/></script>
<script src="http://yourdomain.com/jqs/jquery.lettering-0.6.1.min.js"/></script>
<script>
 $(document).ready(function() {
 $(".headline_area h1, .headline_area h2").lettering('words');
 });
</script>
<?php }
}
add_action('thesis_hook_after_html', 'lettering_to_singles');
 
function lettering_to_pages() {
if (is_home() || is_archive()) { ?>
 
<script src="http://yourdomain.com/jqs/jquery.lettering-0.6.min.js"/></script>
<script src="http://yourdomain.com/jqs/jquery.lettering-0.6.1.min.js"/></script>
<script>
 $(document).ready(function() {
 $(".entry-title a").lettering('words');
 });
</script>
<?php }
}
add_action('thesis_hook_after_html', 'lettering_to_pages');

The first function adds the script to your .headline_area h1 and .headline_area h2 on your pages (the h2 is if you’re using a static page for your home page since in this instance your tagline will be using the h1 tag).

The second function adds the script to your blog home page and category pages. The headlines (and teasers) in these pages comprise of links to the single posts and are under the .entry-title class.

The reason we need to add these scripts in separately is so that we don’t break .entry-title a by adding the additional classes to it. (thanks to Dave Rupert, the author for his help regarding this – top guy )

This should give you a better understanding of how the script works.

Feeling Brave? Have a play – you can add it to paragraph classes, divs… anything. You can also play around with letters and lines too. Check out the Lettering.js github page and this rather funky tutorial for a better idea.

Adding Colour to your Headlines

Back up your .custom.css file and paste the following:

1
2
3
4

.word1, .word5, .word9  {color:red;}
.word2, .word6, .word10 {color:green;}
.word3, .word7, .word11 {color:blue;}
.word4, .word8, .word12 {color:orange;}

This repeats the colour cycle every 4 words (red, green, blue, orange, red, green, etc…) until the 12th word after that it will default to your standard headline colour. So you will want to change this css to meet your needs – there’s no limit how far you can go.

Needless to say, you can choose colours by hashtags eg: #ff0000 is red, #ff6600 would be orange – you can use the color picker within the thesis design options panels to get your desired colour code.

Targeting words randomly

As we close this post we actually address Avinash’s issue. He wanted to pick and choose what word and colour to style on each post.

Since the previous methods apply a consistent styling across the whole site eg each and every 2nd headline word will be green, we have to change the css we use.

As a working example lets say Avinash wanted to style the 4th word orange in a particular headline.

The first thing he would have to do is to identify the unique post id wordpress has assigned it. To do this he would have to go to ‘posts’ in his wordpress admin screen and hover over the post he wished to target:

In the bottom left of his screen a little window will pop up – here he will find the unique id of his post.

Here’s an example

To style this headline he would enter the following in custom.css:

.custom #post-882 .word4 {color: #ff6600}

Rinse, repeat.

Over to you

Have a run and enjoy – if you experience any issues please drop a comment below. If you would like to subscribe for further Thesis Tutorials the subscription area in the top right of this page.

Tagged as: thesis, Tutorials

Like this post? Share it!

• Tweet

Related Posts

• Thesis Tutorial: getting text to wrap round images in a pretty way
• Thesis Tutorial: How to Add Facebook, Linkedin, Twitter & email share buttons without a plugin
• 6 Great Thesis Tutorials for Noobs
• Pimp your Thesis – For Free!
• Post for profit not for loss