Remove Automatic Paragraphs In Shortcodes

This post is an extension to the post I wrote some time ago about displaying code snippets on a WordPress site. That post showed how you can create a WordPress plugin that makes a shortcode for a number of different languages that will encode the content so that you can display code snippets on your WordPress site.

Using this plugin, you will have access to four shortcodes: HTML, CSS, JavaScript and PHP.

<div class="html">
     <h1>HTML</h1>
</div>

.css_class
{

}

var js = document.getElementById('element');

<?php
     echo 'This is PHP.';
?>

But because we were encoding the content using htmlentities it caused some problems with the way WordPress renders content. WordPress will automatically change double line-breaks to paragraph tags. In this article, we will see what those problems are and come up with a solution to solve them.

WordPress Automatic Paragraphs

When WordPress displays your content on the page it will run it through two different filters: wptexturize and wpautop.

wptexturize is a filter that will convert all quotes into smart quotes. It will also convert apostrophes, dashes, ellipses, the trademark symbol and the multiplication symbol. Because code normally uses straight quotes instead of curly quotes, text inside pre and code tags are ignored.

wpautop is a filter that will change double line-breaks into paragragh tags. When you add a new line while using the tinyMCE editor, it will create a double line-break, so this filter solves that problem.

This is a problem inside shortcodes that are running the content through the htmlentities() function because it will convert the HTML so it is shown in the shortcode content area.

Therefore, if you create a shortcode to display HTML like this:

[ html ]
<div id="code"></div>
[ /html ]

Because we have line breaks in this shortcode by going to a new line, wpautop() will try to convert this text. Since we are using htmlentities on the content of the shortcode, the output will  display these paragraph tags and line break tags. What will actually be returned from the shortcode is this:

</p>
<div id="code"></div><br/>
<p>

You can see the closing paragraph tag and the line break at the end of the line with the div element.

If you are trying to display more information, such as a CSS class with a line break on each property, it will be displayed this way:

<br />
.alert-danger,<;br />
.alert-error {<br />
color: #b94a48;<br />
background-color: #f2dede;<br />
border-color: #eed3d7;<br />
}<br />

Turning Off wpautop()

Removing these line breaks and paragraph tags from the content is very easily done in WordPress. All we have to do is make sure the content doesn't go through the wpautop filter by removing it.

To remove a filter in WordPress, all you have to do is use the function remove_filter(), pass in the tag of the_content and remove the function wpautop.

remove_filter('the_content', 'wpautop');

But if we use this function to remove the wpautop() then it will be removed for all content, which will remove all paragraphs in your content, which makes your content unreadable.

In order to display code snippets correctly, we need to find a way of solving this problem without turning off wpautop() on all content. We will only want to turn this off on content inside shortcodes.

Removing wpautop() from Content Only in Shortcodes

To remove the wpautop() function only in shortcodes we need to create a brand-new filter through which to run all of our content.

First, we turn off wpautop filters and wptexturize filters on all content.

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

This new filter will need to check to see how the content is being displayed. If the content is inside a shortcode, then it won't run through the wptexturize and wpautop functions. If the content is not inside the shortcodes, then it will apply the wptexturize and wpautop functions.

function remove_auto_p_in_shortcode_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}
	return $new_content;
}

add_filter('the_content', 'remove_auto_p_in_shortcode_formatter', 99);

Now, all the code inside shortcodes will not have a trailing paragraph tag and you will no longer have line breaks at the end of your code snippets.

If you'd like a copy of the syntax highlighter used on Paulund, it is available on GitHub as a WordPress plugin.

Paulund Syntax Highlighter