How To Highlight Text in 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:

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.

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; }

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 to be highlighted in the following manner: