stray <p> 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:

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?

Related posts

Leave a Reply

3 comments

  1. 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?

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