Using the editing panel

There are two editor windows. The “Visual Editor” option looks slightly less daunting to those not familiar with HTML. The “HTML Editor” shows the underlying code that the browser uses to display the web page, and is useful in debugging.

Please make use of the private Test page where you can try things out without them being visible to other site visitors.

Getting started – Visual Editor

  1. Make sure you are logged in – the Admin Bar should be visible across the top of the browser window.
  2. Select Help pages -> Test page from the Admin Bar.
  3. Select Edit page from the Admin Bar.
  4. Make sure the Visual editor is selected (using tabs at top right of editing panel).
  5. Click in the editing panel at the end of the existing text.
  6. You could now try adding a couple of paragraphs of text.
  7. To save your amends, click the Update button at the right of the page.
  8. To view the amended page, click the View Page link in the Admin Bar.
  9. To continue editing the page, click the Edit Page link in the Admin Bar.

In general, you should find the Visual Editor behaves much like any other text editor.

By default, the editor applies the HTML paragraph tag (<p>) to each paragraph you type. But because this is a (more-or-less) WYSIWYG editor, it does this behind the scenes. The Path indicator at the foot of the panel shows which tag is currently applied to the selected text.

The buttons along the top allow you to apply different HTML mark-up (or tags) to selected text. The tags in the Format drop-down (which is usually showing Paragraph) will apply to the whole of any selected paragraph(s). Most of the other buttons are usually applied to a chunk of selected text within a paragraph (the <strong> tag was applied here, which is often displayed in bold text – hence the B marking the button).

For more information about the different tags/buttons – including when and how to use them – see the Working with text page.

The HTML Editor

Most of the time, you will probably want to work with the Visual Editor, which does a fairly good job of generating the appropriate HTML code via the various buttons above the Editor panel. But sometimes you need to see what’s going on behind the scenes, and clicking the HTML tab allows you to do this.

The HTML Editor shows the underlying code that the browser uses to display the web page, and is useful in debugging, or when the Visual Editor just doesn’t seem to be doing what you want. In fact, on pages where Wingfinger has used more complex mark-up, switching to the Visual Editor can sometimes destroy the structure – and so we disable the Visual Editor for those pages. Please don’t change this setting!

However, even with the HTML Editor, what you see is not exactly the HTML that gets used to create the web page. WordPress does a certain amount of post-processing on the text and code that appears in the Editor panel. In particular, the HTML editor interprets a double return (ie: a blank line) as the start of a new paragraph. This has the advantage that it’s possible to type paragraphs quickly and cleanly without having to precede them with <p> and end them with </p> – but the disadvantage is that you’re not seeing the actual code.

Obviously, to make full use of the HTML Editor, you have to be prepared to learn a bit more about HTML.

Troubleshooting

Most pages should be fairly easy to edit, but those with more complex mark-up can be challenging. If there are pages where Wingfinger has had to insert a bit more HTML than usual to get the desired effect, it’s important to preserve the structure of the various tags when you do your editing – and it’s possible to check this, using the HTML editor.

For example, the <div> </div> tags we often use are a way of grouping things together as an item – a sort of generic container. You’ll need to make sure that these are unchanged.

Testing the code – if you’re feeling adventurous

Warning: This section is not for the techno-phobic!

The basic rule of HTML is that – with a few exceptions like <img/> and <br/> (a line break) – every opening tag needs a corresponding closing tag. Sometimes the opening tag will contain some “attributes” – like class="intro".

As a general rule, if the whole page breaks, it often means that you’ve got an opening tag without its corresponding closing tag. One way to check what’s happening is to click the “W3C Validator” link in the Admin Bar. This checks the page against the official W3C Validator (but it can’t check Private pages like this one).

If the validator detects some errors, tick the “Show source” option and Revalidate. This allows you to see the line of code that the error occurs in – and also to see what WordPress has done with your efforts in the editing panel. (Sometimes the automatic paragraph feature seems to insert <p> </p> tags in unhelpful places.)

Don’t be too put off if the validator thinks it’s found lots of errors. The good news is that fixing the first one will often cure all the others at the same time. Although the error messages can be hard to unravel, the answer will probably be in there somewhere.