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.
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.
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.
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.
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>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.
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.”
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.
We hope this guided you to learn how to highlight text in WordPress.
