Everything You Need To Know About The WordPress HTML Editor

Please note: this tutorial assumes that you are using WordPress 3.3.1 with the default Twenty Eleven theme installed.

Okay – I’ll be the first to say that a beginner’s tutorial for a feature that assumes you have a good knowledge of HTML (and by extension, CSS) may not make sense to you. But this tutorial is for people who are new to WordPress, not necessarily new to web design.

With that said, this tutorial intends to cover the features, functionality and limitations of the WordPress HTML. Although the editor may look straightforward enough, there are a few quirks and foibles that you should be familiar with.

When You Need To Use The HTML Editor

Even if you have very little interest in using the HTML editor, when you want to do certain things, you will have no choice. The most common HTML editor-only functions are:

• Inserting shortcodes
• Adding certain styling to fonts that aren’t available in the Visual Editor toolbar (although you can greatly increase Visual Editor functionality with the TinyMCE Advanced plugin)
• Pasting code from an external source
• Embedding certain items (such as video)
• Removing unwanted formatting inserted by the Visual Editor

Features

To access the HTML editor, click on the “HTML” tab in the top right of the WordPress Text Editor in the Add New Post/Page screen. You will be presented with this row of buttons:

The buttons to the left are no doubt familiar to you, whilst the buttons I have circled to the right will need a little more explaining. With exception to the “link” button (which will open the “Insert/edit link” screen covered in the Visual Editor tutorial), they will insert the following HTML tags:

• <strong>
• <em>
• <blockquote>
• <del datetime="currentdate">
• <ins datetime="currentdate">
• <ul>
• <ol>
• <li>
• <code>

When you are finished using any of the above tags, you can just hit the corresponding button again (which will have changed to “</yourtag>”).

You can also use keyboard shortcuts to activate these buttons. The WordPress codex advises the following:

The Quicktag buttons also have the accesskey JavaScript attribute set, so you may be able to use a keyboard equivalent (e.g., Alt-b for bold) to “press” the button, depending on your browser.

On Windows, IE and Firefox prior to 2.0b2 use Alt to activate accesskeys, while Firefox 2.0b2 uses Alt-Shift. On Mac OS X, Firefox uses Ctrl.

You can wrap existing text in any of the above HTML tags by highlighting it and then clicking the corresponding button.

With that out of the way, let’s take a look at the less obvious buttons to the right that I circled above.

more

Clicking the “more” button places the following shortcode in your text editor:

<!--more-->

You should place this shortcode where you wish for your teaser post excerpt to finish on screens where only the excerpt would be shown (as opposed to the full content of the post). Please note that in order for this shortcode to work, your theme must be set up to utilize it (by default, the Twenty Eleven theme is not).

I’ll be exploring shortcodes in more depth soon, so stay tuned!

lookup

This rather superfluous button allows you to look up any word in the answers.com search engine. I have no idea why it is included, as we are all perfectly capable of using Google. Perhaps WordPress has some sort of agreement or partnership with answers.com. Whatever the reason, you will probably never use this button!

close tags

This is a handy button, best explained with two screenshots.

A word of warning – this button can be temperamental if you have fiddled with the opening tags. But if it does detect foul play it will simply refuse to work, rather than spit out some mangled HTML.

fullscreen

Hitting this button will put you in minimalist paradise:

Although it is not fully apparent from the above screenshot (as whitespace does not make for a particularly interesting screenshot), hitting the “fullscreen” button will leave you with just your code and an extremely limited auto-hiding toolbar.

Feature packed it is not.

Limitations

So that’s it for the features – but to avoid frustration, you should learn some cold hard facts about the limitations that the HTML editor presents us with (both enforced and accidental).

Code

The HTML editor does not allow certain HTML tags and will remove them from your code. According to wordpress.com, the the following tags are allowed:

address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var

This code censorship is the source of endless frustration for many WordPress users, but them’s the rules!

Javascript

You can’t just paste javascript into your HTML editor – the developers of WordPress are of the opinion that such functionality is barely required.

In order to utilize Javascript in a post or page, you must place the code in a separate file and then “call” the file from the HTML editor. For more information, click here.

PHP

By default, WordPress’ HTML editor does not allow you to execute PHP code. Fortunately, you can get around that by installing this plugin.

The WordPress HTML Editor - this could be you.

Clean Code (Or Lack Thereof)

If you are a fastidious coder, you will be dismayed by the way that WordPress handles HTML. Whilst the editor makes some effort to make the HTML readable (such as by indenting <li> tags), it doesn’t do a great job.

If you are used to effortlessly readable HTML, you are in for a shock.

Quirks

The HTML editor, just like the Visual Editor, is far from perfect. It will do strange things to your HTML that will have you scratching your head (and maybe punching your monitor). It is something you will learn to live with.

A Workable Tool

For better or for worse, the WordPress HTML editor is not the same as trusty Notepad (which was my tool of choice, going back a decade).

It offers some useful functionality, but also has a habit of imposing unwanted restrictions or causing inadvertent mistakes. Given that its use is necessary for certain functions, you will have to learn to love it!

Creative Commons photo courtesy of Bev Sykes and Luis

Tom Ewer on Google+