How To Highlight Text in WordPress

How To Highlight Text in WordPress

As you’ve probably already discovered, by default WordPress editors don’t give you the option of highlighting text. Never fear, in this post we’re showing you how you can easily get around this shortcoming.

We’ve all been to a site and seen text that’s been highlighted with a colored background (often in yellow) like this.

However, upon looking for the highlighter option in your WordPress editor, you’ve no doubt come up empty-handed.

And there’s a pretty good reason for this…

The Option Doesn’t Exist!

The good news is, we’ve got three easy solutions to help you overcome this frustrating problem.

One in plugin form, and two via a more manual approach.

First Up, The Plugin Approach

TinyMCE Advanced

A look at the Tiny MCE plugin for WordPress

Tiny MCE Advanced is a handy plugin that adds advanced text editing features to both the classic and Gutenberg editors.

One such feature is the ability to highlight the background of your text in WordPress posts and pages.

One thing to note however, is that changing the background color of your text is not an option that’s immediately included in the text editing toolbar.

But this can be easily changed in the plugin’s settings by dragging “Background color” into the main toolbar as shown below:

Add the additional text background color option to have the option of highlighting your text

Once you’ve added the option to your toolbar, it’s as easy as selecting the text you want to highlight, along with your choice of background color.

Using the TinyMCE plugin makes it easy to highlight text in WordPress

Manually Highlighting Text in WordPress

Inline Styling

You can also manually highlight text by adding code into the text editor. It’s as simple as wrapping the words you want highlighted in the specific code, as shown below:

<span style="background-color:yellow;"> … your text here … </span>

We’ve inserted “yellow” here, but you can choose any color you like, or use color codes, such as “#FFFF00”.

For example …

<span style="background-color: #FFFF00;"> … your text here … </span>

Oh, and if you want quick and easy access to color codes, here’s a convenient color picker from W3schools.com.

Add a simple shortcode to highlight your inline text in WordPress

The disadvantage with inline styling is that if you ever want to change the color of the highlight, then you will need to go back to each individual post and re-edit it.

And so if you want to change the highlight color for ALL your highlighted text instances, using the CSS method below is the way to go.

So let’s break it down.

The CSS Method

If you’d like to be able to easily change the color of ALL your highlighted text, then you’ll want to bring your CSS file into the solution.

Start by creating a new (and uniquely named) CSS “class.” For example, let’s create one called “highlight-text” then apply a background color.

All you have to do is insert the below code in your CSS file (Appearance > Customizer). Or better yet, create a child theme and add it to the CSS file in your child theme.

.highlight-text { background-color:#FFFF00; }
Add a custom CSS to change the color of ALL your highlighted text

 

Of course, you can make that color anything you like.

*If you missed it earlier, here’s that color picker one more time.

Once you’ve done this, switch to the “Text” view in your editor and wrap the text you want highlighted in the following manner:

add the following code into the text editor to highlight the selected text

Now when you check your live page out you should hopefully see some nicely highlighted text (woop woop!).

A live view of the highlighted text

Is This The ‘Highlight’ Of Your WordPress Life?

Probably not…

But hey, at least now you have three easy ways of highlighting text. Helping you to get around the fact WordPress doesn’t support this functionality by default.

If you have any other handy tips or methods related to highlighting text in WordPress, be sure to let us know!

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.
Rick Crawshaw
Rick Crawshaw Rick is a copywriting and marketing fanatic who calls the beautiful land of New Zealand home (yes, it's as stunning as you've heard). When this kiwi's not making words sing off the page, you'll likely find him stuck down a weird YouTube rabbit hole, or bingeing throwback 90's sitcoms.
Is this how you get around WP's lack of highlighting ability? Or is there a method we've overlooked? Let us know in the comments below!