How To Highlight Text In WordPress

highlight text

Long posts are often too boring and sometimes visitors don’t find the information that they have been looking for. To solve this problem, highlight text in WordPress can be your great ally. It only takes the magic touch, then your text will be highlighted and it will attract your visitor’s eyesight. 

In this post, I will show you to highlight text in WordPress. After following the post you will be able to highlight any portion of text at any time. 

When And Why To Highlight Text?

Highlighting is the easiest way to emphasize important information in your post. This helps users to interact directly with the important part. A highlighted text may look like this. 

WordPress comes with the content editor by default and therefore you can highlight any text whenever you want. 

But if you want to do it easily then I suggest using a plugin. 

How To Highlight Text In WordPress

At first download and install the Advanced Editor Tools plugin and activate it. Earlier it was named as TinyMCE tools. 

Now open the page or post where you want to highlight text. Select the text portion which you want to highlight. Then click on the arrow button on the toolbar and select Mark option. 

Now your selected portion of the text will be highlighted. 

It’s super easy, right? However, if you don’t highlight text very often then it is wise to highlight text manually. 

Manually Highlight Text

This option requires the implementation of a little bit of code. At first, open the page post where you want to highlight text. Then select a paragraph containing the text and click on the three-dot button. Select Edit as HTML. 

Now you will be able to see the post in HTML format. Now wrap the text up inside the <mark> and </mark> tags in the below way:

<mark> Build Better Content With Ultimate Blocks</mark> 

Now you can switch back to the visual mode by click on the three dot menu button and selecting ‘Edit visually. 

Take a look at the changed portion. Where you placed the tags, that portion is highlighted. If you don’t like the yellow color you can change it. 

Navigate to Appearance -> Customize page and click to Additional CSS. now write the following code. 

mark {
background-color: #ffd4a1;

n the background color, write any color code you want then hit save changes. Then you will be able to see your color in the action. 

Final Words

Well, that’s all guys. For you, I am repeating myself again, if you don’t highlight it most often then do it manually once. And if you think you are going to highlight pretty often then use the plugin. If you have any questions, feel free to ask. I will happy to reply to your questions. If you liked the post, please share it with your friends. Stay safe. 

Leave a Comment

Your email address will not be published.