stray <p> elements

Question

I coded a wordpress shortcode for columns that basically inserts html via a shortcode. Problem is that wpautop adds stray p elements that renders the code invalid.

To test put this into your functions.php:

function static_col_container($atts, $content) {
    extract(shortcode_atts(array(
        'foo' => 'bar'
    ), $atts));

    $content = do_shortcode($content);
    $container = '<div class="static-column-container">' . $content . '</div>';
    return $container;
}

add_shortcode('static-cont', 'static_col_container');

function static_col($atts, $content) {
    extract(shortcode_atts(array(
    'space' => '2',
    'class' => ''
    ), $atts));

    $content = do_shortcode($content);
    $column_container = '<div class="static-column static-column-' . $space . ' ' . $class . '">' . $content . '</div>';

    return $column_container;
}

add_shortcode('static-col', 'static_col');

Usage is:

[static-cont]
    [static-col]
       put some content here...
    [/static-col]
    [static-col]
       put some content here...
    [/static-col]
[/static-cont]

I know that Wordpress uses wpautop to insert p tags which can be disabled via:

remove_filter('the_content', 'wpautop');

Problem is that now you have to enter every single p element yourself, which is a pain and makes the visual editor useless. Has anybody found a better solution?

Answer 1

Remove the filter from the the_content and run it after the shortcode are processed.

Try:

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

Usually shortcodes are processed after wpautop is applied to the content. See http://core.trac.wordpress.org/browser/tags/3.1/wp-includes/shortcodes.php#L296

Answer 2

I'm not seeing that issue on my local installation, copied your shortcode code, then put the provide sample into a post, the output was as follows.

<div class="static-column-container"><br>
<div class="static-column static-column-2 "><br>
put some content here…<br>
</div><br>
<div class="static-column static-column-2 "><br>
put some content here…<br>
</div><br>
</div>

Switching between HTML and Visual i always see.

[static-cont]
    [static-col]
       put some content here...
    [/static-col]
    [static-col]
       put some content here...
    [/static-col]
[/static-cont]

...and nothing else..

Any plugins installed, TinyMCE advanced?

Answer 3

I had the same problem, not from a validation point of view, but a styling point of view, where a stray opening p tag was ruining my CSS.

$retour ='<div class="testimonial-meta">'
$retour .='<h5>'.$testimonial_name.',</h5><span>'.$testimonial_details.'</span>';
$retour .='</div>';
return $retour;

Was returning:

<div class="testimonial-meta">
    <h5>John Doe,</h5>
    <p><span>Company CEO</span></div>
</div>

I fixed the styling by adding in my CSS:

.testimonial-meta p{
    display:inline;
}

Hopefully this might be useful to someone.