Links not Appearing as Links After Post is Published

Please help. I have still not been able to solve this problem.

Without a link to your site, there’s really no way for anyone to begin to help.

Duh! I’m sorry I forgot that. https://comfortclimateservice.com

No problem – easy to do :). But I’m not sure where those links are – can you be more specific? Sorry if I’m out to lunch here.

I’m the one that was out to lunch and forgot the links. Here’s the link to the post

I’ve looked at this a bunch, and it’s certainly problematic – not sure why, but I’d start by fixing the CSS errors here:

<style type="text/css">PICK AN ELEMENT NOW - or type CSS selector(advanced) {
font-size: 30px !important;
color: #444 !important;
}
PICK ELEMENT FIRST! {
font-size: 20px !important;
color: #222 !important;
}
</style>

See this:
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcomfortclimateservice.com%2Funderstanding-hvac-energy-efficiency-ratings%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Not all of those are problematic, but the above ones might be. You also have quite a few mark-up errors that could be a problem as well:

https://validator.w3.org/check?uri=http%3A%2F%2Fcomfortclimateservice.com%2Funderstanding-hvac-energy-efficiency-ratings%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Did you, by chance, move an old site to WP – there’s a lot of outdated, deprecated HTML – so that may be problematic too.

I have to say I’m overwhelmed at this point ?? I definitely didn’t move an old site to WP. Now, I’m trying to wrap my brain around understanding why there’s so much outdated HTML code. I’m using the Andrina Lite theme and have only made the following (3) changes to the CSS.

.index-info .index-info-three{
margin-left:75px;
}

.widget_inner.last{
margin-left:150px;
}

#menu li a {
    margin-left:20px;
    padding:7px;
}

I am using some plugins to enhance the editor. How do we trouble shoot where the problems are coming from? Thank you for your help.

From what I can tell the editor-style.css file changes the behavior of the editor. Do you think the problems are in that file? Do all themes have to have a file to change the editor behavior or is the functionality part of the base WP? I don’t see a way to attach a file, so I’m including the content below.

[No need for all that CSS]

No no, you don’t want to mess with that at all.

It’s probably using an editor plugin – basically it’s adding a whole lot of inline CSS code — which really isn’t ideal. For example, a whole bunch of text is like this:

<p style="text-align: left;"><span style="font-size: 16px;"><b>

It’s just always better to use external CSS code – easier to maintain, better coding, faster loading, etc.

And there’s a bunch of this kind of font tags for color – that’s deprecated. Again, not sure where it’s coming from.

<div class="textwidget"><FONT COLOR="#000000">

I think some of the mark-up errors are due to plugins – they tend to do that… but they may not be a big deal.

It’s up to you whether to try to fix the problems. Your site actually looks really great :). So far as the links, what’s weird is that changing the CSS here:

a {
    color: #454444;
    text-decoration: none;
}

works – but that will likely change other links on your site. But trying to isolate the links in your text doesn’t work – maybe I’m missing something.

Try this – in the HTML for those links add a class:

<a class="speciallink" target="blank" href="https://www.faceboo.com/comfortclimateservice" title="Facebook">Facebook</a>

Then add to the CSS:

a.speciallink {
   color: red;
}

I added the following code to the custom css but it didn’t change the link color in the posts. Just to make sure I cleared the cache. `a {
color: #454444;
text-decoration: none;
}
`
Since the default editor is so limited, I’ve been experimenting with the following editor plugins. 1) EditorFontsize; 2) Font; 3) Ultimate TinyMCE

I even disabled all of them, created a draft post with 4 links but the links are still not highlighted. They work but not noticeable. HTML for the example is <a href="https://comfortclimateservice.com/wp-admin/post.php?post=833&action=edit">https://comfortclimateservice.com/wp-admin/post.php?post=833&action=edit</a>

The links are now blue – this CSS IS working:

a, a em, a strong {
    color: #1B8BE0;
    text-decoration: none;
}

OK, this is very strange. I took the following code for links from the editor-style.css and pasted it in the custom css.

a,
a em,
a strong {
    color: #1b8be0;
    text-decoration: none;
}
a:focus,
a:active,
a:hover {
    text-decoration: underline;
}

Now magically, all the links work. What would cause the same code in the editor-style.css not to work when it works fine if I add it to the custom css?

BTW, the code you suggested above for adding a class to each link then adding the code to the custom css did work. I of course would like to avoid having to do that for every link in every post.

Probably a CSS error is preventing all the CSS from working OR it’s getting overridden by other, more specific CSS. That’s why I was puzzled — I was trying to add CSS to the stylesheet (in Firebug) and it was not working at all. That’s also one reason why internal CSS is a problem – it just makes more layers of CSS to try to handle :). But if it’s working (more or less), cool. And yes, you certainly don’t want to have to add that class every time if you don’t have to.

I noticed one more strange behavior. Before I put the link code from the editor-style.css into the custom css, the tags were black. Now that code changed all the tags to blue as well as the links. Why did this happen as well?

The Categories are all blue now as well.