If you are looking to find the highlight text button in WordPress Editor, you may be surprised to find there is no default option for it. But don’t worry, there are a bunch of ways to highlight text in WordPress. I will explain a simple method to achieve this.
You may note that while this post is updated for New WordPress Gutenberg Editor. But even if you are using the old Classic editor, I have a method for that as well.
If you are looking to highlight text in the WordPress (Gutenberg Editor), you can do this easily by using a simple plugin called “Advanced Rich Text Tools for Gutenberg”. It is really simple to use and just adds 2 simple formatting options to the WordPress Editor (under Block):
- Inline Text Background Color Change- To Highlight the Text (change background color) within the block
- Inline Text Color Change- Which can be used to change the color of Text within the Block
You will find both these options are not available in the default WordPress Gutenberg Editor.
In the WordPress Editor, while you can easily highlight a whole block, there are no options to highlight only selected text within the block. This plugin gives you those very options.
Though this plugin does not have many reviews, most of them are very positive. My take is that you can rely on this plugin as the author-”Ella van Durpe” is a part of the WordPress Core Team. I wonder why they have not made it part of the default options in Gutenberg.
Method 1: How to Highlight Text in WordPress Gutenberg?
- Download and activate the “Advanced Rich Text Tools for Gutenberg” Plugin
- Select the text you want to highlight (within the paragraph block)
- On the right-hand side Block Formatting Options, you will find an option Inline Background Color under which you can highlight text by clicking on any of the default colors available or use “Custom Color”. You will find the selected text is highlighted with the chosen color.
The Details on these steps are presented below:
Step 1: Under Dashboard go to Plugins and “Add New Plugin”
Step 2: Search for “Advanced Rich Text” under Add Plugins, Install and Activate it
Step 3: Go to the Post or Page where you want to highlight the text
Step 4: Select the text you want to highlight
Step 5: Now you will see the 2 additional options “Inline Text Color” and “Inline Background Color”. Using the option “Inline Background Color” you can highlight the text. Chose the color of your choice which will be applied to the selected text. You can also use the Custom Color option to highlight text using any color hex code (check below).
Another option lacking in WordPress Gutenberg is the ability to justify text. I have written a simple guide on how you can justify text in WordPress new editor. Many people have stopped using Gutenberg because of this. Hope WordPress is listening.
Some Good Color Hex Codes to Highlight Text
You will have better control on colors if you know the hex code of the color. This website can help you with this.
Some colors which are preferable to highlight text are green, yellow, fluorescent yellow, pink, orange. Choose a color on which the text is easily readable. Here are the hex codes for these colors and a preview of how they look.
Now even if you don’t want to use a plugin, I have a method for this. But it involves just a bit of HTML which may be difficult for non-techies.
Method 2: How to Highlight Text in WordPress using HTML (without any plugin)
You can go for this method if you want to avoid plugins and are looking to highlight text only occasionally. This method uses Yellow as the default color to highlight text.
- Click anywhere on the Text Block whose text you want to highlight. You will see the 3 dots above the block. Click on it and select “Edit as HTML” from the options. This changes the block view to show it in the HTML Form.
- Type in <mark> before the start of the text you want to highlight i.e before the first word
- Type in </mark> after the last word you want to highlight
- Right-click the 3 dots again and select “Edit Visually” and you will see the text highlighted in yellow color (which is the default color on using mark function)
Changing the Highlight Color of Text
Now if you want to change the highlight color from yellow to something else say flourescent yellow whose hex code is #ccff00, you will need to use a CSS.
Don’t worry. Using CSS is very easy.
For this go Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS
It is important to note that when you change your WordPress theme , you will lose the above CSS formatting.
To avoid this, use the “Simple CSS” plugin to add this CSS.
A limitation here is that the CSS will change the highlight color for all places where you use the mark tag. So you cant use different colors for different text.
Also, if you want to change the background color, you will have to edit the CSS every time. Hence, I am not a big fan of this method.
Now if you are working with the old Classic WordPress Editor, you can still use this option by switching between the Visual and the Text Tabs to apply the mark code.
Also, the Text Highlight Options are also available in the TinyMCE Plugin for the Old WordPress Classic Editor.
Highlighting Text can be an effective way to emphasize your content on your website. It also helps to get reader engagement. But make sure you use it selectively and the color does not affect the text readibility.
Summary, to conclude, if you want to highlight text in WordPress
- For Gutenberg Editor– Suggested Plugin is Advanced Rich Text Tools for Gutenberg
- For Classic Editor- Suggested Plugin is TinyMCE advanced (highlight function works only for Classic Editor)
- For Both Gutenberg and Classic Editors – without plugin Use HTML Code- Mark