Change Color Of Links In A WordPress Theme

Posted by Jeff

on November 21, 2007

Have you found a WordPress theme that you really liked but one little thing like the color of the links stopped you from using it? It really isn’t that hard to change the color of the links in a WordPress theme.

The theme file you need to edit is the stylesheet or style.css. To edit this, or any of your WordPress theme’s files you need to set the proper file permissions on them on your hosting account. I suggest you just CHMOD the whole wp-content folder to 666 or 777. Or at least the themes folder in the wp-content folder. You could do this with an FTP client too but that will involve a few extra steps.

I prefer editing the files right from within the WordPress dashboard. In the dashboard click Presentation, then Theme Editor. Usually the first file is the stylesheet and is already open. Make sure by looking to the right and clicking it to open it in the editor. Before you make any changes in here copy all the text and paste it into Notepad or your favorite text editor. This way if things go bad you can restore it real quick. The code you are looking for looks something like this below:

a:link{
text-decoration: none;
color:#333;
}

a:hover{
text-decoration: underline;
color: #333;
}

a:visited{
text-decoration: none;
color:#333;

You can choose to have different colors for regular links, links that have been already visited and when a mouse is hovering over them. You can also choose to “decorate” the links. Just change the color # to any 3 or 6 digit hex color code you want and click update file on the bottom right. View your site and and admire your handy work!

Some possible text-decoration:

none – Text has no decoration.
underline – Text is underlined.
overline – Text has a line over it.
line-through – Text has a line drawn through it.

Find hex color codes here –> Hex Color Codes or do your own Google search.

Similar Posts:

WordPress Guide, WordPress Theme

Tags: WordPress Guide, WordPress Theme

If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.

Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!

Comments

Comment by Laura on November 21, 2007 @ 7:15 pm

You’re site looks great Jeff and you always give clear and concise information in all your posts.

I personally know how helpful you are since you have received way too many emails from me about making changes on my blog.

Thanks again.

Laura

http://www.moneymakingmathteacher.com
http://www.moneymakingmathteacher.com/blog

Comment by JK Swopes on June 5, 2008 @ 10:48 pm

I have been looking for information on how to do this all day. While my theme didn’t have those exact lines, it led me in the general direction, from there I just had to add a line of code to hold my color information.

Thanks for the help!

Comment by How to be a player on December 17, 2008 @ 4:38 pm

Do you know how to do this on the wordpress classic theme? Seems to change some link colors, but not all?

Comment by Jeff on December 17, 2008 @ 7:30 pm

I really haven’t messed with the Classic theme but there may be other links to change in the stylesheet. Look for more with an H tag in front of it like this:

h1, h1 a, h1 a:hover, h1 a:visited,

Comment by Pat on February 11, 2009 @ 1:15 am

I have to say a big thank you for helping clarify exactly how to get my link text color changed! I kept on reading other threads before I found yours and all they did was confuse me. In 5 minutes I had it done and now I feel like a proper geek! lol.

thanks again

Comment by Home Decor on March 1, 2009 @ 4:50 am

I must say this are pretty basics if you intend to do serious blogging..but thanks anyways for the help.Many might need it

Comment by Baja247 on May 2, 2009 @ 1:23 pm

Changing the colors of links in wordpress also helps when we are trying to make it look like the color of the ads. I remember changing my link color to red increased my CTR to 7%.

Comment by Lauren on June 10, 2009 @ 1:08 am

This doesn’t work for my blog theme… any suggestions? Maybe I’m putting it in the wrong place? I don’t have a a:link tag…

Help!

Jeff Replied:
June 10th, 2009 at 9:05 am

Lauren, all themes are coded differently and there is no easy way to guess what you are dealing with. The link might be in another file or called something else over riding the stylesheet. You are just going to need to dig through all the files or ask for help on a forum somewhere or pay someone to customize your theme.

Comment by Giovanni Farotto on June 29, 2009 @ 8:13 am

Thanks.
This is what I was searching for, and it was hard to find.
The explication is really clear.
Thanks again.

Comment by kay on June 29, 2009 @ 7:47 pm

O.M.G thank you so much, I have been trying so many different codes and nothing worked… and here is your blog… and this is wonderful I got to change the colors… thank you so much..keep up the good work love your site=]

Comment by The home remodeling on June 30, 2009 @ 3:53 pm

I agree that changing the color on the desired design is not difficult. There are even free visual editors that you can download online which makes changing colors or other modifications much easier. I used few free tools that helped me change the header color and search box in my theme.

Comment by Michael Erik of My Affiliate Program blog on August 2, 2009 @ 3:25 am

Great tips here, thanks! I bookmarked this. I was able to find and change mine by messing with the stylesheet a bit. Like one of the other people, at first I couldn’t find mine.

Just took some experimenting to find the right one and viewing my blog in another browser to see what I changed! Was fun actually, and I’m no geek so it doesn’t take programmer level knowledge by any means.

Don’t get intimidated with this stuff. I used to. Not anymore. Sites like these help – again thank you!

Comment by affordable websites on September 15, 2009 @ 11:15 pm

Can this also be implemented in HTML:TAGS? I have been looking for more creative ways to design my website. This is one really cool trick.

Comment by Meryle on October 26, 2009 @ 10:47 am

Thank you, Jeff. This information is really hard to find by searching the WordPress forums and docs.

Comment by Vinish on November 24, 2009 @ 6:37 am

Thanks Jeff,
I was looking out for changing the color link,this tutorial really helped me a lot since i am new to blogging.

Comment by n0manarmy on March 19, 2010 @ 3:03 pm

Thanks for the tip! Worked great for straightening out the links and urls on the theme I used for my site. Before it was a light gray link on a lighter gray for the text, made it near impossible to see.

Comment by Vivian on June 11, 2010 @ 8:22 pm

Wow, what a big help this is, I am just learning WordPress and I thought I was stuck with the theme colors.
Now I’ve got the color I want.

Comment by Lavender on July 6, 2010 @ 1:05 am

Ok the hardest part was finding the style sheet file, but I got it to work, yeah me!

Comment by Massage Holster on July 30, 2010 @ 3:32 pm

It took some work, but I finally got it to work. Now I need to find a way to find the right shade of color, that seems to be the hardest part now.

thanks!

Comment by Telecom plus on August 12, 2010 @ 12:43 pm

Got it to work eventually, these wordpress tips on here are so useful, thanks.

Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.