{"id":11385,"date":"2022-07-15T07:24:21","date_gmt":"2022-07-15T14:24:21","guid":{"rendered":"https:\/\/www.ryrob.com\/?p=11385"},"modified":"2026-05-26T05:46:38","modified_gmt":"2026-05-26T12:46:38","slug":"how-to-highlight-text-wordpress","status":"publish","type":"post","link":"https:\/\/www.ryrob.com\/how-to-highlight-text-wordpress\/","title":{"rendered":"How to Highlight Text in WordPress (Gutenberg and Classic Editor) in 2026"},"content":{"rendered":"

Today, we’re talking about how to HTML highlight text in WordPress<\/strong> (in both the Gutenberg editor and Classic editor), to get a highlighted result like this:<\/p>\n\n

Here’s an example of highlighted text.<\/span><\/p>\n\n

As a new blogger when you’re just getting your blog off the ground<\/a>, all of the little technical components of learning WordPress can be a bit of an unwelcome challenge\u2014for example, figuring out things like how to highlight text in WordPress, (or change font colors<\/a> and font sizes<\/a>) for the various different text elements on your WordPress blog.<\/p>\n\n

Well, the good news is that highlighting text in WordPress has gotten much easier over the years. As of 2026, Gutenberg (the default WordPress block editor) has a built-in toolbar option for highlighting text in just two clicks \u2014 no HTML required. We’ll cover that modern toolbar method first, then the HTML approach (which still works and is useful when you want a custom highlight color or need to do it in the Classic editor).<\/p>\n\n

I’ll show you three ways to highlight text<\/strong> in WordPress: (1) the modern Gutenberg toolbar method (fastest, recommended), (2) the HTML method in Gutenberg (for custom colors or advanced control), and (3) the HTML method in the Classic editor (for those still using it).<\/p>\n\n

Now, let’s walk through highlighting text in WordPress\u2014without performance draining plugins that negatively impact your blog SEO<\/a> and page load speeds.<\/p>\n

How to Highlight Text in WordPress (Gutenberg and Classic Editor) in 2026<\/strong><\/h2>\n
    \n \t
  1. How to Highlight Text in Gutenberg (Modern Toolbar Method)<\/a><\/strong><\/li>\n \t
  2. How to HTML Highlight Text in Gutenberg (Advanced \/ Custom Colors)<\/a><\/strong><\/li>\n \t
  3. How to HTML Highlight Text in the Classic WordPress Editor<\/a><\/strong><\/li>\n \t
  4. When to Highlight Text on Your WordPress Blog (and Why)<\/a><\/strong><\/li>\n \t
  5. FAQ<\/a><\/strong><\/li>\n<\/ol>\n
    How to Highlight Text in WordPress (Gutenberg and Classic Editor) in 2026<\/a><\/div>Click To Post on <\/i><\/a>
    <\/div><\/div>\n\n

    Alright, now let’s dive in and talk about highlighting text in WordPress!<\/p>\n\n

    \n\n

    <\/a>1. How to Highlight Text in Gutenberg (Modern Toolbar Method)<\/strong><\/h2>\n

    This is the easiest and fastest way to highlight text in WordPress \u2014 added natively to Gutenberg in WordPress 5.8 (mid-2021) and refined since. It takes about 5 seconds and requires zero HTML knowledge.<\/p>\n\n

    Here’s the 3-step process:<\/p>\n\n

    Step 1: Select the text you want to highlight.<\/strong> Just click and drag with your cursor inside a paragraph block (or heading block \u2014 it works on both).<\/p>\n\n

    Step 2: Click the small arrow at the right end of the inline formatting toolbar that appears above your selected text.<\/strong> This opens the additional formatting options dropdown.<\/p>\n\n

    Step 3: Click “Highlight” from the dropdown menu, then pick a background color from the color swatches.<\/strong><\/p>\n\n

    That’s it. Your selected text now has a colored highlight applied \u2014 visible immediately in the editor with no HTML editing required. You can also re-select highlighted text later and click the same option to change the color or remove the highlight entirely.<\/p>\n\n

    Pro tip:<\/span> If you want the same highlight color across multiple posts (like a brand-consistent yellow highlight for callouts), most modern WordPress themes let you define custom color swatches in your theme settings \u2014 which then show up in the highlight color picker, so you don’t have to remember hex codes.<\/p>\n\n

    The toolbar method is perfect for 95% of highlight use cases. If you want something more advanced \u2014 a custom color not in your theme palette, a highlight on inline code, or you’re still on the Classic editor \u2014 keep reading for the HTML methods below.<\/p>\n\n

    <\/a>2. How to HTML Highlight Text in Gutenberg (Advanced \/ Custom Colors)<\/strong><\/h2>\n

    The (best) process for highlighting text in both the Gutenberg and Classic editors, is actually exactly the same from a technical standpoint\u2014it just looks a bit different, due to the visual changes in Gutenberg vs the Classic editor.<\/p>\n\n

    In both cases, you’ll be adding a background color HTML style attribute to the text you want to highlight.<\/strong><\/p>\n\n

    That’s by far the cleanest, easiest and most performance-friendly way to highlight text in WordPress (without the need for installing plugins or using other tools that inject unnecessary code into your blog). So, let’s walk through this process.<\/p>\n\n

    Here’s a quick GIF (looped video demonstration) showing how to highlight text in the Gutenberg WordPress editor:<\/p>\n\n

    \"How<\/p>\n\n

    I know this GIF moves a little quickly (and isn’t easy to read on mobile devices). So, here’s a step-by-step tutorial on highlighting text in WordPress using the Gutenberg editor (in 2 easy steps):<\/p>\n

    1. Select the “Edit as HTML” option in the paragraph where your text is contained<\/strong><\/h4>\n

    \"Edit<\/p>\n\n

    Once you’ve clicked on the “Edit as HTML<\/em>” option, you’ll see your paragraph of text converted into something that looks like this (with all of the HTML attributes of your text now visible):<\/p>\n\n

    \"Screenshot<\/p>\n\n

    From here, this is where you’ll now add the background color style attribute (into the HTML version of your paragraph) which will highlight your text.<\/p>\n

    2. Add the background color style attribute (in HTML mode) to highlight your text<\/strong><\/h4>\n

    \"Background<\/p>\n\n

    This is the step that actually highlights your text, by adding this background color style attribute to the beginning your text:<\/p>\n\n

    <span style=\"background-color: #fdf2d0;\">example of text you want to highlight<\/span><\/code><\/p>\n\n

    Know that you can of course swap out the color code<\/em> here for any 6-digit hex code<\/a> or HTML color name<\/a> you want to use as your highlight color\u2014and you’re all set!<\/p>\n\n

    Don’t forget to wrap up the portion of text you want highlighted with a closing <\/span><\/code> tag (as pictured in the screenshot above)\u2014otherwise the rest of the text in your paragraph here will automatically become highlighted.<\/p>\n\n

    Once you’ve finished highlighting your text, just switch back to “Edit Visually” in the Gutenberg editor like so:<\/p>\n\n

    \"Edit<\/p>\n\n

    Now, your text will be highlighted, and it’ll look like this:<\/p>\n\n

    \"Highlighted<\/p>\n\n

    Alright, you’ve now learned how to highlight text in the Gutenberg WordPress editor\u2014so let’s walk through doing the same thing with the Classic editor.<\/p>\n

    <\/a>3. How to HTML Highlight Text in the Classic WordPress Editor (Legacy)<\/strong><\/h2>\n

    Note for 2026:<\/em> The Classic Editor is now a legacy choice \u2014 it’s been a plugin (not bundled with WordPress core) since 2018, and Gutenberg has matured significantly. If you’re starting a fresh site in 2026, we recommend Gutenberg. But the Classic Editor still works and is officially supported through at least 2027, so if you’re using it, here’s how to highlight text.<\/p>\n\n

    If you’re writing a blog post<\/a> in the Classic WordPress editor and want to emphasize a particular section of text by highlighting it \u2014 it’s just as easy as the HTML method in Gutenberg.<\/p>\n\n

    Here’s a quick GIF (looped video demonstration) showing how to highlight text in WordPress via the Classic editor<\/a>:<\/p>\n\n

    \"How<\/p>\n\n

    Because that GIF moves pretty quickly and isn’t as easy to see on mobile as it is on desktop, here’s a step-by-step breakdown of what’s happening when you want to highlight text in WordPress using the Classic editor (in 2 easy steps):<\/p>\n

    1. Use your cursor to select the text you want to highlight<\/strong><\/h4>\n

    \"Example<\/p>\n\n

    Once you’ve selected the text you want to highlight, it’s time to switch your editing mode over to “Text Mode<\/em>” in the upper right hand corner over your editing pane:<\/p>\n\n

    \"How<\/p>\n\n

    Now, you’ll be viewing the HTML version of your blog post\u2014and this is where you’ll add in the attribute that highlights your text.<\/p>\n

    2. Add a background color HTML style attribute (in text mode) to highlight your text<\/strong><\/h4>\n

    \"Screenshot<\/p>\n\n

    This is where you’ll actually be highlighting your text, by adding the following background color style attribute to your text:<\/p>\n\n

    <span style=\"background-color: #fdf2d0;\">example of soon-to-be highlighted text<\/span><\/code><\/p>\n\n

    Like in the Gutenberg tutorial above, you can also swap out the color code here to set any custom highlight color for your text.<\/p>\n\n

    Just remember to close out the portion of text you want highlighted with a closing <\/span><\/code> tag, otherwise you’ll highlight the rest of your content in the post (from where you started the background color change).<\/p>\n\n

    Now once you switch back to “Visual Mode” in your Classic Editor, here’s what that highlighted text will look like:<\/p>\n\n

    example of highlighted text<\/span><\/p>\n\n

    And voil\u00e1! You’ve highlighted your text in the Classic Editor! \ud83d\udc4f<\/p>\n

    <\/a>Final Thoughts: When<\/em> Should You HTML Highlight Text in WordPress (and Why)?<\/strong><\/h2>\n

    Now that I’ve spent a few minutes showing you how<\/em> to highlight text in WordPress… we haven’t yet touched on why<\/em> you’d want to highlight text in the first place, and when the application of highlighted text can actually have a positive impact on the content of your blog.<\/p>\n\n

    Here are a few of the reasons why I highlight text within my blog content:<\/p>\n