I am building a site for a friend, the site has launched, now he tells me he wants his site name to appear green everywhere it appears on the website.

Immediately, I thought of the plugin SEO Smart Links, which automatically links a string of text. Is there anything like this for applying styles or classes to a string of text?

OR a suggestion for another method to complete this task?

I am building a site for a friend, the site has launched, now he tells me he wants his site name to appear green everywhere it appears on the website.

Immediately, I thought of the plugin SEO Smart Links, which automatically links a string of text. Is there anything like this for applying styles or classes to a string of text?

OR a suggestion for another method to complete this task?

• plugin-recommendation
• css

2 Answers 2

If it's purely for setting the style of the text you may want to use JavaScript/jQuery instead. Here's a quick sample that would replace all instances of "ipsum" with

<span class="red">ipsum</span>

And the full code:

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /ipsum/g, function(node, match) {
    var span= document.createElement('span');
    span.className= 'red';
    node.splitText(match.index + 5); // +5 is the length of the string to replace
    span.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

Fiddle:

http://jsfiddle/QH5nG/5/

Replace text code found here:

https://stackoverflow/questions/1501007/how-can-i-use-jquery-to-style-parts-of-all-instances-of-a-specific-word#answer-1501213

Search RegEx is a good plugin to be able to search and replace with Grep through all posts and pages. That way, you can add a CSS class to the text and style it anyway you want without the overhead or complexity of jQuery.