problem with shortcodes nesting

Question

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);

David Lee · Accepted Answer · 2017-02-28 18:13:06Z

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]

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
– maxelcat, Commented Feb 28, 2017 at 18:29

WebElaine · Accepted Answer · 2017-02-28 15:43:37Z

1

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]

answered Feb 28, 2017 at 15:43

WebElaine

9,8791 gold badge18 silver badges28 bronze badges

but you were right!!!

maxelcat
– maxelcat

2017-02-28 18:03:20 +00:00
Commented Feb 28, 2017 at 18:03

Add a comment |

Samyer · Accepted Answer · 2017-02-28 17:25:56Z

1

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' );

answered Feb 28, 2017 at 17:25

Samyer

2431 silver badge8 bronze badges

thanks - If I do as you suggest the nesting is right. But what if I want html inside the shortcode?

maxelcat
– maxelcat

2017-02-28 18:03:36 +00:00
Commented Feb 28, 2017 at 18:03

Add a comment |

Stack Exchange Network

problem with shortcodes nesting

3 Answers 3

Your Answer

Linked

Hot Network Questions

problem with shortcodes nesting

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions