p tag formatting in shortcode's content wordpress

8
votes

I know this must have been asked a hundred times but I've been trying out a number of solutions I could find but none seem to work.

I have a shortcode that wraps content:

[important_note]Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam vel velit at ex congue aliquet.[/important_note]

I'm using the following shortcode function in functions.php:

function important_note( $atts, $content = null ) {
    return '<div class="imp-note">'.$content.'</div>';
}
add_shortcode("important_note", "important_note");

This is the resulting html code:

<div class="imp-note">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <p></p>
    <p>Nam vel velit at ex congue aliquet.</p>
</div>

The main issue is the empty <p> which I've been trying to solve using these solutions mentioned here: remove empty <p> tags from wordpress shortcodes via a php functon and on Github however this seems to solve <p> wrapping the shortcode not the content of the shortcode.

Having the first line without any <p> wrapping is a bit odd as well which makes me thinking that I should add code to the shortcode function?

Thanks in advance for any help.

UPDATE

Ok so this bit of code looks like it does the trick:

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

As seen here: https://stackoverflow.com/a/21460343/1275525 and here: http://www.paulund.co.uk/remove-line-breaks-in-shortcodes (Removing wpautop() To Content Only In Shortcodes)

AND the content in the shortcode must be like this not as I've shown above:

[important_note]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam vel velit at ex congue aliquet.
[/important_note]

Content is separate from the shortcode tags. That shortcode outputts the following html:

<div class="imp-note">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nam vel velit at ex congue aliquet.</p>
</div>

Will confirm if it works on all shortcodes...

2
phpwordpressshortcode

2 Answers

2
votes

As I've mentioned in my question's Update this bit of code in the functions.php does the trick:

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

As seen in this question's answer: https://stackoverflow.com/a/21460343/1275525 and this post: http://www.paulund.co.uk/remove-line-breaks-in-shortcodes (scroll down to: Removing wpautop() To Content Only In Shortcodes)

It's also important to have the content in the shortcode separate from the shortcode tags, otherwise the first line will not be wrapped in <p> tag:

[important_note]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam vel velit at ex congue aliquet.
[/important_note]

HTML output:

<div class="imp-note">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nam vel velit at ex congue aliquet.</p>
</div>

I've checked the shortcodes throughout the WordPress site and all have the correct formatting. Hopefully this helps a few peeps out there :)

1
votes

Have you try this 

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

For more information: http://codex.wordpress.org/Function_Reference/wpautop

And Also You can add this function in functions.php file

add_filter('the_content', 'remove_empty_p', 20, 1);
function remove_empty_p($content){
    $content = force_balance_tags($content);
    return preg_replace('#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content);
}