Tag Archives: HTML

New Articles About In-Page or -Post Highlight Boxes and the WordPress HTML Editor

Often you want to highlight a block of text in your post or page. Thesis provides two highlight boxes, Note and Alert, that can surround a single paragraph. The article “In-Post or -Page Highlight Boxes” shows you how to make your own colored highlight boxes that can not only highlight any amount of text you want, but can change the attributes of the text within it. Oh yes, it does show you how to use the Thesis boxes, too. This article is filed under the Tips > Posts & pages section.

Most of us start off using the WordPress visual editor. It’s reasonably WYSIWYG, and you never have to remember those codes to make things bold and stuff. Then comes the day when we have to use the HTML editor! Panic! A new article, “How and When to Use the WordPress HTML Editor,” tells you when and how to use the HTML editor, just as the title promises. No more mysteries! This is the first article in the Newbies > General Information section.

I have so many ideas for new articles, and so many half-written ones, that I don’t know what I’ll be offering you next. Let it be a surprise!

How and When to Use the WordPress HTML Editor

The WordPress post and page editor has two modes: visual and HTML. The visual mode is a relatively recent addition and shows the post or page in a mostly WYSIWYG fashion (it isn’t perfect). With the visual editor, you don’t have to know the HTML codes for headlines, bold text or lists. All you have to do is to highlight text and click a button.

The HTML editor is just that: it shows the page in all its HTML glory, and requires that you type the correct codes in to format the text or do other tasks that are handled by buttons in the visual editor. Many people use the HTML editor exclusively — I do. And the true “stick-shifters” go so far as to disable the visual editor entirely in their user settings, looking down their noses at anyone who uses the “crutch” of the visual editor.

Each editor mode has its place and use. You are not a wimp for using the visual editor, nor are you a true geek for using the HTML editor. It’s mostly a matter of personal preference, except in one case:

In order to enter HTML code into a post or page, you must use the HTML editor. If you enter the code in the visual mode, it will just appear like any other text entered and not be interpreted when the page is displayed.

Figure 1: The HTML editor tab
Figure 1: The HTML editor tab

Switching to the HTML editor is easy. In the upper right corner of the edit screen are two tabs: visual and HTML. Click on the HTML tab to enter HTML editor mode. That’s it.

It’s generally ok to switch back to the visual mode once you are done entering your HTML code. According to the nature of the code, you may not be able to tell that you’ve entered it. Some code, such as an HTML form, may show up in their intended visual state. Most others will not. You will see neither the code you entered, nor the way it will appear in your post or page when it’s published (that’s one of the imperfections of the visual editor). You have to click the preview button to see if what you entered will do what it was intended to do.

When is it not good to switch back and forth between the visual and HTML editors? There is no rule for this — it’s on a case-by-case basis. Generally, HTML forms, drop-caps, alert and highlighting boxes, and similar code that sets spans, paragraphs, or divs will do ok when switched to the visual mode.

But some code doesn’t like the visual editor at all and will disappear or be corrupted by anything but the HTML editor. It’s mostly very complex code that will be affected this way, but there’s no way to know if the code you just entered will be squashed by the visual editor until you try it. I wish I could be less vague, but I can’t.

So, bottom line, except for when you’re entering HTML code, use the editor you are most comfortable with. If you don’t want to be bothered by HTML formatting code, use the visual editor. If you know the codes, don’t mind typing them in, and can “visualize” the way an HTML page will look, use the HTML editor.

I hope you have enjoyed this brief guide to using the visual and HTML editors in WordPress. Remember that your comments are always welcome, and that you can email me directly by clicking the “Contact” button in the button bar.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!