Do you want to learn how to change the link color in WordPress?
Changing your link color gives you more control over the design of your website and can make it easier for your visitors to navigate.
In this video, we’ll show you how to change the link color in WordPress, step by step.
0:00 Intro
0:41 Changing color and underlines with code
6:41 Using Simple Custom CSS and JS
8:07 Using CSS Hero
–Related Links–
Want to read rather than watch? https://www.wpbeginner.com/wp-tutorials/how-to-change-the-link-color-in-wordpress/
Find hex codes, color palettes, design trends, and more at: https://color.adobe.com/create/color-wheel
–Top Resources–
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
In this video I'm going to show you how You can change the link color in WordPress this is super helpful for many Reasons first you want people to know What links are on your site so they can Read more on your website or any other Links that you're sending them to if You're selling something on your site Then you want them to be able to see the Links that you're showcasing if you're Not using a button this is also really Helpful one of my favorite Parts is to Be able to send people to your affiliate Link so if you have affiliate links and You earn a commission off of those links You want to make sure that people can See that those are links on your site And so changing the color is very Helpful and I'll show you how you can do That and we'll show you a few different Ways so you can pick the one that works Best for you so let's Dive In so as an Example this is my site and we see Here's a link here and we'll get into Why this is a different color here in a Second then you scroll down and then These are the links most themes will Have a particular color for your link And there's three different areas that You want to look at for the link color But all themes will have it you just Might want to change it to match say Your brand color or maybe your logo Color what have you and in this case
When it's just sitting here this is Called a link so it's an active link When I hover over it it changes it might Change in your case it might not but That's another color or another effect That you can have on the link and then Many times when people click on the link And then they come back then it might be Another color showcasing that it's been A visited link and it's usually purple And in my case it doesn't change but Yours might do that so let's walk Through the three areas that you can Change and the colors that you can do to That so head over to our WordPress Dashboard And from here we want to go to Appearance and we want to hit customize We are going to be using a little bit of Code don't worry I have a link in the Description below to have the code that You'll need so that you don't have to Worry about doing it yourself and if you Still don't want to deal with code don't Worry the next method will work for you Perfectly so down here at the bottom Depending on the theme that you have on Your site you might see different things Up here but everyone should see an Additional CSS link down here and this Is where we can add additional bits of Code I'm also going to click on my blog so I Can actually see the links as we're
Making changes you'll be able to see it Immediately so the first code that I'm Going to do is I'm going to do just the Active link so that will change and you See as soon as I put in the a for active And then this color which is an orange Color then it automatically changes you Can play around with these what's called Hex codes to change it to whatever color You want And don't worry if you don't know what Color you want a really good resource is Adobe color wheel I think they've Changed it to just Color.adobe.com and from here you can Review what color schemes you want if You don't know the color that you want You can come in here and explore or Create your own you can also look at Trends so if you're not sure what the Color scheme you want you can look and See what looks good to you when you find Something that you like you can click on It and then you can copy these colors Here so once you click copy then that's The color Let's show you what this looks like I'm Going to copy this one we'll go back to The customizer and instead of this Orange I'm going to Ctrl V and paste it In there Once I do that then you see my color has Changed It's a really good resource if you're
Wanting to add your own most people Already know their brand and they'll Already know their color scheme so they Can do that as well The second area that we want to do is we Want to change the way that the Hover or when I hover over at what it Does so I'm going to come down here Again the code will be in the written Tutorial in the description below but I'm going to paste this amount in here And let's just talk about this real Quick so this means the link so the Active link on Hover so when I hover Over it what is it going to do right now I've got this color and it already does Text underline but when I hover over it What does it do now so it changes to That red color and what we can actually Also do is because it already is Underlined let's say none And so you see when I hover over it it Removes the underline Now the third area that you can look at Is once they've already visited a site What color do you want it to be and so Then we'll have just a slightly Different version of that as well so I'm Going to bring the code over here and Paste it in so again it's for an active Link visited so once they've visited What are we going to change the color to And I've gone to these two and so now You see that the color is different
Now you see as I scroll back up here we Talked about this earlier you see how This is actually quite different it's Doing that as well for these colors but Maybe you don't want that to happen on All the links on your site now if you Don't want the links to change Everywhere on your site maybe you just Want the links to change within your Post or a page I'm going to show you This bit of code that you can add as Well so I'm going to paste this in here And I'm going to remove all of this Similar information but all it's doing Is only going to affect the entry Content which for WordPress is a post or A page so these items will be different And so now when I scroll just these Items will be different and then when I Scroll back up this will not be changed So you just want to do entry content in Front of all of that and then it will Just happen on their content inside the Poster page so let's click publish and Now that will be on the site no matter What we do now say you went through and You figured out the link colors you Figured out everything and you want to Keep this even if you change themes I'll Show you how you can do this by using a Plug-in that'll hold all this content And it even if you change a theme then It'll still have this I'm going to copy This to make sure I keep it
And I'm actually going to remove this Because I'm going to add it somewhere Else If you already have it there then don't Worry The next plugin that you can use if you Want to change things but keep your code Is by using something called Simple Custom CSS and JS so let's go to plugins Add new and we want to search for simple Custom CSS and Js This is the plugin we want so let's go Ahead and install this and then you want To stick around to activate it as well Great now that's activated we can come Over to the left and say custom CSS so Let's add custom CSS here And we can name it link color And they give us a little bit of Information here if we want you can Remove that or you can just start below It I'm going to remove this and then I Want to add That bit of code that I had And we can keep everything over here the Same and then let's just click publish So now when I go to my site and refresh It it should still have all of those Changes here like I want Which is perfect now what if you just do Not want to touch or mess with any kind Of CSS or editing or knowing any code I Get that and that's why this method will
Be for you the method I'm going to use Is also using a plugin but it's called CSS hero and it does a fantastic job of Kind of letting you see what you want to Change and then changing it on the back End so you don't have to know any code So you want to it is a premium plugin so You'll want to download that we can go To CSS hero Once you purchase it you can log in and Then you can download the plugin and Then we'll head back over Let's go to plugins add new From here we're actually going to upload The plugin instead you need to choose File and let's install it now and once It installs we'll also want to activate It as well Once it's activated now we have this big Button proceed to product activation It'll go out and ask you for your Username and password and then you can Get the license so give you the license For that website So let's do that Everything is activated now we can make Our adjustments so let's show you what This looks like So now that we have it we can go to the Front end I'm going to refresh Everything so now we have this button Here I'm going to go ahead and click That and it'll start to activate Everything so everything that I see I
Can make these changes So now I can scroll down to where my Links are and the changes that I want to Make I can click on the link And come over to typography and now I Can click on this and the great thing About this is I don't have to know what Hex code I need to use I simply go up And down this line and find whatever Colors I think are good and you see as I'm making the changes they change on The link so I can see which ones I like Which ones I might not want to use Okay so I'm gonna just pick something Really obvious so for that That's what I'm going to use and what's Great about is it'll bring all that code Down so I don't have to know the code I Don't have to write the code but then I Can see it in action so we have active Now you see we have our hover so we want To change that in order to do that we Can come up here under normal and change Hover so now we're changing our hover Status I can come over here Let's do something else that's really Obvious And Let me go ahead and submit that and once That does then I can come over and look At this as well And then the final one we want to work On is the visited so once they visit the Site what color do I want it to be we
Can change that as well and I'm going to Make it obvious And so when I click on any of those then That will be active as well once you Make any of your changes you can click Save down here and then when you go to Your website And hit refresh then you'll see those Changes in action so now I've got my Active got my hover and then the green Is because I've already visited that Site and what's cool about CSS hero is You see there all of these changes Anywhere that I'm hovering you could Change the navigation links as well it Can do so much more but we won't get Into all the details of it if it's Something that's important for you the CSS hero you can change pretty much Everything on your site with not having To worry about any code And if you want to dig in a little bit More into CSS hero you can watch this Video next as I cover how to install and Use CSS hero for your website and I'll See you over there
