How to Highlight Text in WordPress

You’ve probably been to a site before and seen text that has been highlighted with a colored background (often in yellow) like this.

Upon looking for the highlighter button in your WordPress editor, you’ve no doubt come up empty-handed. There’s a good reason for that – it doesn’t exist.

Worry not, however. We’ve got four easy solutions for you – two in plugin form, and two via a more manual approach.

wordpress-featured

First Up, Two Plugins

1. CKeditor for WordPress

The CKeditor for WordPress plugin will replace your default editor with one that will give you the option to highlight text (and much more).

As you can see, you have multiple choices for choosing your background color.

ckeditor

2. RAD Text Highlighter

RAD Text Highlighter plugin is an option for you if you don’t want a plugin taking over your editor. This plugin lets you put the text you’d like to highlight in between two shortcode brackets, and it then automatically highlights the text.

rad-shortcode
rad-highlighted

You can also change the color of the highlighting (and the text color) in the settings.

rad-settings

Manual Approaches

3. Inline Styling

You can also insert code into your post by viewing your post in the Text view and adding something similar to the following:

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

I have simply 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>

Here’s a convenient color picker for you from W3schools.com.

inline-styling

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.

4. 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.

What you should do it create a new (and uniquely named) “class” in your CSS file. For example, let’s create one called “highlight-text” then apply a background color.

For example, put this in your CSS file (Appearance > Editor). Or better yet, create a child theme and put it in the CSS file in your child theme.

.highlight-text { background-color:#FFFF00; }

Of course you can make that color anything you like. Once again, here’s a convenient color picker for you.

Once that’s done, switch to the Text view in your editor and wrap the text you want highlighted in the following manner:
{code type=php}… text to highlight …{/code}

css-method
css-method-text
And there you go — four relatively easy solutions for you. Highlight away.