Next in this Introduction to HTML in WordPress and Genesis 2 seminar we’re going to talk about HTML in the WordPress text editor. Let’s go over to the Headings & Lists page here and we’ll begin by editing a page so we can work with the text editor.
Views of the Text Editor
We’ll start off in our visual editor. You probably already know that WordPress has 2 different built-in views of the editor. It has the visual editor which as a general rule does a decent job of creating simple HTML and then you have the text editor which is intended to be the HTML editor and is the part of the editor where you can actually see the HTML.
You can see this is an h2 whereas you can’t see that in the visual view unless you open up the kitchen sink and then click your mouse in there to see what kind of a tag it is. But you don’t see the code sitting here in the visual view, you just see the rendered version of it whereas in the text view you don’t see the rendered version of it but you do see the HTML tags.
Then there is this new view that we added here with the ACE Editor for WP plugin. This new view, ACE, is the view that has this color coded version of the HTML. So you can see the color coded tags and you’ll see other things too as we work our way through this. Anyway, those are the 3 views of the editor once you have that ACE Editor plugin installed.
WordPress was really not designed for people to create HTML in it. You weren’t supposed to have to know anything about HTML. So you’d be in the visual view and all you did was some typing then you’d select text and assign HTML tags to it. That’s really what this is designed for and it does a fairly decent job of that.
However, it does a very poor job of complex HTML for a number of reasons. In the first place, it mangles the HTML when you switch back and forth between visual and text views and the reason it does that is because of the way it handles paragraphs.
Let’s just say that we wanted this as two paragraphs. If you place your cursor there and hit enter, it would automatically create a second paragraph and if you come over and look at that in the text view, you’d see there’s a new space there; however, there are no paragraph tags. It doesn’t create any paragraph tags, it just creates the space.
What the editor does is it reads this and then says, “Oh, I think he wants a paragraph there”, and so automatically then adds paragraph tags and that’s called the WordPress auto p function. What that means really is that WordPress strips out spaces and extra lines and things like that and attempts to interpret what you mean by extra line.
So if we update this and then view the page, now we’ve got 2 paragraphs here. And if we inspect the element, you can see we’ve got paragraph 1 and then paragraph 2. There’s the first paragraph, there’s the second paragraph. If we view the page source and come down here this used to be one long paragraph but because we hit enter there, it added another paragraph tag here.
If we come back over and we delete that and hit update and then say go back to our visual view, notice that paragraph stuff is not there anymore. Now if you refresh this there’s no space there. Let’s just view the source chart of this and see we can close our nav. Note what happened here, it put a paragraph tag in and then a break tag or a line break and then the closing paragraph tag but it no longer has two paragraph tags.
If we hit enter again, update and let’s reload it here, you can see it probably is doing exactly the same thing here. Update that, refresh this, view source chart and now it’s one great big paragraph, right?
There’s something else that you can do in this kind of a situation, you can use shift+enter. Now, shift+enter does not actually create a new paragraph, it creates a line break. So enter created the new paragraph, shift+enter created the line break. You can see that when we look at this and view the source chart, you’ve got this break tag in here as our line break. So you’ve got a paragraph, line break, paragraph, that’s what shift+enter does.
In any case, all of that happens without any code happening here. There are no paragraph tags in here. So the process that WordPress goes through to interpret where there is a line break without their being a new paragraph and where is there a new paragraph instead of that has a way of trashing HTML.
You can always use this ACE view here to create paragraphs. Notice when you open up the tag, it adds the closing tags so you can create the opening tag and it create the closing tag.
So that’s the problem with HTML in the WordPress text editor. Having said that is the problem, once you learn how to manage paragraphs and line breaks, the rest of the HTML should shake out fairly easily and that’s what we’re going to look at next with using headings and other HTML text elements.