The Problem:
Sometimes I find stray p or br tags appearing inside a block of content that I’ve enclosed in shortcodes and this can mess up the layout by adding extra spacing where I don’t want it. It occurs because of the default order in which WordPress processes your content – wpautop (the function which converts line breaks to p or br tags) is run before the shortcodes are processed.
The Solution:
- Change the execution priority of wpautop so that it executes after the shotcodes are processed instead of before. Add this in your functions.php file:
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);
- Now there will be no extra p or br tags added inside your shortcode block. In fact there will not be any automatic conversion of line breaks to p and/or br tags at all. So if you want the legitimate line breaks to convert to p and br tags, you will need to run wpautop from inside your shortcode function, e.g.:
function bio_shortcode($atts, $content = null) {
$content = wpautop(trim($content));
return '<div class="bio">' . $content . '</div>';
}
add_shortcode('bio', 'bio_shortcode');
Posted or updated by Aidan on 7th March 2012
Categories: WordPress
Categories: WordPress
Thanks so much! :-)
This fixed so many of my issues. If only my therapist was so effective! Thank you sincerely.
Perfect – this was such a better solution than others I’ve been finding – thanks heaps!!
For some reason, this isn’t working for me at all. If I just do the remove_filter line, then it fixes the issue around the shortcode, but removes the other paragraph tags. If I add the add_filter line, it fixes the other paragraph tags, but my shortcode is still wrapped in p tags again. Here’s my site: http://www.ebs-consulting.com/Wordpress/consulting-services/human-resources/wage-and-salary-administration/
Do you have any idea what’s going on???
Hi Christina,
This solution is for the extra p gags inside the shortcode block, but it sounds like your issue is with p tags outside the shortcode block as you say ‘my shortcode is still wrapped in p tags’. Try removing the whitespace & line breaks before and after the shortcode tag – that should get rid of the paragraph wrapping arond the outside of it.
What I have in WordPress editor on that page:
In order to develop a [PopUp id=”1″]corporate compensation philosophy[/PopUp], total compensation must be
This is my function:
//Custom PopUp Shortcode for Modal Dialog hottness
function PopUp($atts, $ShortcodeContent = null) {
extract(shortcode_atts(array("id" => '5'), $atts));
$content = parse_shortcode_content( $content );
global $post;
$post = get_post($id);
$postSlug = the_slug($id);
$myPostContent = $post->post_content;
return '
' . $ShortcodeContent . '
' . $ShortcodeContent . ''. $myPostContent . '
';
}
add_shortcode('PopUp', 'PopUp');
And then you can see what gets generated by all that on this page:
http://www.ebs-consulting.com/Wordpress/consulting-services/human-resources/wage-and-salary-administration/
urg… wrong code, this is what’s in my fuctions.php file:
//Custom PopUp Shortcode for Modal Dialog hottness
function PopUp($atts, $ShortcodeContent = null) {
extract(shortcode_atts(array("id" => '5'), $atts));
global $post;
$post = get_post($id);
$postSlug = the_slug($id);
$myPostContent = $post->post_content;
return '
' . $ShortcodeContent . '
' . $ShortcodeContent . ''. $myPostContent . '
';
}
add_shortcode('PopUp', 'PopUp');
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);
I’m not sure what exactly is happening to be honest.
Hi Christina, I think your functions.php might be ok. What I was referring to in my previous comment wan not the functions file but in the actual WordPress page/post editor itself.
e.g. This would cause <p> tags around the outside of the shortcode content:
whereas this wouldn’t:
or at least this wouldn’t:
That’s why I put the code that’s in my WordPress editor too… it doesn’t have any spaces or line breaks:
In order to develop a [PopUp id=”1″]corporate compensation philosophy[/PopUp], total compensation must be
I’m really not sure what’s causing the tags.
Hi! Thank You so much!!!! After five days of seeking solution of this problem I’ve finally found the right code that works for me… and because of You. Again…Thank You!
Thanks a lot! it helped me with the “Group” plugin for wordpress… the was killing my layout! Thanks again.
Awesome! Thanks a bunch dude! ;)
Good first step, but the simple solution will turn complicated if you are using shortcode to display certain forms, especially lengthy ones, especially ones that may even have been composed with the more typical WP functionality in mind. A solution from Stack Overflow that removes the filter only on Post Type (via WP get_post_type() looks like this (to be added to theme functions.php):
remove_filter(‘the_content’,’wpautop’);
//decide when you want to apply the auto paragraph
add_filter(‘the_content’,’my_custom_formatting’);
function my_custom_formatting($content){
if(get_post_type()== “post-type”) //if it does not work, you may want to pass the current post object to get_post_type
return $content;//no autop
else
return wpautop($content);
}
However, I was dealing with just one specific page where the normal functionality was creating ps and brs I didn’t want, so I used get_the_ID() instead:
As someone else noted, it’s an inelegant solution, since it removes the filter from all pages then adds it back in… however, it works fine, and I’m already way overtime on this relatively minor formatting/output problem with my installation – may return to it later.
seem to have forgotten the hacked code
remove_filter(‘the_content’,’wpautop’);
//decide when you want to apply the auto paragraph
add_filter(‘the_content’,’my_custom_formatting’);
function my_custom_formatting($content){
if(get_the_ID()==’1709′) // specific page only
return $content;//no autop
else
return wpautop($content);
}
oh well – that fix didn’t work after all – since for reasons I haven’t yet figured it, it throws errors involving pluggable.php, am still investigating…
Thank you!
Wow! Thank you so much for this. wpautop is driving me insane, I’ve been so close to just downright disabling it so many times now!
Thanks for this solution. Fixed my and problems. Much appreciated for posting!
To begin…yes Im a Hack trying to hack! However if you guys could help I would greatly appreciate it. Im self taught so this might seem basic but I have no idea where to place this code inside my functions.php file. Would providing my function code help?
I would just like to suggest adding do_shortcode in shortcode function, so it would be like this:
function bio_shortcode($atts, $content = null) {
$content = wpautop(trim($content));
return ” . do_shortcode( $content ) . ”;
}
add_shortcode(‘bio’, ‘bio_shortcode’);
This way if you have shortcode it gets parsed.
Thank you Aidan :)
Thanks for this! Solved the problem fantastically.
Still working, thank you!