I find that the “HTML mode” in the WordPress editor doesn’t really provide you with total control of the HTML being generated on the frontend. Some of the auto-formatting it does are for instance wrapping your inline elements with a <p> and line breaks are also interpreted as <p>.

While this is not a bad thing at all, it is however quite cumbersome if you’re using custom shortcodes (that generate divs) in your content creation and you’re planning to arrange them nicely in the editor by giving a couple of line breaks for better readability. They will end up in the frontend as <div> wrapped inside a <p>, and you’ll get some unwanted <br /> as well. Certainly not pretty.

The auto-formatting function will still run even if you disabled the visual editor entirely because it is not part of the TinyMCE editor. In fact it is performed via a function in WordPress called wpautop that runs before the content is displayed on the frontend. Thus it is possible to bypass this feature by using the remove_filter function in our theme function.php file. The simple code for a global site-wide effect is:

 
   remove_filter('the_content', 'wpautop');

A more elegant approach would be to use a custom field to control which content will bypass wpautop and which not. This way we can still take advantage of the usefulness of the wpautop function for pages that doesn’t require fancy HTML. The code below also goes in the function.php file.

function WP_auto_formatting($content) {
    global $post;
    if(get_post_meta($post->ID, 'disable_auto_formatting', true) == 1) {
        remove_filter('the_content', 'wpautop');
    } 
    return $content;	
}
add_filter( "the_content", "WP_auto_formatting", 1 );

Using this method, you simply have to add a custom field in your post/page called disable_auto_formatting and give it a value of 1 to bypass the wpautop function. To enable auto formatting, simply change the value to 0 or delete the custom field.

Have a nice day!