Quick WordPress Tutorial
The Problems Caused By The Visual Editor in WordPress
I wrote this to help one of my clients’ PAs get her head around editing some of the more complex pages using the back end of WordPress. I thought I also post it here in case it’s useful to other.
In html code, most every element (That’s an image or a piece of text or whatever), is surrounded by tags (that’s text in crocodile brackets) which look a bit like this:
<SOMETHING>This is the something element</SOMETHING>
The tags contain information about the element but don’t themselves get displayed by the browser.
NB: You may have spotted that HTML tags are not unlike something that you might already be familiar with, – old fashioned word processing commands in DOS (pre MS Word)
When you use WordPress’s VISUAL editor, WP inserts the html tags for you. The downside though is that because you cant see the code your editing you’re not aware of the code breaks between the different elements and so it’s easy to inadvertently delete a tag.
This is especial true when editing the text, because it feels like we’re using a word processor but in fact that’s not a good way of thinking about what WP does. In reality it works more like a web browser, it hides the html but it’s still there. You make a change to the page and click update. WP then tries to reverse-render valid html code that once loaded in a browser closely resembles the document that you had created on the screen.
When it gets confused, WP tries to wrap up every thing that doesn’t make sense into paragraph tags and as you have seen that can lead to some pretty funky html.
So by using the TEXT editor option it’s easy to edit the text that you want to with out disturbing the tags at either end. I know it can take a few mins longer but it is safer.