How To Underline Text in WordPress Without Errors Quickly

When writing on your WordPress site, simple styling like underlining can help highlight important words or phrases and point out key parts of your message to your readers. To underline text in WordPress, simply pick the text you wish, then hit Ctrl+U on Windows or Command+U on Mac. That’s all. This keyboard shortcut can use both the block editor and the classic editor.

Another keyboard shortcut for text justification exists. Your text will be justified if you merely select it and hit Shift+Alt+J on Windows or Command+Option+J on Mac.

Here’s the full guide on how to underline in WordPress, all methods, and everything.

Why Use Underlining in WordPress?

Underlining text in WordPress can improve readability, highlight keywords, and add visual interest. While WordPress’s default formatting options give you bold and italic text, the underline function can be used for emphasis, especially in headers, CTAs, or important info. In this guide, we’ll go over several ways to underline text in WordPress, no matter which editor or plugins you’re using.

Methods to Underline Text in WordPress

1. Using Keyboard Shortcuts

For a simple solution, WordPress supports underline keyboard shortcuts:

Windows: Press Ctrl + U

Mac: Press Command + U

This shortcut works in the Classic Editor and may work in some third-party text blocks within Gutenberg. However, it doesn’t work directly in Gutenberg’s paragraph block.

2. Underlining in the Classic Editor

Underline text using the Classic Editor or the Classic Block within Gutenberg.

• Open the Classic Editor by going to your post or page.
• Select the text you want to underline.
• Click the underline button (U icon) in the toolbar or use the Ctrl + U / Command + U shortcut.

This approach works if you’ve installed the Classic Editor plugin or are editing through a Classic Block.

3. Using the HTML Underline Tag in the Block Editor

For more control over the formatting, you can manually use HTML within the Gutenberg editor:

• Add a paragraph block or any other text block.
• Highlight the text you want to underline.
• Switch to the HTML editor by clicking the three-dot menu on the block toolbar and selecting “Edit as HTML.”
• Wrap the text in <u>…</u> tags. For example: <u>This is underlined text</u>.
• Switch back to the visual editor to confirm that the text is underlined.

This method is quick and requires no plugins, although it involves a bit of HTML.

4. Adding an Underline Plugin for Gutenberg

Some plugins add additional styling options to the Gutenberg editor, including underline functionality. Examples include:

• Advanced Gutenberg Blocks
• TinyMCE Advanced (also called Classic Editor Add-on)

Here’s how to use a plugin like TinyMCE Advanced:

• Install and activate TinyMCE Advanced from the WordPress plugin repository.
• Go to Settings > TinyMCE Advanced and enable the toolbar option that includes the underline button.
• Return to your page or post, open the Classic Block, and you should see the underline option available on the toolbar.

Plugins like TinyMCE Advanced offer additional formatting tools, which can be useful if you’re frequently customizing text.

5. Adding Underline Using Custom CSS

For consistent underlining across your site, you can add custom CSS:

• Go to Appearance > Customize and open the Additional CSS panel.
• Add CSS code to target specific text elements, like links or headers. Here’s an example:

.custom-underline {
    text-decoration: underline;
}

• Save your changes. Now, whenever you want to underline text, you can add the custom-underline CSS class to the specific block or element in Gutenberg using the “Additional CSS Class” field under “Advanced” settings.

This method gives you site-wide control, allowing you to apply underlining consistently without repetitive manual work.

Important Considerations

• Avoid Overuse: Overusing underlined text can confuse readers, especially if they assume it’s a link. Use underlines sparingly for genuine emphasis.
• Accessibility: Ensure that underlined text stands out clearly and doesn’t interfere with readability, particularly for users with visual impairments. Underline sparingly, especially in paragraphs.
• Color Consistency: To avoid confusion, differentiate underlined text from links by using distinct colors. Use CSS to set specific colors for links versus non-link underlines.

FAQs

Conclusion

Underlining text in WordPress can make your content more readable and highlight important information. Although the underline option isn’t as visible in Gutenberg as in Classic Editor, there are several ways to do it, from HTML tags to custom CSS and plugins.

Now you can make your content more awesome and user-friendly so important information doesn’t get lost.