Tech Stuff

“Splitsville” and Google Fonts: Purrfect Together

By the way I updated my Splitsville post of a few months ago. No biggie, I’d just forgotten encode the “<” character in a few places. This is my leading candidate right now for my first plugin release. What do you think?

But here I’ve started out with a digression. I’m going to do a mashup of that code, along with two other plugins, to make it possible for you to have a thoroughly personalized site title and subtitle group.

“Custom css-js-php” from Flippercode is what you’ll use to embed the Splitsville code. Find it through your plugins control panel and activate it. You’ll then go into the new CSS-JS-PHP controls and add a new JS.

Call it what you like, apply it using WP Footer, and paste in this with the necessary modifications for where your theme template puts things:

//this first line depends on your theme, and what the ID is of the div where your site title is located
var words = jQuery('#masthead 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&lt;words.length; i++) {
newstring += '&lt;span class="word_' + i + '"&gt;' + words[i] + '&lt;/span&gt; ';
//We build up a new string, wrapping each individual word
//in a span with class "word_0" "word_1" "word_2" etc.
//Likewise here, your theme may have the site title somewhere else than in #masthead. This will match the first line of the script.
//Generally in WordPress you can't use the "$" style jQuery object, you use "jQuery" instead.
jQuery('#masthead h1 a').html(newstring);
//Then replace the existing title with the newly generated HTML.
//Again, this depends on whether your site description is in #masthead h2 or somewhere else
var words2 = jQuery('#masthead h2').text().split(' ');
//This does the same thing with the site subtitle, if you like.
var newstring = '';
for (var i=0; i&lt;words2.length; i++) {
newstring += '&lt;span class="word_' + i + '"&gt;' + words2[i] + '&lt;/span&gt; ';
//At the risk of being repetitious...
jQuery('#masthead h2').html(newstring);

Save this.

Easy Google Fonts

Easy Google Fonts is so easy you can forget how easy it is and go running to the support page. Forget that, just remember that you handle it through the new(is) Appearance::Customize menu — you play with the fonts right there, and see a live preview. Elegant.

Find the plugin through the plugins dashboard and activate it. You’ll need a Google Developer API Key, which I won’t cover here. If you’ve got a Google Account, you should be able to find it fairly quickly. Once you have that set up, go into the Settings::Google Fonts section. Here you will enter your API key, then create new CSS selectors to which you’ll apply separate font styles.

Depending on the length of your blog title and subtitle, you’ll set up selectors with Control Names like ‘Header Word One,’, ‘Header Word Two,’ ‘Subhead Word One’ and so on. Then for each selector control name, click in the box under “Add CSS Selectors” and put in the CSS selectors that will apply.

Based on the splitsville script, they’ll go something like: span.word_0

and span.word_1

Complete a selector for every word you want to style differently than your theme’s base CSS.

Then, Your Appearance::Customize menu will have a new section, “Typography,” which is where the elegance happens. Scroll down a little way and you’ll find your new selectors — header word one, header word two, etc. — laid out. Click on the “Edit Font” button and start to play. The amount of choices you have is surprising — not just any of a brazillion font faces, but styles, transforms, decoration, weight, leading, letter-spacing, foreground and background colors, and positioning. With real-time previews.

It pays to take notes here. Thank goodness for pencil-and-paper, so you can backtrack if you lose something you loved. Then when you’re done, Publish just as you would if you changed anything else in the appearance panel.

By using JS to apply different span.class names to each word, then this all-in-one Google Font tool to apply styles, the days of straight-ahead blog titles are so over. Enjoy.

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 *