0

I am new to Wordpress and am implementing a shortcode. My shortcode is super simple and the expected output is HTML5-compliant:

add_shortcode( 'my_code', function( $attributes ){
    return '<a href="#"><div></div></a>';
});

When this gets emitted, I get the following HTML:

<a href="#">
<div></div>
<p></a>

As you can see, there appears to be auto formatting going on. I have followed the advice here, here, and have installed this plugin, all to no avail. I am looking for the magic secret that is making this formatting occur. Any assistance would be appreciated!

Community
  • 1
  • 1
Mike-E
  • 2,477
  • 3
  • 22
  • 34
  • http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Danijel Sep 24 '15 at 22:14
  • So what, @Danijel... It's completely valid HTML5...Or maybe I'm misunderstanding the intention of the link. – rnevius Sep 24 '15 at 22:17
  • @Danijel has a point, in that I didn't explicitly say the intended HTML5 version. I have updated the post to reflect this. – Mike-E Sep 24 '15 at 22:28
  • What browser are you seeing this in? – Lee Sep 25 '15 at 09:58
  • Hi @Lee I am using Chrome, but the problem is on the server. I have solved this problem as noted below and will be able to mark the answer tomorrow. Thank you all for your assistance! – Mike-E Sep 25 '15 at 12:44

2 Answers2

1

I cannot recreate the problem, after running the example i get the right output:

<a href="#"><div></div></a>

( the original HTML source, not the modified one that console shows, the HTML panel in console shows a live view on what the browser is showing )

The problem is when a shortcode output is wrapped inside paragraph, then the output is something like:

<p>Some text <a href="#"><div></div></a></p>

The blame for this broken HTML ( in HTML5 <div> inside <a> is permitted, but <div> inside <p> is not ) is on WordPress filter wpautop. That filter encloses text with <p> tag, replaces double line breaks with <p> tags, and single line breaks with <br /> tags. If the shortcode is right after the text its output will be part of the paragraph. To avoid that just put the new line between the text and the shortcode.

Some text

[my_code]

Some text
Community
  • 1
  • 1
Danijel
  • 12,408
  • 5
  • 38
  • 54
  • Thank you for your answer @Danijel. This isn't a browser problem and have confirmed the following markup is emitted when I save the $content to a file on the server: `

    ` If it works for you, then there must be a filter in my theme that is causing the problem. I have turned off wpautop in every way that I have seen online, and still this problem persists.     – Mike-E Sep 25 '15 at 10:21
  • Then it is certainly a problem as you said in another filter somewhere, probably some plugin is causing this, in WordPress problems are always complicated than they appear at first sight. – Danijel Sep 25 '15 at 10:32
  • Thanks @Danijel, that was the problem exactly. Deactivating all the plugins got rid of the problem. Now to activate them back on one by one to see who the culprit is. Joy! – Mike-E Sep 25 '15 at 12:43
0

As I said I am a newb with Wordpress and I am learning the ropes here. It turns out the problem is due to a plugin. I deactivated all my plugins and the problem went away. So, lesson learned: if you have a really weird problem, disable plugins first to see if that is the source. Thanks to @Danijel for helping me out with this!

EDIT: FWIW, the plugin that causes this issue is this one (v1.0.18): https://wordpress.org/plugins/smpl-shortcodes/

Mike-E
  • 2,477
  • 3
  • 22
  • 34