WordPress ate My HTML Too

The WordPress team admits that a common complaint is “WordPress ate my html.” Their latest “fix” to this issue is to relabel the HTML tab as “Text.” I’m all for truth in labeling, but it seems like a lazy fix.

I spent many days pondering how best to rebuild an existing web site in WordPress as simply as possible — hopefully pasting HTML from the existing web site. The HTML tab (now “Text” tab) didn’t work.  It added BR tags unnecessarily, then converted them to P tags if you saved and reopened the page in the admin section.

Add the HTML source button to the WordPress toolbarAt some point I stumbled on an implementation of TinyMCE that had an HTML button. It opened a popup and allowed me to paste HTML, without messing it up. Hooray!

To add the HTML button to your WordPress admin screens, find the functions.php file in your WordPress theme. Add the following code to the end of the file:

function my_mce_buttons_2($buttons) { 
  * Add in a core button that's disabled by default
  $buttons[] = 'code';
  return $buttons;
add_filter('mce_buttons_2', 'my_mce_buttons_2');

It worked almost perfectly for my conversion job. I found out that if you’re pasting HTML comments, WordPress still converts the closing comment from –> to –> (notice that even in this post, WordPress has converted my dash-dash to an en-dash, which breaks the comments). The best advice I found was to let WordPress do its thing and then convert them back.

Save this code to a file called dont_break_html_comments.php — save it in your plugins directory. Then go to the plugins  panel and enable it.

Plugin Name: Don't break HTML comments
Description: HTML comments in pages get converted to en-dashes, resulting in missing content on those pages.
add_filter( 'the_title', 'un_en_dash' , 50 );
add_filter( 'the_content', 'un_en_dash' , 50 );
add_filter( 'the_excerpt', 'un_en_dash' , 50 );
add_filter( 'comment_text', 'un_en_dash' , 50 );
add_filter( 'list_cats', 'un_en_dash' , 50 );

function un_en_dash( $text ) {
  $content = str_replace( '–>' , '-->' , $text );
  return $content;

Understand that pasting your HTML is really a one-way operation. Once the pasted HTML is in place, leave it alone. If you must make changes, make them using the HTML editor. The visual editor (and new “Text” editor) could still change the underlying HTML if you use them. Luckily, for me, that was not an issue.

This entry was posted in Webmastering. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s