How to Highlight Text in WordPress

by | Last Updated Jan 11, 2021 | WordPress | 0 comments

Are you looking to highlight text in a WordPress page or post?

Highlighting text can help users focus on a specific text area. This can be useful to highlight a special offer, call to action, or highlight particular sentences.

This article will explain how to highlight text in WordPress, either manually or by using a plugin.

When and Why to Highlight Text

Highlighting important information in your content is an easy way to make it stand out.

This helps you direct the user’s attention to important calls to action.

Here’s an example of what text highlighting looks like in WordPress.

WordPress does not offer an easy way to highlight and select text in the content editor.

You can emphasize text by making it bold, italicizing, or changing its color.

Let us now take a look at how easy it is to highlight text in WordPress.

Highlight Any WordPress Text (No HTML Required)

A WordPress plugin makes it easy to highlight text.

Therefore, the first thing you need to do is install and activate the Advanced Editor Tools (previously TinyMCE Advanced) plugin.

Advanced Editor Tools WordPress Plugin Directory

See our step by step guide on how to install WordPress plugins for more details.

Advanced Editor Tools expands and enhances the WordPress block editor with more formatting options.

Upon activation, the plugin allows you to edit a WordPress post or page to highlight specific text.

By clicking on the drop-down arrow, you can choose more formatting options for the selected text.

Advanced Editor Tools WordPress Mark

You need to select the Mark option from the drop-down menu. Then the plugin will highlight the text using the default colors.

However, your WordPress theme colors may affect the actual color.

Now you can save your post and see the highlighted text in action.

WordPress Text Highlighted With Advanced Editor Tools Plugin

Isn’t that easy?

If you don’t need to highlight text very often, you can use the following method to do the same without using a plugin.

Highlight Text in WordPress Manually

This option is easy to implement, but it requires a little bit of coding.

We will be using the HTML ‘mark’ element in this example.

You can highlight and draw attention to a specific part of your writing by using this HTML element.

Edit the post or page where you want the highlighted text to appear.

Next, click on the three-dot menu in the block toolbar and select the paragraph containing the text.

WordPress Text Edit as HTML

From here, choose the Edit as HTML option.

Next, you will see raw text in HTML format.

Wrap the mark tags around the text you want to highlight like this.

<mark>Hello World</mark>
WordPress Text Edit Visually

To return to the visual mode, click again on the three-dot menu and select Edit visually in the block toolbar.

You’ll notice your selected text highlighted when the block area switches back to the visual mode.

WordPress Text Highlighted With HTML Mark

Based on the WordPress theme you are using, you may see your highlighted text differently. However, the background is usually yellow.

You can change the style by adding custom CSS.

To launch the theme customizer, go to Appearance > Customize.

From here, select “Additional CSS.”

WordPress Customizing Additional CSS

This is where you can paste your custom CSS.

As a starting point, you can use this CSS code.

mark{
     background-color: #303F9F;
     color: white;
     padding: 0 5px;
 }

Once you’ve completed your changes, make sure to click the Publish button.

You can now view your highlighted text in action on your WordPress blog.

WordPress Highlighted Text CSS Styled

We hope this guided you to learn how to highlight text in WordPress.

We engineered our cloud infrastructure with Performance, Speed, Scalability, and Security in mind.

That’s why we built Rovity with AWS, CloudLinux OS, DirectAdmin, and LiteSpeed Web Server.

Come and experience the next generation of shared hosting on the cloud

By Jafar Muhammed

Jafar Muhammed has 10+ years of experience in WordPress, web hosting, domain names, DNS, CDN, server administration, etc. He is an open web advocate. He is the CEO of Rovity, the fastest growing premium shared hosting startup in India.

Check Out These Related Posts

0 Comments

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *