I am developing a wp theme and I want to have a shortcode that can be used serveral times from within an article.

in functions.php i have:

function twoColPostcardfn($atts, $content){
    extract(shortcode_atts(array(
        'image'=>'',
        'text'=>'',
        'title'=>'',
        'boxlink'=>'',
        'float'=>''
        ), $atts));
    $bob='<span class="twoColPostcard ">'.$content.'</span>';
    return $bob;
}
add_shortcode( 'twoColPostcard', 'twoColPostcardfn' );

in the article I have:

<p>[twoColPostcard]</p>
<p>hello from the first postcard</p>
<p>[/twoColPostcard]</p>
<p>[twoColPostcard]</p>
<p>hello from the second postcard</p>
<p>[/twoColPostcard]</p>

And I want my output to be

<span class="twoColPostcard"><p>Hello from ...</p></span>
<span class="twoColPostcard"><p>Hello from ...</p></span>

But instead I am getting:

<span class="twoColPostcard">
<p></p>
<p>hello from the first postcard</p>
<p><span class="twoColPostcard "></span></p>
<p>hello from the second postcard</p>
<p></p>
</span>

In other words the second shortcode is begun before the first one is finished so the are ending up nested (and the 2nd one is empty)

I used the codex to help but its not working and I don't know why. I have tried inserting this into my functions as per to no avail

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);
up vote 3 down vote accepted

put the remove filter to be called first like this, change your span to div or you will have issues with some browsers:

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

function twoColPostcardfn($atts, $content){
    extract(shortcode_atts(array(
        'image'=>'',
        'text'=>'',
        'title'=>'',
        'boxlink'=>'',
        'float'=>''
        ), $atts));
    $bob='<div class="twoColPostcard ">'.$content.'</div>';
    return $bob;
}
add_shortcode( 'twoColPostcard', 'twoColPostcardfn' );

or change the content to another span, the p tag is a block tag and the span tag is an inline tag, a block tag cant be inside an inline one.

[twoColPostcard]<span>hello from the first postcard</span>[/twoColPostcard]
[twoColPostcard]<span>hello from the second postcard</span>[/twoColPostcard]
  • 1
    yes - that's it!!! Its working fine now. Put divs instead of spans and it all is well. (Also tried to remove as many of those darn <p>...</p> by reducing the number of line-breaks. But stupid me for putting block level elements inside inline - kinda lesson1! THANKS so much David! – maxelcat Feb 28 '17 at 18:29

It looks like you're adding unnecessary <p> tags around your shortcodes. Try this instead:

[twoColPostcard]<p>hello from the first postcard</p>[/twoColPostcard]
[twoColPostcard]<p>hello from the second postcard</p>[/twoColPostcard]
  • but you were right!!! – maxelcat Feb 28 '17 at 18:03

Why use p tags at all? Don't enter any new lines and p tags won't be added. Just add it all on line:

[twoColPostcard]hello from the first postcard[/twoColPostcard[twoColPostcard]hello from the second postcard[/twoColPostcard]

And then change your shortcode to include the p tags:

function twoColPostcardfn($atts, $content){
extract(shortcode_atts(array(
    'image'=>'',
    'text'=>'',
    'title'=>'',
    'boxlink'=>'',
    'float'=>''
    ), $atts));
$bob='<span class="twoColPostcard "><p>'.$content.'</p></span>';
return $bob;
}
add_shortcode( 'twoColPostcard', 'twoColPostcardfn' );
  • thanks - If I do as you suggest the nesting is right. But what if I want html inside the shortcode? – maxelcat Feb 28 '17 at 18:03

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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