Nerdy bits – fixing problems, using code

The TEXT Editor

Most of the time, you will probably want to work with the Visual Editor, which does generates the appropriate code via various buttons to style your text, and does a half-way job of showing what that might look like. But sometimes you need to see what’s going on behind the scenes, and clicking the HTML tab allows you to do this.

The Text shows the underlying code that the browser uses to display the web page, and is useful in debugging, or when the Visual Editor doesn’t seem to be doing what you want.

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

Apply HTML code

In the Text editor you will see the styles that mark up particular sections of text applied as <tags>. When you highlight a selection of the text and click on the format buttons at the top of the editing window, the tags will get applied to either end of the selection (see styling text for more on this). You can also apply the tags one at a time – at the start of the text to be formatted, press the button for the style you want once; and at the end of the text. You will notice the button will have changed it’s name to start with a ‘/’. This encloses the text in the style you want to apply.

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 code than usual to get a special behaviour or widget, 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 TEXT editor.

For example, lists are made using special [shortcode] coding that calls in certain groups of posts. You’ll need to make sure that these are left alone.

Testing the code – if you’re feeling adventurous

Warning: This section gets really nerdy!

The basic rule of HTML is that – with a few exceptions like <img/> (a picture) and <br/> (a line break) – every opening tag needs a corresponding closing tag. Sometimes the opening tag will contain some “attributes” specified, eg:  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. See if any of the style buttons have a ‘/’ in front.

The good news is that if you find the missing one and fix it, it will often cure all the others problems the same time. Although error messages can be hard to unravel, the answer will probably be in there somewhere.