Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
By "everywhere", I suppose you're referring to "content", "excerpt", "title"? – brasofilo Mar 7 at 22:25
Yes, everywhere the site name appears on the site in text. The website also uses a page-builder, so also meta-data. – Travis Pflanz Mar 7 at 22:34
If you want to keep the tag plugin-recommendation, ok. Don't understand why you removed the hook tag. As a matter of fact, that's all about it, you need to filter content, title and excerpt and do a preg_replace. Searching Stack Overflow and using the correct filters and you're done. – brasofilo Mar 7 at 22:40
Plugin recommendations are off topic. The tag exists for old questions only. – toscho Mar 7 at 22:48
I accidentally rolled it back. I accidentally hit rollback, then accidentally clicked OK instead of Cancel... It was a "crap, damn' moment." – Travis Pflanz Mar 7 at 23:12
show 1 more comment

2 Answers

up vote 2 down vote accepted

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.net/QH5nG/5/

Replace text code found here:

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

share|improve this answer
It appears this method is breaking the controls in the Layer Slider plugin (wordpress.kreatura.hu/layersliderwp) I have checked the slider there are no instances of the site name in the slider text, file names or alt or title attributes. – Travis Pflanz Mar 8 at 17:35
Correct, I forgot that jQuery's html() method strips script tags. I've updated with a non-jQuery solution that will keep the scripts in and not break the slider plugin. – hereswhatidid Mar 8 at 19:08

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.