How to Preserve Line Breaks and Formatting in WordPress

The WordPress visual editor can be a nightmare for precise formatting. I’ve already written about how to preserve code blocks by escaping HTML characters, but what if you require a specific layout that has nothing to do with code? For example, try inserting some <br /> characters into a post to force a newline, and then preview your post. In the screenshot below, I have two lines separated by 5 <br /> tags inserted via the HTML editor.

Now when I preview the post, this is what I get.

What happened to those 5 lines that were supposed to be there? This is an example of wordpress stripping out characters due to a filter called “wpautop”. It runs each and every time various parts of a blog post are rendered – in this case, the content. So what do we do about it?

Turning off wpauto

Well, the most obvious solution is to turn this filter off. We can do this rather easily with the remove_filter function. Open up your functions.php and paste the following code into it.

remove_filter( 'the_content', 'wpautop' );

Now let’s go back to my post in the HTML editor and insert those 5 <br> tags once again. With the wpautop filter removed, my post preview now looks like this:

Perfect! We’ve removed wpauto and all’s well right? Well not quite.

You see, wpauto is actually quite useful for most normal texts and articles. It cleans up unclosed tags and in general helps a lot with spitting out whitewashed and well forme HTML. So we don’t want to get rid of it entirely. Most likely, your blog has a mix of regular articles and ones which need wpautop to be removed. So we have to disable it on a selective basis. For this, we’re going to use post types.

Removing wpauto for Specific Post Types

I’ve touched on post types in WordPress before as a means to perform conditional formatting and manipulations for certain types of posts. Not all themes support it, and not all themes that do support it have all the post types available. I’ve written about how to enable post types on your WordPress blog, so take a look at that if you’re not sure about what they are.

For this example, I’m going to make use of the post type called “quote”. Specifically, I want to make it so that only those post types assigned to “quote” have wpautop removed. So the first step is to make sure that you have the “quote” post type available to you as shown here.

If not, just check out the second link in the article and enable it. Next, go to your functions.php or wherever you normally post your PHP code and paste the following into it.

function keep_breaks_for_quote( $content )
{
    if ( has_post_format( 'quote' )) {
         remove_filter( 'the_content', 'wpautop' );
         $content = $content . '<br>Post Format: ' . get_post_format();
    }
    return $content;
}

add_filter( 'the_content', 'keep_breaks_for_quote', 0 );

Over here, I hook into the “the_content” filter and then check to see if the post belongs to the “quote” post type using the “has_post_format” function. If yes, I remove the filter using the first command we looked at. This way, we take out wpautop only when we want to, and let it do its magic in all other scenarios. You can see how this works out here, with me getting in all my <br> linebreaks with the specified post type:

So the next time you have a specific formatting requirement where you simply have to preserve your content in the way you imagine (maybe you want to draw an ASCII image), use this technique to instruct WordPress not to undo all your hard work.