Change Text or Link Color using Text Editor in WordPress

Better way is to Change Text or Link Color using Text Editor
Some WordPress users are not comfortable in editing codes using a CSS Editor and so they prefer to change the styles directly inside the HTML post itself, which is completely fine. Between inline styling and CSS editing, inline styles takes precedence.

While doing so, for example, when changing a link color, they use Visual editor where the text or link colors can be set by simply highlighting the link and clicking the colour drop down menu. However, I noticed this approach is causing a color issue. That is, you pick a color from the Visual editor which looks great in the Draft but it shows differently and returns to default theme color when the post is published.

I know. It happened to me, too and it is frustrating.

The truth is, it isn’t, especially if you do the Text editor approach. If you stick to the Visual editor, changing color of a link depends on how you highlight the text. I have not figured out the proper way to highlight a linked text but I observed doing this way results to <span> outside anchor <a> tag.

As you can see below, at the bottom of the post, it says:

p >> span >> a

Taking a closer look on the code using Text editor, what happens when you highlight a link: The span has the color style but the anchor link has none (thus it is using the default theme color)

<span style="color: #0000ff;"><a href="">shows</a></span>

It should have been <span> inside anchor <a> tag. When you highlight a link, at the bottom of the post, you should see:

p >> a>> span

Another thing, when you use Visual editor to change a text or link color more than once, a new <span> is created on top of another which creates messy codes.

Say, first, I picked the color blue for my text.

This is the text for my link

When, I switched to the Text tab to see the code which looked like:

<a href=""><span style="color: #0000ff;">This is the text for my link</span></a>

Then later on, I changed my mind and wanted a red text. This is how the code now looked like:

This is the text for my link
<a href=""><span style="color: #0000ff;"><span style="color: #ff0000;">This is the text for my link</span></span></a>

Did you notice the two spans? Only because the red (#ff0000 in hexa) is near to the text element, this color takes precedence.

Inconsistent styles like paragraph spacing could occur if you switch back and forth from Visual to Text tabs editor. For a lesser headache, I think the latter is a better approach.

Better way is to Change Text or Link Color using Text Editor

I find it easier to use the Text editor than the Visual editor. I feel I have more control in the styling. I use it more often and somehow I no longer experience an issue when I want to change color of my anchor links.

<a href=""><span style="color: #0000ff;">This is my website name.</span></a>

Although it is perfectly ok to use <span> inside an <a> tag (see above code), I tried not to use <span> unless necessary.

For the purpose of simplicity, when changing styles of a link, you can drop the <span> tag and add the style to <a> directly.

Here is how I do it:

<a style="color: #0000ff;" href="">This is my website name.</a>

The use of <span> inside an <a> is recommended only if a portion of the link’s style is to be changed:

This is my website name.
<a style="color: #0000ff;" href="">This is my <span style="color: #0000ff;">website name.</span></a>

And as you already know, if you want to change specific color of a plain text (without a link), we use <span> tag:

<span style="color: #0000ff;">This is my text.</span>
Ymatruz is the author of poetry book: The Coffee Cries Foul. She founded hoping to accommodate works of other poets and writers, anywhere in the world. She also writes about her blogging and migration experience on PoetsGig. Her motto: "By experience you learn. By embracing mistakes, you become a master of perfection."
Follow on: Twitter | Facebook | Instagram

Thank you for reading. Tell us what you think.