How to Format Hyperlinks in WordPress | Underline | Change Color | Hover Color

If you are looking on how to format hyperlinks in WordPress, you have come to the right post. This post will give you all the information to format and change the appearance of the hyperlinks on WordPress website – whether it is underlining the hyperlink, changing its color or changing the hover color.

Hyperlinks are an important element in any blog post. They can be used to give your users easy access to great content both from within your website (internal links) or even on same page and externally. They also have SEO benefits.

However, many people don’t get the formatting right when it comes to hyperlinks. The thing about the hyperlink is that it should produce clicks. And the way to do this not only use them at the right place with the right anchor text, but also make sure they stand out from the other content on the page. You can use a couple of cool formatting options like change their color, underline, bold etc. to do this.

So how to format hyperlinks in WordPress? You can format hyperlinks either manually in WordPress editor or automate this by using a CSS. Moreover, your WordPress theme may also give you some ready made formatting options when it comes to way the hyperlinks appear on your website.

Let’s talk about this in detail-

First of all, it is helpful to understand some basic information about Hyperlink element in HTML (even if you don’t know anything about HTML, this is just a context)

Any link that you create in WordPress is represented by <a> tag and has the following HTML code

<a href=”URL”> Link Text (also called Anchor Text )</a>

where

• the URL is the destination URL where the user will jump to on clicking the link
• the anchor text is the text which is used for the hyperlink. For e.g. “Click here”

If you don’t understand this, don’t worry. Just keep in mind that any link is represented by “a” element.

Formatting Hyperlinks using CSS

CSS is the code that controls the way the content is displayed of the webpage. You don’t need to understand HTML code to execute CSS. It’s mostly a copy paste job, but understanding HTML gives you a context and can help if you want to customize this code further.

As explained above, since the hyperlinks are represented by “a” element. That’s why any CSS we apply to format hyperlinks uses the “a” syntax.

Note: The CSS that I have mentioned in this post works fine on Generate Press and few other themes. And this CSS formats hyperlinks on any WordPress Post (you will see .single-post in the CSS code) and not for pages. However, you can customize this CSS to make it work for your theme.

The way to add CSS is same for most websites and is very easy.

Just go to Appearance tab on WordPress Dashboard and Select Customize. Then select the “Additional CSS” option and copy paste the relevant CSS code

Underlining your Hyperlinks

You can underline your hyperlinks either manually by just selecting the text of the hyperlink and pressing CTRL + U. This is similar to formatting that you do on Google Docs or Microsoft Word.

However, if you want to automate this, you can underline hyperlink by using below CSS:

.single-post .entry-content a {
text-decoration: underline;
}

Remember, that the above code works for your blog posts and NOT on pages like About, Privacy page etc.

You can add this CSS by going to Appearance (on WordPress Dashboard)-> Customize > Additional CSS

Simply copy paste the above code and save it. See the magic as you will find every link you create on the post is now underlined automatically.

Changing Color of Hyperlinks

Now changing the color of hyperlink is similar to changing the color of any normal text. You can select the text of the hyperlink and change the inline text color by using a simple plugin called “Advanced Rich Text Tools for Gutenberg

Alternatively, you can also use the CSS below to automate the color of every hyperlink. The below CSS applies a dark blue color to hyperlink. You can change the color ‘darkblue’ to any other color of your choice

.single-post .entry-content a {
color: darkblue,
}

Example of a website which does this really well is Yoast.com which has all its hyperlinks underlined and formatted in blue color which stands out from the text.

Note that in some themes like GeneratePress, you get a default option to change the color of any hyperlink. You can do this by following the path below:

Appearance -> Customize-> Color->Link Color

Changing the color of Hyperlink Text and Underline

If you want to have a separate colors for the text and underline portion of hyperlink, you can even do that with CSS.

You can use the following CSS as an example- which applies dark blue color to the text and red color for underline (i.e. text-decoration-color). Of course, you can change the colors to your liking.

.single-post .entry-content a {
color: darkblue;
text-decoration: underline;
text-decoration-color: red;
} 

Changing the Hover Color of Hyperlinks

Hover color is the color you see when you move your mouse cursor over the hyperlink. It can be the same color as the text of your hyperlink or any other color,

Usually, people like to have a different hyper color to draw attention to hyperlink.

.single-post .entry-content a:hover {
color: red,
}

Note that in some themes like GeneratePress, you get a default option to change the color of any hyperlink. You can do this by following the path below:

Appearance -> Customize-> Color->Link Hover Color

Changing the Color of Clicked Hyperlink

You may also want to apply a different color for a hyperlink when it is clicked. This helps a visitor to understand the links which he has already visited.

For this, you will have to use a CSS as below, This changes the color of the link once clicked to red. You may choose to use any other color of your choice.

.single-post .entry-content a:visited {
color: red,
}

Making Hyperlink Bold

You may also want to make your hyperlink bold in some situations.

For this, you can use a CSS as below:

.single-post .entry-content a {
font-weight: bold;
}

How to remove underline from hyperlinks

You may face an issue that your WordPress theme applies a default underline to hyperlinks.

In such situations, you can use the CSS below to remove underline and other formatting from the hyperlink.

.single-post .entry-content a {
text-decoration: none;
}

Wrap Up

You can use the above options to format and style your hyperlinks to make them stand out . A little bit of CSS is all it takes to automate the formatting and make it consistent across your website.