A WALK THROUGH of How to Highlight Text in WordPress

You may have seen many websites using various colors in their post of highlighting special words. These highlights not only emphasize the word but also makes you think the word is important for that particular subject. Highlighting text in WordPress posts can be very beneficial for SEO purpose and audience perspective as well.

If you are confusing this with the Yellow highlighted text when you search on a web page then you are wrong. This is something when you visit to a blog and the post itself has highlighted text in various colors (Not only in Yellow). The text will Look Like This or This.

So, if you wish to enhance your web traffic by highlighting text on your WordPress web pages or posts you can go through how to highlight text in WordPress. There are many methods to highlight a word in WordPress CMS and I am going to explain all of them one by one. Just pic the one that is easier for you.

Why You need to highlight text in WordPress Site’s Blog Posts or even Pages?

As from the school times, we all know that a highlighted text means something more important. When something is highlighted the it must ne effective for reading or contain important information from the whole content. And many surveys also say that a web page or post containing highlighted text gather more viewership compared to a blog with plain text. So, the summary is that if you want to grab the attention of a reader then put some highlighted text n your post or pages, regardless the whole post content.

Yes, WordPress comes with tons of features that makes your blog unique and attractive to people, but adding highlighted text will add perfection to it.

How to how to highlight text in WordPress Blog Post?

The next question arises is how can we highlight a text in a blog. Well, there are many ways you can do it like with plugins or manually. We are going to talk about some plugins that can automatically highlight the text as you want without any effort as well as some manual stuffs to highlight your blog text.

By Installing Plugins:

Plugins make our life easier. Simply install a plugin for highlighting the text and you are done! If you don’t know how to install a plugin then here is the process:

Step 1: Open your WordPress dashboard.

Step 2: Go to Plugins and then Install Plugins. You will see a plugin search page.

Plugins

Step 3: Just type the name of plugins explained below.

Step 4: Now click on the Install. Once the plugin gets install simply press the Activate button.

You are done with installing plugin; you can go through the walkthrough explained below.

Custom Highlight Color

This plugin helps you to highlight your blog’s most important contents without any extra technical stuffs. You need not to do anything with your WordPress Text editor. The plugin gives you short code options. So, all you have to do is to insert your important words between the sortcodes and you are done.

Custom Highlight Color

You are free to choose the color options while highlighting the text according to your preferences. This is not all, this plugin also helps you to highlight the words and texts in your page and sidebar widgets along with your blog posts. Here is what you need to do:

  • Install and activate the plugin as above explained.
  • Go to your blog post, you will see an Icon of RAD text highlighter. Just put your mouse at the place where you want to insert the shortcodes and click on the icon.
  • You will see the shortcodes inserted there. Simply put your text that you want to highlight between the shortcode brackets. And you are done.

Advanced Rich Text Tools for Gutenberg

This is another great plugin for WordPress Gutenberg editor. This plugin allows you to highlight your selected text with any color of your preference. You need not to have any kind of technical knowledge for doing this. Here is how to highlight text in WordPress:

Plugin for Highlight
  1. First of all, download and activate the “Advanced Rich Text Tools for Gutenberg” Plugin as explained above.
  2. Now select the important text to highlight (within the Gutenberg block).
  3. You can choose the color of your preference by simply clicking on the Custom Color option under the Inline Background color.
  4. Simply pick the color of your choice and you are done.
  5. You can check that your color has been highlighted.

CKeditor for WordPress

As the name suggests, this is not only a Highlighter plugin. This is a whole WordPress text editor itself. Before telling anything, I want you to be clear that use this plugin only and only if you are Okay with replacing your current WordPress Text Editor (Classic or Gutenberg) with Ckeditor. Installing and activating this plugin will automatically deactivate your current WordPress Text Editor. However, you can get them back by uninstalling this plugin.

Ckeditor

This text editor comes with whole bunch of useful tools that you can use for formatting your blog post. But we are here just concerned about changing the text color and this tool excels in this. With over 400,000 downloads till date, this can be perfect solution for how to highlight text in WordPress.

Highlighting the Text in WordPress Manually (BY HTML)

If you are okay with doing some technical stuffs then you can go with this method. Using HTML and CSS codes are much efficient as adding so much plugins can make your website slower. However, highlighting the texts manually will take more time and needs a very little tech understanding.

Don’t worry about the technical stuffs, it will be a copy and paste job for you. Simply go through these methods explained below.  

Method 1:

The first method is using the default HTML syntax for WordPress MARK. In this method you just have to insert the Mark code into the post along with the word that you need to highlight. But you can’t do this trick with visual editor, you have to switch to the Text editor (In classic Editor) or Edit as HTML (in Gutenberg editor). Here is the procedure:

Selecting Edit as HTML
Selecting Edit as HTML
  1. Simply open your post and click on the Text if you are using Classic editor. If you are using Gutenberg editor, click anywhere in the block, you will see 3 dots menu. Click on the 3 dots menu and select Edit as HTML from dropdown menu. Doing this in both editors will change the editor in HTML mode.
  2. Now find the text that you have to highlight and type <mark> before the text along with </mark> in the end of the text.
  3. Now again come to the visual editor. If you are using classic editor then you can simply click Visual. If you are using Gutenberg editor then again click on the 3-dot menu and select Edit Visually.
  4. Once you get into the visual editor, you will see the highlighted text in yellow.

As you can see, the text can only be highlighted in Yellow color with this method. This is because the Mark function uses Yellow color by default. However, you can change the color by doing some CSS customizations to your preference.

How to use CSS to change Color of Highlighted Text in WordPress Post:

Well, doing this is also not a rocket science. You can do it simply by copy and pasting the following code.

  1. First go to the Admin Dashboard.
  2. Now select Appearance and then select Customization.
  3. In the customizer, you will see Additional CSS option in the last line. Just click on it.
  4. Now copy the below code and paste there. And you are done.

mark { background-color: #ccff00 ; }

Here, #ccff00 is the hex color code in which you want to highlight the text. Just replace the code to your preferred one before pasting it.

Well, there is a drawback of using this CSS customization. Whenever you will change the theme, the CSS will be removed and so will be your color. But the HTML will be there and it will be again Yellow by default.

I will suggest to use some plugin to inject the CSS template like Simple CSS. So that your formatting will be there always,

Method 2:

If you are going to highlight your text manually, I will suggest you to do it with this method. This is because we will not need any kind of CSS integration along with this code we are going to use.

The process is almost the same for using this HTML code again.

  1. Simply open your post and click on the Text if you are using Classic editor. If you are using Gutenberg editor, click anywhere in the block, you will see 3 dots menu. Click on the 3 dots menu and select Edit as HTML from dropdown menu. Doing this in both editors will change the editor in HTML mode.
  2. Now find the text that you have to highlight and paste this code.

<span style=”background-color:Yellow;”>Text to highlight</span>

Or

<span style=”background-color:#ccff00;”>Text to highlight</span>

  • Now again come to the visual editor. If you are using classic editor then you can simply click Visual. If you are using Gutenberg editor then again click on the 3-dot menu and select Edit Visually.
  • Once you get into the visual editor, you will see the highlighted text in your desired color.

You can choose your favorite color and use in the place of Yellow(in the first code) or the hex code of the color (in the second code).

Well, you will not need any CSS for this code. But there is the disadvantage of using Manual highlighting that you have to repeat the whole process when you have to highlight another text.

How to choose the Color for Highlighting text in WordPress Blog?

Well, you can consider the color of highlighter according to the theme color of your blog or website. The color should be something that can attract most of the users. If you want a detailed color guide and hex code then you can visit the W3schools Color Hex code section. Just go and check the hex code of any color you want and replace it in the codes.

Verdict:

Changing the color of a text is not a rocket science. It is just 5-10 min work. However, in my opinion you should always go with installing Plugin and do it automatically. The plugin reduces your tasks and you don’t have to do it again and again.

If yoy wish to go by manual method then I will recommend to use Method 2. This method doesn’t need extra CSS task and reduced your effort.

I hope I have managed to solve your problem of how to highlight text in WordPress.

Recent Articles

Fake Email Generator: 7 Best Websites to Create Fake Email

First of all, why we need fake email generator? Many people are dynamic on the web due to which you visit many sites where...

How to Download Full Udemy Courses on Pc Instantly 2020

You may be wondering how to download full Udemy Courses on PC at once. Because it is very hectic to watch and learn on...

GBWhatsapp Apk Download Latest Version 2020

Let’s have a glance on the steps to download the latest version of GBWhatsapp which is given below. You will also learn how to...

12 Best Online Learning Platforms 2020 with Certificates

We all are stuck into our house due to the pandemic so, here’s the best way to handle it wisely. You got 36 days...

Powerful Call to Action Phrases That can Boost Your Sale to 30%

A call to action is a tiny thing that can make or break your online business. When your whole knowledge and power get packed...

Related Stories

1 Comment

Leave A Reply

Please enter your comment!
Please enter your name here

Stay on op - Ge the daily news in your inbox