Tech Stuff

Splitsville for WordPress Site Names

Consider this site title:

It’s a little hard to tell, but I’ve set it up so that the two words, “Itchy” and “Banquet,” have different CSS styles.

As far as I know, WP simply spits out the title into a div or h1 or whatever and it is what it is. Our needs were different so I cooked up a small bit of Javascript and CSS to split the individual words out and apply different classes to them. Here’s how it goes.

You’ll need a theme that lets you add custom styles and scripts; or a plugin that does the same such as the CSS & JavaScript Toolbox. Then use this (my comments might be helpful):

var words = jQuery('#header h1 a').text().split(' ');

//An array of the words, or whatever else is separated by spaces, in the title.
//You could extend this to individual L E T T E R S if you wanted.
//The jQuery elementmay vary depending on your theme.
//On this blog, for instance, the line would look like this
//var words = jQuery('#site-title a').text().split(' ');

var newstring = '';
for (var i=0; i<words.length; i++) {
newstring += '<span class="word_' + i + '">' + words[i] + '</span> ';

//We build up a new string, wrapping each individual word
//in a span with class "word_0" "word_1" "word_2" etc.

jQuery('#header h1 a').html(newstring);
//Then replace the existing title with the newly generated HTML.

var words2 = jQuery('#header h2 a').text().split(' ');
//This does the same thing with the site subtitle, if you like.

var newstring = '';
for (var i=0; i<words2.length; i++) {
newstring += '<span class="word_' + i + '">' + words2[i] + '</span> ';
jQuery('#header h2 a').html(newstring);

The new code looks like this:

<h1 class="blogtitle left"><a href=""><span class="word_0">itchy</span> <span class="word_1">banquet</span> </a></h1>

And then add this, or something, to your CSS.

.custom-header h1.blogtitle a span.word_0,
.custom-header h1.blogtitle a span.word_0,
.custom-header h1.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0,
.custom-header h2.blogtitle a span.word_0 {
color: #351F15;
margin-right: -0.5em;

That’s probably more than you need, but you get the idea. The first word (word_0) has styles that override the style for the rest of the header.

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he's also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

Leave a Reply

Your email address will not be published. Required fields are marked *