stray elements

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

Method 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?

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0