This member finds that when she formats text in the WordPress visual editor that formatting gets applied to text that she intended to be unformatted. We discuss how HTML formatting is applied in the visual editor and talk about strategies to make sure that only the text she wants formatted is actually formatted.
Rick: So in the meantime, we’re going to take on a question from Angela and Angela, I’m going to unmute your phone there. Are you with us?
Angela: I’m with you. Good morning.
Rick: Perfect. Good morning. So why don’t you tell us your question?
Angela: Oh no, gosh. I have to go back and look at the email you sent.
Rick: Okay what you said was sometimes, many times, when I edit text in an already created post, the font sizes go crazy.
Angela: Oh okay, alright, yeah. And you wanted me to send you an example of that.
Rick: Well yeah, do you have an example that you can show.
Angela: I do. Can you look at my… how are we going to do that?
Rick: Yeah, I’m going to make you a presenter and then we’re going to look at your screen. Okay so now we’re in the position to see your screen as soon as you’re ready to show it.
Rick: Perfect, we can see it.
Angela: Right. So here we have… this is one of my real estate sites. And it’s just a simple post, you can see there’s a gallery in here. Now, if I highlight this and tried this a little while ago and it didn’t though. Hopefully, it’ll do it again. And then I…now I know it’s already gotten a big heading. Let me come down here, let me do this one. That’s what I’m talking about.
Angela: And then, part B to that is if I try… let’s say, if I try to highlight this and then I try to make it smaller… let’s say I want to make it a 4. Well, the whole thing goes into a 4.
Rick: Right. So go ahead and step backwards out of both of those actions. Okay so the deal is that what you are… that WordPress sees that block of text starting with the e and then going all the way to the period. So Eagle Ridge all the way through New York thru way, sees that as 1 HTML element. And so, when you go to a… when you change any part of that HTML element, it changes the entire element. So the only way to beat that is either to give yourself a space, a line break essentially, between that and the prior paragraph like you did just there with elephant or you have to manually put the heading tag in. You can actually manually put the heading tag in as well and it will give you a different result.
So for example, right there the elephant, right. Go ahead and select elephant there and change it to something.
Angela: That’s a 3. And then…
Rick: It’s not affecting the paragraph below or the heading above because it’s in its own separate line.
Angela: Right. And so that’s a 3, now let’s see if I make this one, that’s a 4, that’s a 3. You know what this is like, Rick? This is like when you take your car into the garage and you hear a noise and then you take it in and it stops. I’m sure I’ve done this before.
Rick: Well, the thing to keep in mind is that an HTML element is a block of stuff and WordPress…when you’re working in the Visual Editor, WordPress assumes that… well, WordPress makes assumptions and that is that there is a line break between each HTML element. And so, if you select something that is not separated by line breaks on either side, it will automatically apply that formatting to everything that it touches until it hits the line break.
Now, there is an exception to this and that is what’s called the span tag. And a span tag will apply a specific style to a specific part of something inside of a given HTML element. So for example, you can… that’s why inside of a block of text, you can say something is bold or inside a block of text, it can be italic. Or in fact, if you go back to your visual style and visual editor and select Eagle Ridge condo there, the 2nd line, Eagle Ridge condo in the 2nd line of that paragraph… now if you select bold, what’s going to happen is that it’s going to add a strong tag to both sides of that.
So if you go back and look at HTML now, you’ll see that it has a strong tag. There you go. You went right past it, that’s it. See how it says strong on either side of Eagle Ridge condo there? That’s similar to a span tag.
Now, go back to the Visual Editor again and put your cursor inside of Eagle Ridge.
Angela: This one?
Rick: Yeah, just click in there someplace and hit the bold button again to make the bold go away.
Angela: And it won’t.
Rick: Right because you don’t have anything selected. So what you have to do is select the part that’s got the span. If you just select the… yeah, oh actually…
Angela: Because we have a strong tag on either end.
Rick: Yeah. So for example, you could select that again and change the color of the font.
Angela: Can I just say something here? This is what I mean when I said it’s like when you bring your car into the garage, I’ve done all these types of things and I know basic HTML but of course, I’m going back in and I’m looking at the code and I’m thinking, “My God, I don’t see any code. Why is it doing this?” But like you said the other day, there’s got to be something somewhere.
Rick: Well, generally speaking, the issue is… I mean, I think the thing that you need to keep in mind is that each HTML element, unless it’s being adjusted via a span tag, each HTML element has to be separated from the next one by a line break. And the way you circumvent that, I’m going to show you how to circumvent that now, is to manually enter your tags.
So for example, go back to HTML and put an h2 tag around your Eagle Ridge link.
Angela: This one?
Rick: No, down where it was… see where you’ve got the Eagle Ridge link there? That’s what I’m talking about, at the beginning of the paragraph.
The first one… okay, under next to elephant one, okay.
Angela: Okay. What would happen if I made a line break right here now? With no code?
Rick: It will create a line break… probably nothing actually, in that situation.
Rick: But if you take that a title, put in h2 on one side of the tag and then go to the closing a tag and put an h2, a closing h2 after that… no, no. Not with a space, just with a closing h2 is all.
Angela: I’ll fix it.
Rick: Okay, you need a closing. That’s an opening, yeah. Okay.
Rick: Now, delete those spaces so is is right next to it, there you go. Now you know, the current HTML standard is that tag should all be lowercase. The old standard, tags were uppercase but that will give you a validation error if you’re using an uppercase H.
Okay so now just go ahead and say save and yeah, go to Visual. Let’s take a look at it. No, it automatically separates it out.
So if you wanted Eagle Ridge as an h1 and a link there, you would need to… that would take a little bit of extra CSS styling and what you would do is you would make Eagle Ridge a certain class and it would float left which would then allow the rest of the text to pop up beside it. And so, I thought actually that they would stay on the same line but obviously, WordPress doesn’t let that happen. And it interprets that as essentially, as a paragraph tag. It’s acting as if there was an opening paragraph tag in front of is and a closing one after thru way. And so…
Angela: You know, this might seem like a little thing but I’m sure anybody who’s in the beginner level, this is…
Rick: Absolutely. I actually… I have a client… I mean, I’m sympathetic to what you’re saying because I actually do have a client who had a page that completely misbehaved no matter what we did. I mean, I didn’t…we did all the right things, all the things I’m talking about here and it still messed up the text formatting. And we finally just…I mean, I am assuming that it was a database error that we couldn’t fix in the editor and we just created a new page and start it all over again because of that. So…
Angela: I’ve been there.
Rick: Well, let’s see. I’ve just noticed that Catherine says there is no sound. Do you still not have any sound, Catherine? Oh actually, in fact, a bunch of people have dropped off so I’m guessing that I really have some problems here.
Angela: Do you want to bag it and… what do you want to do?
Rick: No, no. I don’t think so. I’m just going to keep on going here. But in any case, that’s sort of the one fundamental thing to keep track of is the line breaks, essentially. And as long as you have… not that they are on separate lines but there’s actually that space between elephant 2 and the paragraph and elephant 2 and the paragraph below. That’s what really constitutes that line break and you can usually compel it to behave properly if you need to by simply adding paragraph tags around parts of it that… around the paragraph sections.
Angela: Yeah and the page that I was having the most difficulty with that prompted me… you’ll remember this from the other day, that prompted… was this page right here. And what I was trying to do… and I think you said or somebody said that they wouldn’t necessarily make this an h1 or an h2 but I tried to go in there and now, it won’t do it.
Rick: It doesn’t cause the problem. Now, it works fine.
Angela: The editor is working perfectly but the other day… I mean, go figure. You know?
Rick: I know, I’m magic. There are people here who know that and that all they have to do is call me on the phone and I say, “Okay well, let’s take a look at it and do this.” And it works perfectly even though that was what they’ve done 10 times before. So I do have a magic wand and so, don’t feel badly about that.
Angela: Just like I said, you go and take the care in the garage and everything is fine now.
Rick: That’s right.
Rick: Okay well, I mean I think that probably takes care of it, doesn’t it?
Angela: I’ll tell you in a second. Yeah, okay well now because I made it, I think I have to go back and make it little again.
Rick: Right, right.
Rick: Okay well, thank you very much. We’ll talk to you later.