You can change the “dock view” to make it easier to view the source code by clicking the three vertical dots and selecting a different dock view. In Chrome, right-click on a hyperlink on your website, then select “inspect”.īy default, the dev tools in Chrome opens up in split view. Only the codes will be different.Įditing hyperlink colors with CSS in WordPress
Free plans require an upgrade to a premium plan to activate CSS customization.įor example purposes of this tutorial, the free Twenty Twenty-One theme is being used on a self-hosted WordPress installation. The inspect tool in Chrome, or another browser developer tool, (discussed above to find the HEX color value to use) and the CSS customizer within your WordPress admin panel.ĭo note that this applies to paid WordPress plans.
How to edit the CSS to change hyperlink colors in WordPress In the block editor, use a paragraph or classic block, click the three vertical dots in the toolbar, then select “Edit as HTML”.Ĭhange the color to any HEX value you like, or use a color keyword like blue, red, green, purple, etc. Using the classic editor, go into text mode to edit the HTML. That will add the correct HTML to your content.Ĭhange hyperlink color with HTML in WordPress Once installed and activated, highlight the hyperlinked text, then add a color style using the “text color” button. The text color shortcut button is added to the default toolbar.
To install it, go to your plugins page, select “Add New”, search by keyword for “advanced editor tools”. Formerly, it was called “TinyMCE Advanced”. This plugin has a button to add the HTML and the color code for you.
To find the HEX value of a color, open a web page in your browser, right-click on the color you want to use, click “inspect”, then click on the color box within the inspector. If you cannot find the exact shade you want, use the browser inspector tool to pick a color from your site.įinding the HEX code for adding custom colors These are the easiest types of WordPress themes to customize. Left-click then drag the cursor around to select the color you want. If your theme does not have a color picker, keep reading for alternative ways to change the hyperlink color in WordPress.Ĭlicking “select color” opens up the color picker.
The “Appearance > Customize” menu is where to find them. Not all themes will have the same customization options. Within that section are multiple labels to apply different colors to different elements without touching code.įor the purposes of only changing the hyperlink color, the “link color” tab changes those. If you have paid for a WordPress theme, it is more likely that the developers will have included more customization options.įree themes are generally for DIY site builders who are content to do some coding.Īs an example, the Socrates WordPress theme has a “colors” menu. Most premium themes have more coding included, reducing the time-consuming part of editing with CSS. Head to the Appearance menu, under themes, click on customize. Start by exploring your WP theme customization optionsīefore diving into any coding, see if your theme makes light work of style changes. Those that do not can have the color of hyperlinks changed using the CSS customizer. Page builder plugins have site settings for hyperlink colors. The Advanced Editor Tools plugin adds a shortcut button to your toolbar. Using HTML, wrap your hyperlink within a tag. How to change the hyperlink color in WordPress