0

One of my WordPress users has a need to bold several words in any given post. These words will vary dependant on post and not every instance will be made bold for a given post.

An example of the output they want is;

  • Team X vs Team Y
  • Team A vs Youth Team B

The thing I like about C United is...

There is no rhyme or reason to it and unfortunately it takes them a long time to highlight each word and bold it.

Is anyone aware of a way he can quickly select multiple words in a given post and bold them in one go?

I was thinking about writing some JS that would listen for a certain modifier key being held down and then on click it would remember the word to be made bold, but I can't think how I would then run through and bold everything on the front end.

Any advice or pointers in a particular direction would be appreciated.

5
  • You can use Visual editor for the same Nov 14, 2017 at 12:15
  • 1
    Highlight multiple words, hit Ctrl + b, or click the B button above the editor in visual mode (b in Text mode, no shortcude afaik). If that's too complicated, please add more information about their specific problem with using the editor controls.
    – janh
    Nov 14, 2017 at 14:39
  • Thanks for the comments, but I don't see a way to highlight multiple words from visual mode, what are you pressing or doing to allow more than one thing to be selected at once?
    – Toby
    Nov 14, 2017 at 16:15
  • @janh Can you share which browser you're trying that in? It doesn't seem to select multiples in Chrome and in Firefox you can select but then bolding will only work on the first selected item.
    – Toby
    Nov 20, 2017 at 14:58
  • Sorry, didn't see your previous comment. Tested on chromium/chrome 61 and firefox 55 (both ubuntu). Selection either by mouse or with shift (+ctrl) + arrow keys, ctrl + b / b-button editor control work identically for me in visual mode. Only editor control in text mode.
    – janh
    Nov 20, 2017 at 15:13

1 Answer 1

1

This is a neat idea that I think I may use too. Here's the solution I've just cooked up.

First, add the following to your functions.php file:

/* BOLDED CONTENT */

// Affect the content after it's retrieved and before it's displayed
add_filter( 'the_content', 'bolded_content' );

function bolded_content( $content ) { 

    // Look for custom meta field called 'bold'
    if ( get_post_meta( get_the_ID(), 'bold', true ) ) {

        // Get 'bold' value
        $bold_terms = get_post_meta( get_the_ID(), 'bold', true );

        // Split string into multiple values at each comma
        $keys= explode(", ",$bold_terms);

        // Add <strong> tag with special class if needed
        $bolded_content = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="bolded_content">\0</strong>', $content); // Adds 

        // Remove strong tag if it was added anywhere inside of an existing tag.
        // For example:  <a href="/folder/<strong class="bolded_content">VALUE</strong>.html"> would break things.
        foreach ($keys as $key) {
            $bolded_content = preg_replace("|(<[^>]+?)(<strong class=\"bolded_content\">($key)</strong>)([^<]+?>)|","$1$3$4",$bolded_content);
        }

        $content = $bolded_content;

        }

    return $content;
}

Then add a custom field to your post where the name is "bold" and the value is whatever terms you wish to bold (separated by comma and a space). In your case, this would be:

Name: bold
Value: Team X, Youth Team B, C United

For further styling, you can tweak .bolded_content in your CSS file.

This should allow you to add as many terms as you like and they are set at the post/page level. That should do it. Hope that helps!

2
  • Thanks Mark - this isn't something I'd thought of doing. Something I will need to check is if the same words ever appear not bolded in the text. I don't think they do so this should work.
    – Toby
    Nov 14, 2017 at 16:16
  • Happy to help. Hopefully bolding all instances of the terms will work for your needs. Nov 14, 2017 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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