Extraneous HTML using one_third

  • Extraneous HTML:

    On the same page, we get some extraneous HTML that I cannot find anywhere in a template file. It is quite unclear why this is there.

    The Extraneous HTML is (here):

    
<div class="clear_column"></div>
<p></p>

    So the content is like this:

    
[one_third]
<h3>Text Here</h3>
<ul>
 	<li>Text Here/li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
</ul>
[/one_third][one_third]
<h3>Text Here</h3>
<ul>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
 	<li>Text Here</li>
</ul>
[/one_third][one_third_last]
<h3>Text Here</h3>
<ul>
 	<li>Text Here</li>
 	<li>Text Here</li>
</ul>
[/one_third_last]

    Oddly, on same page, below this I use:

    
[one_half]Text Here[/one_half][one_half_last]Text Here[/one_half_last]

    And there is no extraneous HTML output.

    I want the gap from the inserted empty paragraph to go away. I can’t hide un-styled <p>’s.

    The theme’s this has been tested on are Twentysixteen and Twentyseventeen. Note: on the twentysixteen theme setup, I added a shortcode prefix per your FAQ:

    
add_filter( 'cpsh_prefix', 'set_shortcode_prefix' );
function set_shortcode_prefix() {
    return 'myprefix_'; // edit this part if needed
}

    and had the same results. So, does not appear to be a shortcode conflict:

    Any thoughts on a fix?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Stefan van den Dungen Gronovius

    (@dungengronovius)

    The extra <div class=”column_clear”></div> is only added for column shortcodes that have ‘_last’ in it. So even when you use [/on_half_last] the div should be added to the page.

    The empty <p> is added because all shortcode content is wrapped in auto paragraphs so if you check the source code (not the Chrome inspect tool, because this shows the rendered html) then you can see that all shortcode output is wrapped in one paragraph. Because we use div elements, the browsers renders then after the <div> content.

    To remove the paragraph, you can try to use the WYSIWG text mode to remove all whitespaces around the shortcodes, so not auto paragraphs are rendered by WordPress.

    If that does not work, you could try to fix it by using CSS and the next selector. Something like this

    `div[class=”clear_column”] + p { display: none; }’
    (not tested)

    Thread Starter Pioneer Web Design

    (@swansonphotos)

    First thanks for the reply.

    The extra <div class=”column_clear”></div> is only added for column shortcodes that have ‘_last’ in it. So even when you use [/on_half_last] the div should be added to the page.

    As noted, the issue is only occurring when using one_third and I have changed the prefix, so I am confident this is not a shortcode conflict.

    The empty <p> is added because all shortcode content is wrapped in auto paragraphs…

    There are no gaps at all in the text editor (that is really annoying, I see that using most themes). However, it may help to note the [/one_third_last] is the last thing in the page. There are no spaces before or after it. The Theme is Twentyseventeen, WP4.7.

    I would prefer to discover the real issue and not work around it.

    Just wanted to chime in because I am having the same issue on a site and I think I have figured out what is causing an extra <p></p> to be outputted. The clients have requested the extra whitespace to be removed so I’m here looking for answers.

    I’m having the problem using a two column layout, but like Pioneer’s example code above, I’m using the short code directly before a <h3> title – I think it is this that the code doesn’t like, as when I change that title to be normal text it works as expected. So it seems the issue comes from a shortcode being used directly before a heading title. Can this be addressed at all?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Extraneous HTML using one_third’ is closed to new replies.