The Problematic wpautop Function – WordPress

There are quite some things that bother me about wordpress. Some of them just bother me because they seem to follow no particular convention. For example, some of the wordpress function start with wp, but some other don’t. Is this to indicate that this function was developed by wordpress people rather than being some version of the same kind of function out there? For example, wpautop starts with wp. Now, some functions add a _ in between the wp prefix and the function name, like wp_mail, and wp_die, but not wpautop. Why?!?!? Moreover, there is a function related to wpautop: shortcode_unautop. Why not use the same naming convention here and add the wp prefix? Wordrpress is such a good piece of software, but written in what sometimes looks like a random way. Anyway, this time there is something else that is bothering me: The function wpautop is problematic like hell.

wpautop is supposed to be a good thing. It is supposed to, and I quote here, “[take] PHP’s nl2br function to the logical next step”1. But in my own humble opinion, it does it wrong. It assumes too much. Is this one of the consequences of growing too much?, or maybe of giving your users too much freedom? Or just plain buggy software? Who knows. All I know is that it is causing me a whole lot of trouble.

wpautop takes double line breaks and converts them into p tags. So far so good. This is actually a great functionality, and it does take nl2br to the next logical step. However, it fails on that it assumes that all text will be just that: simple text. But guess what! Not all text is simple text. WordPress allows you to directly input hypertext, and even it’s own BB-like code, which is called shortcodes. That is where problems begin.

A simple test:
Lets try a simple test to see wpautop fail. It would be better if you try this on a testing environment rather than a production site; just to keep your production sites clean. Create a new post, make sure you are using the text editor, not the visual one, and enter this:


<div>
Hello Friend!

How are you?
OK?
</div>

Publish the post and look at the source code. Don’t use some developer tool like firebug, or Source Chart, but rather something simple, like built-in view source feature of your browsers. Something that gives you back the most verbatim version of the code spit out by wordpress. You will see that the first paragraph (Hello Friend!) has a closing p tag, but not an opening one. WHATTTTT!!!! yeah, that right there is our good friend wpautop failing miserably. But, lets not be so hard on it. We could easily fix that. Besides, if we are on text editing mode we assume the responsibility to make sure that all tags are included and formatted properly. So, we could even say that it is our fault.

But wait a minute. What if we use a shortcode? Suppose you have this shortcode:


[div]sometext[/div]

Pretty simple. A shortcode that encloses everything in a div. I don’t know why you would do that, but for our purposes this is OK. The shortcode just as I put it would create no trouble, wpautop produces something like this:


<p>[div]sometext[/div]</p>

At this point, the shortcode has not be interpreted yet, but if you are a good debugger you already catched a little problem there: When the shortcode is interpreted you will end up with this:


<p><div>sometext</div></p>

Which sure enough is a problem. Any decent HTML validator will complain about that. But this is not much a problem because wpautop has a little friend.

Meet shortcode_unautop
shortcode_unautop finds every shortcode and strips the opening and closing p tags around the shortcode, if there are any. Pretty smart, so our example ends up like this:


<div>sometext</div>

Great! This is exactly what we wanted. So, there is no real problem, right? WRONG! Lets try this:


[div]sometext

and some more text here to make 2 paragraphs.
[/div]

This will takes us back to our initial div example. Same problem as with this:


<div>
Hello Friend!

How are you?
OK?
</div>

So, how do you deal with this? shortcode_unautop is of no use here because that only takes care of the surrounding p tags, but not of the internal ones. Besides we don’t want it to do so. Why do we get this problem anyway? Well, in a sense it is a problem created partly because of the intended solution to the wpautop problem. Lets see what happens behind scenes:

You input this on the editor:


[div]sometext

and some more text here to make 2 paragraphs.
[/div]

wpautop sees that and says, hey, lets put some paragraph tags in there. And it turns that into this:


<p>[div]sometext</p><p>and some more text here to make 2 paragraphs.<br />[/div]</p>

Then shortcode_unautop comes into play and says: hey! look at that. A shortcode. Lets get rid of the p tags and fix the mess that wpautop could end up creating. So it turns that into this:


[div]sometext</p><p>and some more text here to make 2 paragraphs.<br />[/div]

The the do_shortcode function comes in and produces this:


<div>sometext</p>
<p>and some more text here to make 2 paragraphs.<br />
</div>

And now, thanks to our good friends we have a closing p tag without its matching opening one. And if that is not how we like it, there is also the other case, an opening p tag without a matching closing one.

So, what do we do about it? Some clever programers out there have opted for just preventing wpautop from running. Heck they have prevented wptexturize from running too, and introduced the [raw] trend. Pretty cool, except when it causes other things to stop working. I have had to fix at least one problem related to the usage of this “fix” for the wpautop problem.

My solution? I don’t have one. So, you can either use the solution that people are using, or find your own. Or maybe wait until I find my own. For now, those are about the options that I can think of.

1 http://ma.tt/scripts/autop/

2 thoughts on “The Problematic wpautop Function – WordPress

  1. I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do
    it for you? Plz answer back as I’m looking to design my own blog and would like to find out where u got this from. cheers

Comments are closed.