I have this problem in a specific page of my wordpress website: when I switch from text editor to visual editor I immediately lose all my links (placed in a div element).

I give you a detailed example of what happen every time:

I start editing my page and the section with href looks like this

Then, if I switch to visual editor and come back to the text, it becomes like this

As you can see the "a" element has disappeared and it's very annoying because I have to replace all my links every time or switch to a previous edit and losing my recent ones.

How can i solve this? I would like to be able to switch freely between editing modes without losing any code.

Thanks a lot.

I have this problem in a specific page of my wordpress website: when I switch from text editor to visual editor I immediately lose all my links (placed in a div element).

I give you a detailed example of what happen every time:

I start editing my page and the section with href looks like this

Then, if I switch to visual editor and come back to the text, it becomes like this

As you can see the "a" element has disappeared and it's very annoying because I have to replace all my links every time or switch to a previous edit and losing my recent ones.

How can i solve this? I would like to be able to switch freely between editing modes without losing any code.

Thanks a lot.

• wp-admin
• visual-editor

• Is this the standard TinyMCE editor? It's been a while since I used that sorry. I don't think there's any round trip to the server here, so whatever's happening will be in the TinyMCE JavaScript – Rup Commented Dec 15, 2020 at 11:44
• Is this the classic editor or the block editor? Keep in mind this stack is for programming questions, not user support, any answer you get will require basic programming knowledge to understand, if this is not what you were hoping for you should look at the support forums – Tom J Nowell ♦ Commented Dec 15, 2020 at 12:23
• I use the classic editor, this one: it.wordpress/plugins/classic-editor I don't know if there is something wrong with my code or with wordpress editor.. thanks – Matteo Farinella Commented Dec 16, 2020 at 9:10

1 Answer 1

The problem is your <div> inside of your anchor tag. See this answer on StackOverflow about what tags are allowed inside of anchors.

Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes.

and

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Anchors are inline, while <div> tags are block-level, hence the block-level element cannot go inside of the inline element. If you need the element inside of the link, try using a <span> with the display:block CSS property:

<a href="somelink"><span class="tag">Link</span></a>