Design a site like this with WordPress.com
Get started

Remove underline and change color of hyperlinks in WordPress themes (hack)

Hello WordPress fans! I haven’t been posting often lately because I’ve had a lot of work on my hands, but today I ran into an issue I wanted to share with you because I think you might find the solution useful. It happened that I was creating internal links for a client when she asked me to remove the underline and change the color of all links. She had the Twenty twenty theme installed, but guess what, it didn’t allow me to change the color of hyperlinks, let alone removing the underline…

How I fixed this

Where to find the additional CSS field

So what did I do to fix this issue without installing a different WordPress theme? The answer is simple: I injected custom CSS code, which may sound more complicated than it is. All you need to do is go to the admin area and click on customize, then click on additional CSS and you will see a window which most likely doesn’t have any code in it yet.

You can see the ‘additional CSS’ field in the image below on the left hand side. In the window you can see what the hyperlinks looked like before I applied the new code (bright blue and underlined).

Bright blue hyperlinks and underlined
This is what the hyperlinks looked like before inserting the CSS code

The only thing you have to do is add the following code in the window:

.entry-content a, 
.entry-summary a, 
.widget a, 
.site-footer .widget-area a, 
.posts-navigation a, 
.widget_authors a strong,
.entry-content a:hover, 
.entry-summary a:hover, 
.widget a:hover, 
.site-footer .widget-area a:hover, 
.posts-navigation a:hover, 
.widget_authors a strong:hover {
    box-shadow: none;
}

/* Standard links */
a {
    color: #FE2EC8;
}

Look what happened to the links! I’ve changed the color to pink and removed the underline. If you don’t like pink that’s OK, simply change the color code at the end. You can click here to choose a shade you love.

Pink hyperlinks and not being underlined
This is what the hyperlinks look like after the CSS code has been changed

This hack is not just for the WordPress twenty-twenty theme, you can use it in ANY template of your choice. Have fun and if you liked this post please comment, like and subscribe!

Lots of love, Debby

Published by Debby Winter

I will accompany you with the creation of a successful and well-ranking website that is deeply meaningful and exquisite on all levels. Learn SEO marketing with free tools, SEO optimization and software reviews. Offering affordable SEO services for small business in San Francisco, California, and at an international level.

8 thoughts on “Remove underline and change color of hyperlinks in WordPress themes (hack)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: