WordPress.org

Ready to get started?Download WordPress

Forums

Anchor wrapped div created duplicate link (13 posts)

  1. arobson13
    Member
    Posted 2 years ago #

    Hello,

    I have a problem that I am having a tough time troubleshooting because I believe WordPress is generating code because of the layout of my anchor and div tags.

    http://anjibarton.com/mhs/adoption/dogs/

    If you inspect one of the pets, you can see that there are two links one wrapped around a div that I created and one that is wrapped in a p tag that is duplicated and contains nothing inside the anchor tag.

    <li class="box masonry-brick" style="position: absolute; top: 426px; left: 452px; ">
    <a href="/mhs/wp-content/plugins/listgrid/petbio.php?id=666" rel="lightbox[Dog]" title="Test Dog" class="cboxElement">
    <img src="http://www.teacupspuppies.com/images/DogBarkToy2Thumb.jpg">
    <div style="display: block; " class="da-animate da-slideFromBottom"><span>Test Dog</span></div>
    </a>
    <p>
    <a href="/mhs/wp-content/plugins/listgrid/petbio.php?id=666" rel="lightbox[Dog]" title="Test Dog" class="cboxElement"> </a>
    </p>
    </li>
    Now this wouldn't be a problem except that the lightbox now displays double the links for each pet. I would like to fix this the correct way, but even a hack may be helpful. I am already using css to hide the added p tag and it's contents.

    The reason the second link is created has something to do with the div tags. If I remove them the duplicate link is not created. I have disabled plugins and the two JavaScript files included in this page to not avail. Thanks for reading.

  2. arobson13
    Member
    Posted 2 years ago #

    Still working away. I will update if I find anything.

    Google is being no help. This seems to be a very isolated incident, which makes me think there has to be something I am doing to cause WordPress to generate this extra code.

  3. jnhghy
    Member
    Posted 2 years ago #

    Hi,
    Do you need that "<p>" tag? Or do you want to remove it?
    or do you want to remove only the anchor from the "<p>" tag?

  4. arobson13
    Member
    Posted 2 years ago #

    The following code is generated some how:

    <p>
    <a href="/mhs/wp-content/plugins/listgrid/petbio.php?id=666" rel="lightbox[Dog]" title="Test Dog" class="cboxElement"> </a>
    </p>

    I would like it all removed, not just hidden.

  5. jnhghy
    Member
    Posted 2 years ago #

    Ok, please go to dashboard->pages search for a page named "dogs available" or "dogs" on that page, on the right hand side you should be able to see the theme that the page is set to use, with the theme name you need to go to appearance and search for the .php that generates that content. in that .php file you need to search the "<p>" tag that you want to delete, it might be under a function but usually it's not. To guide your search in the file you can use the "

      " id "da-thumbs" -> inside this tag you should have the problematic <p> tag.
      If you get stack at anypoint came back here and we will do the best to help you.
  6. arobson13
    Member
    Posted 2 years ago #

    I don't think this is being created by my theme. I have switched themes and the code is still duplicated.

    The first link is created by PHP, and is supposed to loop through creating a link for each animal. There is no where in my code where it would create the extra link. And as I said above if i remove the embedded <div></div> tags the second link does not generate.

    Thank you for your replies!

  7. arobson13
    Member
    Posted 2 years ago #

    Strange. I didn't notice this earlier, but the code is different when I view the source and when I Inspect Element. This makes me think the links are being generated client side.

    'Inspect element' in Chrome:

    <a href="link.com"><br>
    <img>
    <div><span></span></div>
    </a>
    <p><a href="link.com"></a>
    </p>

    'View Source':

    <a href="link.com"><br />
    <img />
    <div><span></span></div>
    <p></a>

    I am going to go through the scripts running. I came across this article but it might not help. http://www.gkspk.com/view/programming/stop-wordpress-adding-p-tags-in-code-elements/

  8. arobson13
    Member
    Posted 2 years ago #

    Ok, so I broke it down to something completely weird. Has little to do with WordPress.

    Open up a new .HTML document and enter the following code:

    <a href="unique">hello<p></a>

    When you open it up and inspect element in Chrome or Firefox a duplicate link is created. Normally this would not be a problem since it doesn't copy the anchor value and you can use CSS to hide the p tag for formatting.

    Here is the Inspection results for both browsers: http://imgur.com/bgZcs

    So my issue has to do with the creation of the <p> tag which was added for a reason I must figure out. Perhaps the link above will now be of some use.

  9. arobson13
    Member
    Posted 2 years ago #

    I guess I resolved the issue. I will have to edit the WordPress filters using the above link as a guide and remove the added <p> tag which causes the strange results.

    Here is an answer as to the effect that is happening:
    http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission

    A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

  10. arobson13
    Member
    Posted 2 years ago #

    I edited the function wpautop() which is located in wp-includes/formatting.php. After some hacking away, I appended the following line of code (line 224):

    $allblocks = '(?:a|table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|option|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';

    As you can see, I added the a tag to the beginning of the string. This function, with the append, will add the p tags and remove them before returning the content string around the block tags listed in the $allblocks string. This will also add a new-line-feed in the source code for the a open and close tag.

    I am glad I was able to post the final fix. I hope this helps someone.

  11. thetarbre
    Member
    Posted 1 year ago #

    Yep, it worked like a charm!!! Thanks for your posting the final fix for this issue...!

  12. jnhghy
    Member
    Posted 1 year ago #

    It is not recommended to modify wordpress core files :
    http://codex.wordpress.org/Files_Automatically_Replaced_by_Core_Upgrade
    It is recommended you search for other solutions!

  13. arobson13
    Member
    Posted 1 year ago #

    jnhghy, you are right, this is a grey area where if you do not know what you are doing, it can have a drastic impact on other pages in your site.

    However, since wordpress is a very intrusive CMS, it will be likely that any corrections you make to the core files may fix errors generated by the wordpress core files.

    If you make the edit manually, you will need to update wordpress manually, and make sure to include the edits/corrections you have implemented previously or "You're gunna have a bad time".

Topic Closed

This topic has been closed to new replies.

About this Topic