WordPress – Taming The Advanced Editor

Adding simple HTML code to a post should be easy, but it can lead to major frustrations. Why? Because the Advanced Editor cleans your code for you. Unfortunately, it often changes your code so that it no longer works!

While I understand arguments for cleaning the code (errors in your HTML could break the Theme), I believe that if you want to add code, then you should be allowed to do so without it being changed.

I use HTML to create rounded text boxes within my posts. Unfortunately, my code fell foul of the Advanced Editor’s cleaning process. Below I summarise some of the solutions I discovered to this problem:

Turning Off The Advanced Editor

There is a simple solution: turn off the Advanced Editor. This should solve all the problems. I know that quite a few users have done this and it may be worth considering if you often add HTML. However, for many users this is not an ideal solution as they want to use the Advanced Editor.

Using An External Text Editor

If you only add HTML occasionally, leave the Advanced Editor on and use it for posts without HTML. Write posts with HTML using an external text editor, then copy the content into WordPress.

WordPress ‘cleans’ your code when the Advanced Editor opens your post. Errors don’t occur the first time HTML is entered and saved, they occur on subsequent saves (the Advanced Editor re-opens the post after the save).

This means you should not have any problem if you:

• create the post content in an external text editor
• create a new post in WordPress (or edit an existing one)
• go to the Code Tab page
• paste the post contents from the external file
• save or publish the post

The code will break the next time you edit the post (immediately if you Save and continue), but there will be no problem unless you save again. If you need to edit the post, do so in the text file, then repeat the above.

Turning the Advance Editor Cleanup Off

If you often enter your own HTML, but still want to use the Advanced Editor, then you might want to consider turning it’s cleanup option off. I stumbled upon how to do this on Thu Tu’s Smacking WordPress Editor.

To summarize how to turn off the advance editor cleanup:

Download the wp-includes/js/tinymce/tiny_mce.js file using an FTP program and use a text editor to change the following (near line 167) from:

this._def("cleanup", true);

to

this._def("cleanup", false);

Save the file, then ftp it back up to the server, overwriting the original.

Stopping New Lines Before <div>

For me, turning the advance editor cleanup off solved most of my problems. Only one problem remained: WordPress automatically puts a new line before a <div>. In the case of my rounded text boxes, this means that there is a blank line before the first line of text.

Of course this only happens on subsequent saves, not the first one and can be easily solved by manually deleting the new line. However it is annoying to have to do this everytime you edit the post.

I found the following ways to stop this happening, but none of them are really a viable solution for me, because of other problems they introduce:

It is possible turn off the automatic <br />, by Disabling WordPress’ slap-happy approach to <br /> tags. However, this also turns off the automatic <br /> in places where I actually want them.

Urban Giraffe has a plugin by John Godley to disable the WordPress wpautop function, which formats your posts. However, I found that it stripped the blank lines between paragraphs, even if I manually added <p> or <br /> tags. John’s post mentions this problem and gives a link to a WordPress Support page, but the suggestions there didn’t work for me. I only tried this quickly and didn’t persist, so it may be worth you trying.

In both cases, the solutions cause more work than just deleting the new line that WordPress adds before <div>, so I’ve settled for that.

Alternative To Turning The Cleanup Off

Turning off the Advance Editor cleanup, turns off all the cleanup. If all you need is the ability to use <div> without it being turned into <p>, there is a gentler option, outlined in a comment on this WordPress Support page.

To summarise, you need to:

• remove p/-div[*] from line66 of \wp-includes\formatting.php
• remove line 25 from \wp-includes\js\tinymce\tiny_mce_config.php

See the support page for more details on these changes.

This works well, but I’d rather have the cleanup totally off.

Conclusion

So, which of the above methods do I use? Well truthfully, I’m not sure yet. Maybe all of them!

I started by writing my posts in an text editor and I like this for another reason as well: I can create my posts offline. I do have an offline copy of WordPress running on my USB drive, but it’s easier to just open a text editor. Yes, I’m lazy! But I often write for a few minutes in between other things and a text editor is quicker.

I am very tempted to turn the Advanced Editor off, because I add my own HTML to most posts. I don’t really use the Advanced Editor features and I’m comfortable with HTML. However I am persisting with it for the moment – but I have turned off the Advanced Editor Cleanup to make life easier.

So what do you do? I’m interested in hearing of any other methods you know of.

Tags: advanced editor, WordPress