stray <p> elements

1 Views

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:

Read More
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?

Post Views: 1

Related posts

Leave a Reply

3 comments

  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?

  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.