{"id":31961,"date":"2021-11-20T15:00:08","date_gmt":"2021-11-20T14:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=31961"},"modified":"2021-12-27T14:18:08","modified_gmt":"2021-12-27T13:18:08","slug":"how-to-easily-change-link-color-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-easily-change-link-color-in-wordpress\/","title":{"rendered":"How to Easily Change the Link Color in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress comes with a lot of flexibility out of the box, but <strong>changing link colors<\/strong> is not there by default. Some themes may have the option to change link color <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-wordpress-theme-customizer\/\">using the WordPress theme customizer<\/a> (or elsewhere), but that is not always the case. In this tutorial, we will show you how to easily change the link color in WordPress \u2013 especially easy if you are using the default Twenty Twenty-One theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What we would also like to do, though, is discuss <strong>some reasons why you might want to change your link color<\/strong>, and some reasons why you\u2018d want to refrain from it. Here\u2018s what we\u2018ll be talking about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#changing-link-color-pros-and-cons\">Changing Link Color Pros And Cons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-change-link-color-using-code\">How to Change Link Color Using Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-change-hover-and-visited-link-color-using-code\">How to Change Hover and Visited Link Color Using Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-change-link-color-using-the-twenty-twenty-one-theme-and-a-plugin\">How to Change Link Color Using the Twenty Twenty-One Theme and a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"changing-link-color-pros-and-cons\"><\/a>Changing Link Color Pros And Cons<\/h2>\n<p>[\/vc_column_text][vc_column_text]We\u2018ll go out on a limb and say that, if you are reading this article, you are looking for a way to change the color of links on your WordPress website. It can be done, it\u2018s easy enough, but we\u2018d like to talk about some of the reasons<strong> why you should or shouldn\u2018t do it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the <strong>pro<\/strong> side of things, we have <strong>aesthetics<\/strong> \u2013 perhaps your theme\u2018s default link color doesn\u2018t agree with your overall design, and you want to make it fit better. Perhaps you want to make the links stand out more or blend in better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the <strong>con<\/strong> side of things, we have the <strong>force of habit<\/strong>. Some design features have been around for a very long time, and people have come to expect certain things: for instance, that a link is blue and underlined, though it doesn\u2018t have to be.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As far as <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/\">improving accessibility<\/a> is concerned,<strong> it should be immediately clear what is and what isn\u2018t a link<\/strong>, and any text should stand out from the background for better legibility. Changing the color of your links can, therefore, both hamper and improve the accessibility of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are sure you want to change the link color on your website, keep on reading: we will show you how to do it using CSS, or, if you are using WordPress\u2018s default Twenty Twenty-One theme, with the aid of a plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-change-link-color-using-code\"><\/a>How to Change Link Color Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]We have started by creating a post and populating it with some generic placeholder text and a couple of links. You can see that they are underlined.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-With-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Link With Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-With-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-With-Underline-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-With-Underline-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-With-Underline-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to change the color of the link, you need to add some CSS to your website. CSS stands for Cascading Style Sheets, but what it boils down to is bits of code which mainly have to do with the presentation of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add CSS to your website, navigate to <strong>Appearance\/Customize<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Select <strong>Additional CSS<\/strong> from the customizer\u2018s left hand-side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"597\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-768x473.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-620x382.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, enter this code into the CSS field, taking care not to disturb any code which might already be there:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">a {\r\ncolor: #XXXXXX;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you need to replace the XXXXXX placeholder with a <a href=\"https:\/\/www.color-hex.com\/\" target=\"_blank\" rel=\"noopener\">color hex code<\/a> of your choice. We have gone with a light yellow here. Click <strong>Publish<\/strong> for the CSS to take effect.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"579\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-CSS-and-Publish.jpg\" class=\"attachment-full size-full\" alt=\"Add CSS and Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-CSS-and-Publish.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-CSS-and-Publish-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-CSS-and-Publish-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Add-CSS-and-Publish-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this is how our links appear now.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-Link-Color-Change.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS Link Color Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-Link-Color-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-Link-Color-Change-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-Link-Color-Change-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Additional-CSS-Link-Color-Change-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer using an RGB color command, you can do that, too. Simply replace the color: <em>#XXXXXX<\/em> bit with <em>color: rgb(X,X,X)<\/em>. Each of the X\u2018s in this code can be expressed numerically as an integer value in the range of 0 to 255 or as percentages from 0% to 100%.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-change-hover-and-visited-link-color-using-code\"><\/a>How to Change Hover and Visited Link Color Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using the a element only affects the default state of the links. But suppose you want to change the color of your links in the hover or visited state. In that case, you need to modify your CSS code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to change the on-hover color of the link, use this code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">a:hover {\r\ncolor: #XXXXXX;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the visited link color, use this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">a:visited {\r\ncolor: #XXXXXX;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use none, any, and all of the above pieces of code. In our case, the default state is in yellow, the hover in blue, and the visited in red.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-Colors.jpg\" class=\"attachment-full size-full\" alt=\"Link Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-Colors.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-Colors-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-Colors-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Link-Colors-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Remember that you can use the<em> color:rgb<\/em> code as described above for any CSS you want.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-change-link-color-using-the-twenty-twenty-one-theme-and-a-plugin\"><\/a>How to Change Link Color Using the Twenty Twenty-One Theme and a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are using WordPress\u2018 default Twenty Twenty-One theme, you can use a plugin called <a href=\"https:\/\/wordpress.org\/plugins\/options-for-twenty-twenty-one\/\" target=\"_blank\" rel=\"noopener\">Options for Twenty Twenty-One<\/a> to add more options, such as changing the link color, to your theme. After having installed the plugin, navigate to the <strong>Appearance\/Customizer<\/strong> and select<strong> Colors &amp; Dark Mode<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"591\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Colors and Dark Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There you now have the option to change <strong>Primary Link Color<\/strong>. You can enter a hex code or select a preferred color for the picker.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"603\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-Primary-Link-Color.jpg\" class=\"attachment-full size-full\" alt=\"Colors and Dark Mode Primary Link Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-Primary-Link-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-Primary-Link-Color-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-Primary-Link-Color-768x478.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Colors-and-Dark-Mode-Primary-Link-Color-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to change the link color in the on-hover and visited states of the link, though, you will need to do it using CSS as described in the section immediately above.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, changing the link color is no big deal: you can do it in seconds, simply by pasting a tiny bit of code which we have handily provided for you. Should you do it, though? That\u2018s up to you. While we encourage you to pursue your aesthetic choices, do bear in mind the expectations most website visitors have of links, and don\u2018t forget about accessibility.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to make your website design a better fit for your brand or simply to add more color to it? Change link color in WordPress: we will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":31978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-31961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=31961"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31961\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/31978"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=31961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=31961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=31961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}