How To Highlight Text in WordPress

As you’ve probably already discovered, by default, the WordPress Classic editor doesn’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.

If you are using the WordPress Block Editor, it’s no problem. The option is there.

Here is some highlighted text in the WordPress Block Editor’s Paragraph block.

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

And there’s a pretty good reason for this. In the WordPress Classic editor interface…

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.

The Plugin Approach
Manually Highlighting Text in WordPress
The CSS Method

First Up, The Plugin Approach

TinyMCE Advanced

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:

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.

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:

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

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!

Щелкните ниже, чтобы поставить оценку!
Всего: 0 В среднем: 0

Написать комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

3 × два =