The website for Gamedev NL uses a free theme, Montezuma, which is one of those old-style power user themes that lets you rewrite a lot of stuff (templates and CSS in particular) without having to dive too far into the mire that is WordPress PHP code.

One of the cool things that Montezuma does is its title multicoloring, which you can see here in the GDNL site title:

That magic is accomplished in two parts. The first, not shockingly, is a CSS file, the style.css file, which assigns a black color to a class called firstpart. The second part is the script which assigns that class dynamically, which lives in a Javascript file named javascript.js.

Both of these files live inside the site/wp-content/uploads/montezuma folder, presumably for reasons having to do with permissions(?), but there are several other CSS and JS files with various names and the relevant code underneath the theme directory proper.  It will save you some trouble to know that this is where you need to edit these files to have an impact on your production site.

I like the black/blue theme, so I didn’t touch the class definition, but for the sake of completeness here’s one of the relevant lines (there are several, because there are lots of ways a title can show up in WordPress, not all with the same element or class):

.hentry h2 a .firstpart,
.hentry h2 a .firstpart,
.hentry h1 .firstpart  {
    color: #000000;
    text-decoration: none;
}

The important bit, for my purposes, was opening up the way that the headline is broken up. In particular, I wanted to create a natural break at significant punctuation. I chose the colon as my weapon of choice for this, as it fits my particular use case, but it would be relatively simple to set up a regular expression or something as a more general way to automatically fit the first and second part boundaries.

As it was originally, the Montezuma split is something like this:

/*******************************
*  SPLIT TITLES
******************************
//* Split titles: 2-color titles for site-, post- and widget titles */
$('#sitetitle a, .hentry h2 a[rel=bookmark], .hentry h1 a[rel=bookmark], .image-attachment h1, .widget h3 span').each( function() {
    var str = $(this).text();
    if( str.indexOf(' ') > 0 ) {
        var space = ' ';
    } else {
        var space  = '';
    }
    var strArray = str.split(space),
    fullLength = strArray.length,
    halfLength = Math.ceil( fullLength / 2 ),
    restLength = fullLength - halfLength,
    newstr = '<span class="firstpart">';
    for( var i = 0; i &lt; halfLength; i++ ) {
        newstr += strArray[i] + space;
    }
    newstr += '</span>' ;
    for( var i = halfLength; i &lt; fullLength; i++ ) {
        newstr += strArray[i] + space;
    }
    $(this).html( newstr );
});

I modified it as shown below (changes and additions are highlighted):

/*******************************
*  SPLIT TITLES
******************************
//* Split titles: 2-color titles for site-, post- and widget titles */
$('#sitetitle a, .hentry h2 a[rel=bookmark], .hentry h1 a[rel=bookmark], .image-attachment h1, .widget h3 span').each( function() {
    var str = $(this).text();
    /* CUSTOM */
    if( str.indexOf(':') &gt; 0 ) {
        var split = ':';
        var space = ' ';
    } else
    /* END OF CUSTOM */
    if( str.indexOf(' ') &gt; 0 ) {
      var split = ' ';
      var space = split;
    } else {
      var split  = '';
      var space = split;
    }
    var strArray = str.split(split),
    fullLength = strArray.length,
    halfLength = Math.ceil( fullLength / 2 ),
    restLength = fullLength - halfLength,
    newstr = '<span class="firstpart">';
    for( var i = 0; i &lt; halfLength; i++ ) {
        newstr += strArray[i] + space;
    }
    newstr = newstr.substring(0, newstr.length -1);
    newstr += split + '</span>' ;
    for( var i = halfLength; i &lt; fullLength; i++ ) {
        newstr += strArray[i] + space;
    }
    $(this).html( newstr );
});

Mostly this is just differentiating the “split” character from the “space” character, as my split and space are different. It’s unlikely that I need all of the original code now, as I don’t expect to have a lot of multiple-colon titles, but it never hurts to be careful.