1

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?

3 Answers 3

8

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

1
  • this helped me after hours of searching
    – user9
    Jun 19, 2014 at 2:59
0

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?

1
  • hmm, just tested again. I always get stray p tags. No plugins installed. Anyhow, the answer above solves my problem. Mar 6, 2011 at 10:30
0

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.

2
  • An invalid html document usually leads to weird style issues. That is to be expected. Mar 2, 2013 at 12:07
  • display:none; But I removed <br/>, not <p> though.
    – avp
    Sep 5, 2013 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.