0
Answered

custom html not persisting

matstev2 2 weeks ago updated by Jesse Owens (Community Manager) 1 week ago 1

When I try to wrap a div with a link <a href="link-name"></a> the code dissapears and usually messes up the layout of my page. How can I add custom html to my pages without issues like this?

Answer

Answer
Answered

Hello-

When you add custom HTML in WordPress, it has to pass through validation to make sure that the HTML is correct. WordPress does this to try and correct any errors you may have accidentally made, like forgetting to close a tag.

Using a <div> element as the anchor for a link doesn't pass validation because <a> tags have to use an "inline" element for the anchor. I did some searching on how to resolve this and it seems like you're not alone. This developer solved the issue with JavaScript, while others have found more solutions. Some of these solutions won't solve the issue, however, because WordPress will still strip out the "invalid" HTML when you save your content or switch between the Visual and HTML editor.

I think the best solution I found while researching this can be found in this code example on CodePen, as it uses only valid HTML and CSS (please note, I didn't write that CodePen so please forgive me for the sample text in that example). 

I hope this allows you to solve the issue, please let us know if you have any more questions.

Answer
Answered

Hello-

When you add custom HTML in WordPress, it has to pass through validation to make sure that the HTML is correct. WordPress does this to try and correct any errors you may have accidentally made, like forgetting to close a tag.

Using a <div> element as the anchor for a link doesn't pass validation because <a> tags have to use an "inline" element for the anchor. I did some searching on how to resolve this and it seems like you're not alone. This developer solved the issue with JavaScript, while others have found more solutions. Some of these solutions won't solve the issue, however, because WordPress will still strip out the "invalid" HTML when you save your content or switch between the Visual and HTML editor.

I think the best solution I found while researching this can be found in this code example on CodePen, as it uses only valid HTML and CSS (please note, I didn't write that CodePen so please forgive me for the sample text in that example). 

I hope this allows you to solve the issue, please let us know if you have any more questions.