Last updated on:January 29, 2017
Like the vaunted Hitchhiker’s Guide to the Galaxy, I feel like the WordPress Text Editor could benefit from having the words DON’T PANIC inscribed on the cover. If it had a cover, that is.
Nothing gives novice WordPress managers more angst than the Text Editor. Don’t panic. We’re gonna make this better.
Some Basic HTML
Words get on a website because of HyperTextMarkupLanguage, or HTML. Not sure if that’s supposed to be all one word, but whatever.
Words go between special bits of text called tags, so that your browser knows how to display them. The basic tags of HTML are:
- Paragraph tag: <p> — for paragraphs, obviously.
- Heading tags:
<h6>— for headlines.
- Lists: both unordered (
<ul>) and ordered (
<ol>), which each have list items, or
<li>tags for each item in the list.
- Link, or Anchor tag:
- Bold & Italicized:
Everybody good? Ok, the one thing you need to remember most is that each open HTML tag NEEDS a closing HTML tag.
So don’t write a paragraph like this:
<p>Whee, I'm an unclosed paragraph, la dee da
Write it like this:
<p>A Factual and Well-Written Paragraph</p>
That little slash means “close.” That closing tag is Very Important. Leave it out, and some crazy shit is gonna go down.
Okay, great. I think I can show you guys some markup now. Just promise me you won’t react like a goddam monster just jumped out at you during a horror movie.
The WordPress Text Editor Doesn’t Show Code, Just Markup
Code is scary and hard. Markup is just some frills and fancies on regular old text. You’re not writing functions, you’re not programming, so markup is not code. Now quit being silly and get down off that ledge, or I’ll poke you with this broom again.
The distinction between code and markup is important to understand. Because while not every WordPress manager should code, all WordPress manager should be able to fix markup.
The WordPress Visual Editor is great and all, but sometimes the quickest way to understand and fix a problem is to look at the Text Editor.
How to Improve the WordPress Text Editor.
The problem with the Text Editor is that it isn’t very pretty. The HTML tags and the text inside those tags are the same color, which makes deciphering the markup challenging sometimes. You have two alternative to this:
- Check out the markup using the browser inspector on the Front-End of your site (Right-click and select “Inspect” in most browsers. Void where prohibited, some restrictions apply).
- Install HTML Editor Syntax Highlighter, which adds all sorts of pretty colors to your markup. You can select a different theme on the right there, where it says “Material.” The “12” is for adjusting the font-size.
Problems to Look for in the WordPress Text Editor
Unclosed HTML Tags
<p>Who writes unclosed tags anyways? How does this even happen?
^ Nice thing about the HTML Editor Syntax Highlighter plugin is that it will give you a red warning indicator when a tag is not closed properly, like this:
Inline CSS tags are the cockroaches of any WordPress website. They do their best to hide, but have the potential to cause problems. I’m talking about things like:
<p style="color:red;">Who told you to put red on this? I tell you to do it? No I <em>did</em> <strong>not</strong>. It's outrageous! Egregious! Preposterous!</p>
text-decoration: underline; is ok, since the <u> tag isn’t a thing anymore. Same goes for text-align left, center or right.
<p class="p1">Somebody copied this in from Word, didn't they? Dammit Randy, I TOLD you to enable plaintext pasting!</p>
Not a big deal, it’s just junk markup that you don’t need. And if for some godforsaken reason someone tries to style “.p1” here, they’ll probably bork a good few pages.
What are your WordPress Visual Editor Pet Peeves?
Find yourself using the Text Editor to fix stuff the Visual Editor keeps derping up? Let me know what it is! Send an email to firstname.lastname@example.org or tweet @wpeditorpro, and I’ll take a look! I’m sure we can find a good solution for you.