Shortcode is being surrounded by p tags

  • Hi there

    In a rather unsuccessful first dip into plugins, I decided to produce a very simple plugin that automatically wraps content into a container div and two further divs. I would then style these divs accordingly, and apply some jQuery trickery to them.

    I have a container shortcode, inside which there are several sub-container shortcodes. My plugin php is as follows:

    add_shortcode('jprfadecontainer', 'jpr_do_fader_container');
add_shortcode('jprfade', 'jpr_do_fader_imgs');

function jpr_do_fader_container($attr, $content = null) {
	$attr = shortcode_atts(array(), $attr);
	$output = "<div class=\"jpr-fader-container\">";
	//$content = strip_tags($content, '<div><img><a>');

	$output .= "<div class=\"jpr-fader-content\">\n";
	// global variable for width?
	$output .= do_shortcode($content);
	$output .= "</div><!-- End fader-content -->";

	$output .= "</div><!-- End gallery container -->";
	return $output;
}

function jpr_do_fader_subs($attr, $content = null) {
	$attr = shortcode_atts(array(), $attr);

	$output = "<div>" . $content ."</div>";

	return $output;
}

    Totally simple, but enough to make things simple for the client to produce a cycling gallery of content.

    The issue I am having is that the sub-shortcodes are being surrounded by p tags, so there is nasty HTML all over the place. My research has led me to think that it’s something to do with the wpautop function, but I’m also thinking it’s probably something I have omitted.

    The source of the output (relevant from lines 58-64 of the source) can be found at https://children.jewellparkerrhodes.com/jpr_children_wp/books/ninth-ward/the-real-9th-ward/.

    Any advice gratefully received…

    J

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter SpankMarvin

    (@spankmarvin)

    Err, also please ignore the commented code. Should have checked and removed that before pasting in.

    Thread Starter SpankMarvin

    (@spankmarvin)

    Ok, so I’m pretty sure this is an issue with autop and nested shortcodes. I’m facing the difficulty that the removal of auto p tags is working just fine in my preliminary shortcode. However, this then parses subsequent nested shortcode with the p tags automatically surrounding the shortcode itself. This has the added ‘bonus’ of closing a p tag whose opening tag was removed by the outer shortcode’s p tag removal…

    I’m totally stumped. I cannot strip_tags on the nested content as this destroys my content.

    I am experiencing the same problem with a similar structure. I have a parent that contains one or more child texts.

    The shortcode structure would be something like:

    [parent]
[child]
Some child text
{child]
Next childs text
[/parent]

    The test code looks like this:

    class wp247_Test_Shortcode {
		var $parent_seq	= 0;
		var $child_seq	= 0;

		function wp247_Test_Shortcode() {
			add_shortcode( 'parent', array( &$this, 'do_parent' ) );
			add_shortcode( 'child', array( &$this, 'do_child' ) );
		}

		function do_parent( $atts = NULL, $content = NULL, $code = '' ) {
			$this->parent_seq++;
			$this->child_seq = 0;
			$return = "<!-- parent $this->parent_seq";
			foreach ( $atts as $key => $value ) $return .= " / $key : $value ";
			$return .= " / --><div class='parent'>\n";
			$content = do_shortcode( $content );
			if ( $this->child_seq > 0 ) $content .= "</div><!-- end of child $this->child_seq -->";
			return $return . $content . "</div><!-- end of parent $this->parent_seq-->";
		}

		function do_child( $atts = NULL, $content = NULL, $code = '' ) {
			if ( $this->child_seq > 0 ) $return = "</div><!-- end of child $this->child_seq -->";
			else $return = '';
			$this->child_seq++;
			$return .= "<!-- child $this->child_seq";
			foreach ( $atts as $key => $value ) $return .= " / $key : $value ";
			$return .= " / --><div class='child'>\n";
			return $return . do_shortcode( $content );
		}

    With the following post:

    <h3>Test WordPress Shortcode API</h3>
Here's the introduction.

[parent parm1 parm2="some value"]

[child]

Content for child 1

[child 2]

Content for child 2

[child 3]

Content for child 3

[/parent]

Some more text after the parent/child list.

    The results I am getting look like:

    <h3>Test WordPress Shortcode API</h3>
<p>Here’s the introduction.</p>
<!-- parent 1 / 0 : parm1  / parm2 : some value  / --><div class='parent'>
</p>
<p><!-- child 1 / --><div class='child'>
</p>
<p>Content for child 1</p>
<p></div><!-- end of child 1 --><!-- child 2 / 0 : 2  / --><div class='child'>
</p>
<p>Content for child 2</p>
<p></div><!-- end of child 2 --><!-- child 3 / 0 : 3  / --><div class='child'>
</p>
<p>Content for child 3</p>
<p></div><!-- end of child 3 --></div><!-- end of parent 1-->
<p>Some more text after the parent/child list.</p>

    My expectation is something more like:

    <h3>Test WordPress Shortcode API</h3>
<p>Here’s the introduction.</p>
<!-- parent 1 / 0 : parm1  / parm2 : some value  / --><div class='parent'>
<!-- child 1 / --><div class='child'>
<p>Content for child 1</p>
</div><!-- end of child 1 --><!-- child 2 / 0 : 2  / --><div class='child'>
<p>Content for child 2</p>
</div><!-- end of child 2 --><!-- child 3 / 0 : 3  / --><div class='child'>
<p>Content for child 3</p>
</div><!-- end of child 3 --></div><!-- end of parent 1-->
<p>Some more text after the parent/child list.</p>

    Perhaps my expectations are wrong. They are based on the following comment from The Shortcode API:

    wpautop recognizes shortcode syntax and will attempt not to wrap p or br tags around shortcodes that stand alone on a line by themselves.

    Any help and / or ideas on how to get around this would be MOST appreciated.

    I just found bug report 12061 from 2010-01-28. As of right now, it appears that it is slated for a “Future Release” and there is no fix (or work around) currently available.

    For those that may be interested. After a looking around a bit and playing with my shortcode, the following work around works for me.

    Instead of:

    return '<div my stuff>' . do_shortcode( $content ) . '</div>';

    I did the following:

    $content = do_shortcode( shortcode_unautop( $content ) );
if ( '</p>' == substr( $content, 0, 4 )
and '<p>' == substr( $content, strlen( $content ) - 3 ) )
	$content = substr( $content, 4, strlen( $content ) - 7 );
return '<div my stuff>' . $content . '</div>';

    I know it’s not pretty and the replacement can probably be done with preg_replace. But, since I am RegEx illeterate, the substr is the best I could come up with.

    I will use this method until the bug is fixed in WP.

    Good luck.

    Hello sir,
    This is very simple shortcode function, When I use this shortcode ,<p></p> appends at the end of the content.I don’t know ,How to resolve this?

    function checklist($atts, $content = null) {
	return '<div class="checklist">'.$content.'</div>';
}
add_shortcode('checklist','checklist');
    [checklist]
<ul>
<li>One</li>
<li>Two</li>
</ul>
[/checklist]

    When i saw the result of this short code , after the end of`
    <ul> tag`, <p></p> tag appends automatically.

    I was experiencing this problem … temporary solution was to force balance the content before returning it. Even with no unbalanced tags, running the function seems to clear up the ‘</p>’ bug. For now.

    rreturn force_balance_tags($content);

    A solution that I’m using, though not very elegant, is to create separate shortcodes for for the opening and closing tags. So if you want to enclose your content thusly…

    <div class='my-pretty-div'>My Content</div>

    …you would create shortcodes like so…

    [prettyOpen]My Content[prettyClose]

    Seems to be working without inserting extraneous <p> tags. An added advantage is that you can then nest another shortcode in between those two if necessary.

    Here is my solution as a plugin:
    https://www.johannheyne.de/wordpress/shortcode-empty-paragraph-fix/

    (Translated by program)
    Jonua, i am extremely grateful for your plugin, it worked perfectly for my application.

    A little late i know but heres my solution:

    the problem with the above solutions is that if your short code want a <p> in it it will be stripped.

    my solution is this: before returning your shortcode I simply remove the new lines as it appears that the new lines are whats being made into paragraphs.

    return str_replace("\r\n", '', $content);

    Finally a solution to that annoying bug. Thanks guys!

    this worked for me:
    https://donalmacarthur.com/articles/cleaning-up-wordpress-shortcode-formatting/

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Shortcode is being surrounded by p tags’ is closed to new replies.