One of the problems with the free, open source blogging application called WordPress (successor to b2\cafelog) is the way it mangles any HTML you use in your posts.
The culprits here are the WordPress functions called wptexturize and wpautop. These functions have been included as part of WordPress almost from the beginning but now that WP has a new visual editor the problems of HTML being changed (when you don't want it to be changed) have increased.
I like to have complete control over the output of my content. While WP says it outputs valid XHTML I have found this claim not to be true. And if I can code valid XHTML then I don't want the application I am using to mess with it!
wpautop automatically inserts paragraph tags. It puts in line breaks, paragraph tags, opens and closes tags that (it thinks) aren't opened and closed, and cleans up duplicate HTML tags. This would not be such an issue if it inserted them correctly. It uses regular expressions and seems to guess which double line breaks are supposed to be paragraphs then replaces break tags (<br />) with <p>. Sometimes it just adds a closing </p> to the end of already closed paragraphs, for no apparent reason.
wptexturize texturizes text, supposedly to make it look prettier. It adds curly quotes, changes symbols and generally causes havoc on content that is already correctly written. I don't know why the developers of WordPress included this, but they did. If you find your post input is getting really messed up you will want to get rid of this function.
So, what to do? First off, don't use the visual editor. It replaces divs with paragraphs and generally mangles any HTML you input. Secondly, disable the two offending functions. At the moment, this can only be done by hacking the WP core code. Look in the wp-includes directory for wp-includes/formatting.php and edit the regular expressions to suit, or comment out the wpautop and wptexturize functions completely.
Easy Way to Remove wptexturize and wpautop
Since this post was first written there has been a significant change in WordPress. wptexturize and wpautop still mangle code badly BUT now there is an easy way to stop them. WordPress 2.0 introduced a function override, which allows us to use a file in our themes called functions.php. The functions you add to this file work in a similar way to plugins and its easy to use PHP code to remove the post content filters I talk about here.
Either open your theme's functions.php file, or create one if you don't have one. All that is needed in the file are the opening and closing PHP tags:
<?php
?>
Then add the following to stop these two functions from messing with your code. Note, these must be entered inside the PHP tags:
//disable auto p
remove_filter ('the_content', 'wpautop');
//disable wptexturize
remove_filter('the_content', 'wptexturize');
Simple!
How To Remove Auto Formatting Only From Pages
WordPress conditionals allow us to selectively remove filters. To remove auto-p and the auto formatting of wptexturize from pages while leaving posts formatted just add this to your theme's functions.php
if (is_page()) {
//disable auto p
remove_filter ('the_content', 'wpautop');
remove_filter ('comment_text', 'wpautop');
// Remove auto formatting
remove_filter('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_title', 'wptexturize');
}
Note: The tips here only relate to built-in WordPress formatting filters. These filters don't affect the way the TinyMCE visual editor outputs code. That will be the subject of a forthcoming post, so stay tuned.
If you enjoyed this post, make sure you subscribe to my RSS feed!
{ 40 comments… read them below or jump to the comment form to add your thoughts }
Thank you for this! Saved my form pages!
1000 thanks! This was driving me absolutely nuts and you're fixed nailed it! =)
Great point and very interesting food for thought. I'm not sure I have any clients I can replicate this with, but will bear in mind for the future. Regards
THANKYOU! I can now use sweetly indented markup without WP destroying my forms, adding break tags all over the random place and wrapping my paragraphs in paragraphs...
Ok, I have a question. This is all well and good BUT... can you suggest a solution for stripping all the WP-generated tag rubbish in pages, but leaving it active in posts? I want my client to be able to use the visual editor without having to learn markup for her blog, but at the same time, I want to be able to markup the static pages properly.
Yes, I sure can. I did this awhile ago for another blog but hadn't gotten around to writing it up as a blog post. That code hasn't been tested yet on WordPress 2.8.x so give me a couple of days and check back. I can't promise when it will be posted as I am a bit restricted due to lack of regular access to a computer, but I will do it as soon as I can.
That would be great! Many thanks.
Good to know for precision posts and pages.
Who do they think we are, novices!?
I've delayed this a bit, but haven't forgotten about you alijuk. There's a couple of bugs in the latest version of WordPress that have affected my code and these appear to be getting fixed for 2.8.5. I should have something for you around the same time 2.8.5 is finalised.
@Hodgeman: Perhaps
This, for some reason, did not work for me. I saw a functions.php in my wp-includes folder... but when I added the code to that I got an error. So I added a functions.php file to my themes folder and added the code, but it didn't work.
I'm using a plugin called "Raw HTML Capability" right now which works pretty well, but requires you to enter a tag before and after the post content each time.
I'd rather just be able to make my posts in the HTML editor without having to add any tags or deal with this auto-tag mess. What's the point in having a HTML Editor anyways if you're just going to add auto-tags to it? Defeats the purpose in my eyes. Took me 20 minutes just to get a picture lined up right with this thing... ugh!!
@PZ: These functions must always be added to a functions.php file in your theme. The file needs to have that name and must start at the very top with an opening PHP tag.
If your file is set up like this then these lines of code do work.
That's what I did... I added a functions.php file to the theme, then added the lines of code between and got no response. My image that I had floating left of my content kicked the content down and a whole crap load of P tags were once again added.
@PZ: This is a problem with the Raw HTML plugin it seems. You will need to deactivate and remove that plugin if you want to use these filters in functions.php.
Raw HTML uses this:
// disable default filters remove_filter('the_content', 'wpautop'); remove_filter('the_content', 'wptexturize'); remove_filter('the_content', 'convert_chars'); remove_filter('the_content', 'convert_smilies'); remove_filter('the_excerpt', 'wpautop'); remove_filter('the_excerpt', 'wptexturize'); remove_filter('the_excerpt', 'convert_chars'); remove_filter('the_excerpt', 'convert_smilies');All of the above can be done through just adding them to the theme's functions.php.
The plugin then it adds its own custom filters that change the default behaviour of the WordPress filters.
If you want to simply disable the way WordPress mangles your HTML and you want to do this right across all your posts then the filters in functions.php are the safest way to go. If you want to only disable the default output from parts of a post, such as when you are adding JavaScript or code within a post, then that seems to be what Raw HTML is designed for.
Using both is not possible because of the way WordPress invokes its functions. The plugin doesn't run a check to see if the filters are active or not, and it doesn't set any priorities. Maybe the plugin developer will fix those at some point.
Brilliant, you're a gem. Thank you very much, it's up and working now.
@PZ: You are very welcome
Thank you so much for this! The added 's were driving me mad!
Building on this theme I found the following plugin:
http://rolandog.com/archives/2.....rmwpautop/
The great part about this plugin is that you can control the filter from within the individual posts, so you can keep the default behaviour for your run of the mill pages and then switch it off when you need to do something fancy. Being mostly a Drupal developer this comes far more naturally to me.
@CurtainDog: Great! Thanks for sharing
Hi Lynne,
I was just wondering if you'd gotten anywhere with the post / page issue?
@aljuk?: Oh heck - sorry, I forgot all about it! Thanks for the reminder. I'll get onto it asap and will email you when I post. I'm really sorry about that.
Well, best laid plans and all that... I've been working on a plugin to remove auto formatting with options for removing this from posts, pages, or both. It won't just remove WordPress filters though as I want to also remove any extraneous formatting that occurs when people cut n paste from Word (a common problem).
I was going to post it up today but found a couple of issues with WP 2.9 that I need to iron out first.
When this is ready I hope some of you will test it for me. It should prove ideal for situations like aljuk?'s where clients are not really web-savvy enough to keep their posts clean.
In the meantime, I've updated this post to show you how to apply the removal of filters only to pages, not posts.
That's great, many thanks!
You have saved the day!
I was using the RawHTML plugin but was still seeing some unnecessary paragraph tags. These simple lines of code did the trick.
Thank you!
I'm experiencing a bug/problem with the workaround above -- it seems the wpautop code doesn't work on comment_text. In spite of using it successfully on the content and excerpt, this line:
remove_filter ('comment_text', 'wpautop');
still leaves me with P tags around comments.
I've found two posts on Wordpress seeking help to the same effect, and both went unanswered. Anyone else experiencing this? I'm using Wordpress 2.9.1.
Thanks for this excellent post. This is the clearest explanation on how to prevent wordpress from mangling code.
I know this is sort of an old post, but I stumbled across it while trying to solve the same problem. I also found this plugin - http://wordpress.org/support/topic/280732. It worked for me, and this way you don't have to worry about changing your files when you update.
Cheers.
This post was like deliverance from HTM(hel)L! I am new to WordPress, but not to writing valid code. The bald patches on my pate were the result of personal hair-pulling over this issue. But with this simple, invaluable addition to my theme's functions.php file, one of my pages went from 17 errors to zero in the blink of an eye. Put me on your long list of grateful WordPress coders.
This code does NOT work. FYI
You're a lifesaver. Thank you!
The WP people should def disable auto p and texturize by default when using the html editor. Kinda seems like the raison d'être of an html editor afterall. If only the WP folks would realize this.
Rock on!
Hi Lynne,
Sorry to go off at a tangent, but do you know of a way to disable WP's image optimisation routine for a selected image?
I have a couple of small, detailed images with transparent backgrounds that I want to use. In Photoshop they look great, but after uploading them to the library, and Wp runs its 'crunching' algorithm, the end up with strange lines and colours - not what I want at all.
Thanks Lynn!
Those stupid code editors were severely messing up some Flash code I was adding via a filter into the_content(). It took me about 20 mins of swearing before I realised what was happening and hit the Google machine looking for a solution.
What's sad is this dates back to 2004 and it's still a problem!
Does it matter *WHERE* in the functions.php file this filter disabling code goes? Should it go at the very top, at the end, or where specifically ...? I'm just wondering if there's any other code in the functions.php file that this code needs to go before, or after, in order for this code to work.
I'm unable to get this to work: ANY changes to functions.php causes a "cannot generate headers" error. WP v. 2.9.2
Even adding empty tags causes the error. Any ideas?
Seemingly found an easier, simpler way...
I have just installed a wordpress plugin named FolioPress WYSIWYG, started using it, and it seems to work fine... when a make a change in the html code, the change remains there... it seems not to be altering my code in that stubborn ball-breaking hateful manner of that standard editor...
So, time now can be spent on writing and improving posts, not on fighting with a stupid code-changer routine!
THANK YOU. those random tags were SO annoying.
@Shawn: Make sure you are editing the functions.php file in your theme. If your theme doesn't have one you can create your own and add it into the theme directory. This error is usually caused by people editing WordPress core files.
I'm using a clean test site with WP v3.01, and have been chasing this problem for the last couple of hours. It seems that in trying to protect users from themselves, the hive-mind behind WP is making the product less useful.
I tried adding your suggested function to my theme's functions.php file, but it seems to have no effect. I also had no luck with the plugin raw-html (available on the WP repository) but it didn't seem to work either. It's really ticking me off that WP isn't letting me use the (correct) code I want! Maybe something changed in v3.x?
Thanks!
@Brian D: There are a few changes in WP 3.0 and 3.0.1 that cause problems with that code. I'm building a new site with 3.0.1 at the moment which needs to prevent the code mangling so when I get to that stage & have it tested thoroughly I'll be updating this post.
Leave a Comment