Update March 23, 2008: The code that I originally wrote below based on Roland O’Connor’s post didn’t work. I subsequently found this WordPress Forum topic, which had the correct code to replace, and I’ve corrected the post below.

Also, I wrote a follow-up post to this one with more tips on using plugins and hacks for fixing this editor problem. So read this post, and then check out Plugins and hacks for improving the WordPress TinyMCE editor

Have you ever embedded code in your WordPress editor, only to find that saving the post causes the code to change and your whole blog’s layout to break?

Have you ever tried to use divs in your WordPress editor, only to find that all your div tags have been replaced with p tags?

Well, despair no further! Roland O’Connor has written about an easy solution that fixes this problem.

Here’s what you do:

  1. Find the file wp-includes/js/tinymce/tiny_mce_config.php.
  2. Find the line
  3. Change it to
    $valid_elements ='-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]';
    $valid_elements = '#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],

Make sure all the code is on one line. That’s it!

The only problem with this hack is that you have to remember to redo it every time you upgrade your WordPress blog. Unless of course someone feels like making this into a plugin…hint hint, wink wink, nudge nudge.