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
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:
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
Alt-bfor bold) to “press” the button, depending on your browser.
On Windows, IE and Firefox prior to 2.0b2 use
Altto activate accesskeys, while Firefox 2.0b2 uses
Alt-Shift. On Mac OS X, Firefox uses
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.
Clicking the “more” button places the following shortcode in your text editor:
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!
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!
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.
Featured Plugin - WordPress Facebook Plugin
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.
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).
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!
By default, WordPress’ HTML editor does not allow you to execute PHP code. Fortunately, you can get around that by installing this plugin.
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.
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!