As you’ve most likely already found, by default, the WordPress Traditional editor doesn’t provide the choice of highlighting textual content. By no means worry, on this publish we’re exhibiting you how one can simply get round this shortcoming.
We’ve all been to a website and seen textual content that’s been highlighted with a coloured background (typically in yellow) like this.
If you’re utilizing the WordPress Block Editor, it’s no drawback. The choice is there.
Right here is a few highlighted textual content within the WordPress Block Editor’s Paragraph block.
Nevertheless, upon searching for the highlighter choice in your WordPress Traditional editor, you’ve little question come up empty-handed.
And there’s a reasonably good cause for this. Within the WordPress Traditional editor interface…
The Choice Doesn’t Exist!
The excellent news is, we’ve received three straightforward options that can assist you overcome this irritating drawback.
One in plugin kind, and two through a extra handbook strategy.
The Plugin Method
Manually Highlighting Textual content in WordPress
The CSS Methodology
First Up, The Plugin Method
TinyMCE Superior
Tiny MCE Superior is a helpful plugin that provides superior textual content enhancing options to each the traditional and Gutenberg editors.
One such function is the power to spotlight the background of your textual content in WordPress posts and pages.
One factor to notice nonetheless, is that altering the background shade of your textual content isn’t an choice that’s instantly included within the textual content enhancing toolbar.
However this may be simply modified within the plugin’s settings by dragging “Background shade” into the primary toolbar as proven beneath:
When you’ve added the choice to your toolbar, it’s as straightforward as deciding on the textual content you need to spotlight, alongside along with your selection of background shade.
Manually Highlighting Textual content in WordPress
Inline Styling
It’s also possible to manually spotlight textual content by including code into the textual content editor. It’s so simple as wrapping the phrases you need highlighted within the particular code, as proven beneath:
<span type=”background-color:yellow;”> … your textual content right here … </span>
We’ve inserted “yellow” right here, however you possibly can select any shade you want, or use shade codes, comparable to “#FFFF00”.
For instance …
<span type=”background-color: #FFFF00;”> … your textual content right here … </span>
Oh, and in order for you fast and easy accessibility to paint codes, right here’s a handy shade picker from W3schools.com.
The drawback with inline styling is that if you happen to ever need to change the colour of the spotlight, then you’ll need to return to every particular person publish and re-edit it.
And so if you wish to change the spotlight shade for ALL your highlighted textual content situations, utilizing the CSS methodology beneath is the way in which to go.
So let’s break it down.
The CSS Methodology
In case you’d like to have the ability to simply change the colour of ALL your highlighted textual content, you then’ll need to carry your CSS file into the answer.
Begin by creating a brand new (and uniquely named) CSS “class.” For instance, let’s create one referred to as “highlight-text” then apply a background shade.
All it’s important to do is insert the beneath code in your CSS file (Look > Customizer). Or higher but, create a baby theme and add it to the CSS file in your little one theme.
.highlight-text { background-color:#FFFF00; }
In fact, you can also make that shade something you want.
*In case you missed it earlier, right here’s that shade picker another time.
When you’ve achieved this, change to the “Textual content” view in your editor and wrap the textual content you need to be highlighted within the following method:
Now if you examine your reside web page out you need to hopefully see some properly highlighted textual content (woop woop!).
Is This The ‘Spotlight’ Of Your WordPress Life?
Most likely not…
However hey, at the very least now you’ve three straightforward methods of highlighting textual content. Serving to you to get across the reality WordPress doesn’t assist this performance by default.
When you have every other helpful suggestions or strategies associated to highlighting textual content in WordPress, be sure you tell us!
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!