Home » WordPress Tutorials » Basics » How to Highlight Text in WordPress

How to Highlight Text in WordPress

When working on your WordPress website, you will eventually want to format the text of posts and pages, so it looks tidier and is digested more easily by your readers.

Although there are numerous formatting options, highlighting text remains one of the best attention-grabbing techniques.

This is why, in the following paragraphs, you will read how to highlight text in WordPress.

 

How to Highlight Text in WordPress

Depending on the editor you are using to craft your website content, there are different approaches to highlighting text.

In the following sections, you will read how to do so with the WordPress Gutenberg Block Editor and the Classic Text Editor.

 

How to Highlight Text with Gutenberg Block Editor

The easiest way to add the highlight function is by installing a WordPress plugin. We use this method for two main reasons:

  1. The highlighted function is not accessible via the Gutenberg default formatting tools.
  2. Adding more functionality with a plugin is far easier than doing so with code snippets.

For this demonstration, we will install the Advanced Editor Tools plugin. This is a handy suite of tools that brings more formatting options at your disposal, including highlighting text:

WordPress Formatting Text Plugin

 

You can browse the Plugins library and install the toolset that fits your requirements the best.

Once you have installed the plugin, via your Admin Dashboard, create a new WordPress webpage, a blog post, or simply edit the already existing ones.

Whichever you choose, the process is identical.

For this demonstration, we will open and edit a sample blog post:

WordPress Sample Post Gutenberg

 

Now, mark the text you want to highlight:

WordPress select text

 

Then, find the Background color button in the formatting text area (this button will only be available if the Advanced Editor Tools plugin is active):

WordPress Background Text Options

 

Then, choose the color which you will use to highlight the selected text:

Background text color pallete

 

Once you do so, notice how the text becomes highlighted with the preferred color:

WordPress highlighted text

 

Once you are satisfied with the editing process, you can publish/edit your post or article:

WordPress Save post changes

 

How to Highlight Text with the Classic Editor

Highlighting text with the classic editor doesn’t require the installation of a plugin.

You should only make a few clicks here and there and add certain HTML tags.

Although it sounds complicated, the process is very simple.

First, open the page or blog post you wish to edit. For this demonstration, we will use a sample post:

WordPress Classic Editor Blog Post

 

Then, select the text you wish to highlight:

WordPress mark text in the Classic Editor

 

After that, click on the Text tab, so you can insert the HTML elements:

Open WordPress Text Editor

 

Once you’ve done so, it is time to add an HTML tag before and after the word, phrase, or sentence you want to highlight.

Between the selected text add these strings of code:

<span style=”background-color: #fdf2d0;”>the text you want to highlight</span>

If you are new to HTML and need some more clarifications, here’s what all these phrases mean:

<span style=”background-color:

This is an opening tag telling WordPress that a certain command should be performed. In this case, this is the highlighting function.

#fff300;”

This is the HTML color code. Changing this code changes the highlighting color.

</span>

This is the closing bracket. Use it to mark the end of the highlighting length. If you don’t use this bracket, everything will become highlighted – from the opening bracket to the end of the text.

Once you have  included the HTML highlighting tags, go back to the Visual tab, so you can see how the highlighted area turned out to be:

WordPress save and apply changes

 

Once you are satisfied with the result, click on the Publish/Update button, so WordPress applies and saves the changes you’ve just made:

WordPress Publish content

 

Conclusion

Highlighting is a great way of grabbing the attention of your website visitors and when done right, you have the chance to increase engagement and even conversion rates.

Furthermore, WordPress makes it easy to add highlighted text across your page and posts, so you get the most out of this formatting option.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?