Note: This discussion is mostly an encouragement to edit the code directly when needed, although most users will rely on the Visual Editor. This discussion also pre-dates the release of the new Block Editor in WordPress 5.0, which I discuss briefly in a later post since I was curious about the change.

In WordPress, when you are editing a post (either an existing one or creating a new one), you have the option of using the “Visual Editor” (where what you see is similar to what will be displayed once the post is published) and the “Code Editor” (which allows you to edit the actual HTML as plain text, for the most part). The difference is analogous to driving an automatic transmission or a standard: the automatic is easier but perhaps not as enjoyable and certainly useless when, for example, you need to push-start the car.

It’s only through the Code editor that you can see what elements are being used to create the visible effects. For example, I discover that the title of my post a heading 3 (“h3”). This means that if I want to add subheadings, I should start with h4, which I do in this post.

The heading level for these posts begins at h3.

A note of clarification: even in the Code editor, you see only the HTML that is used for the words you are writing and the images you are inserting. Each post page, once displayed, contains much additional HTML (taken from the WordPress template). To see this HTML, you must display the page in a browser and then “view source” (which all browsers allow, one way or another). It was only through this method that I learned the title of the post (as described in the paragraph above) was tagged h3.

Even if you prefer using the Visual editor, it’s good to keep the Code editor in mind as a diagnostic tool if something looks strange and will not change easily in the Visual mode. For example, for some reason in one of these WordPress posts, my final words—something like “The End”—displayed in red typeface. When I switched to Code, I saw that somehow WordPress had put them in a division (<div>) with a quirky name, such as <div 65sq2>. Not only could I easily get rid of the red (deleting the div tags) but I understood, more or less, what had occurred.

Note: It is common in HTML to begin each paragraph with “<p>” and end each paragraph with “</p>”—the slash being the marker for closing a tag. In the Code editing view of WordPress, however, these tags do not appear, but are added when your page is rendered as long as you leave an extra carriage return between paragraphs. If you add them manually, while editing in text, it will help you see where your paragraphs begin and end, but if you switch to Visual view, the <p> tags will be removed and replaced with carriage returns (true to the visual goal). Sometimes I add the paragraph tags, knowing it’s both not necessary and likely they will be removed automatically. (Don’t ask me why I add them—perhaps it’s that adding extra carriage returns is a bad habit in other contexts, such as word processing/desktop publishing.)

Most people who write web logs, I assume, will simply use carriage returns in the Visual mode and that will be that.

The next post discusses CSS entries, briefly, and touches on <h3>, <h4>, and <blockquote>.

Leave a Reply