Two things come to mind.
1) Empty tags are usually removed as clutter cleanup.
2) Anchor tags are usually clickable links. It may be removed since it does not have a href attribute.
There are some workarounds.
1) Add a non-breaking space ( ) between the two anchor tags:
<a id="Menu"> </a>
2) Add a non-clickable href:
<a href="javascript:void(0);" id="Menu"> </a>
The above will prevent the link from doing anything.
If you’re using the Block Editor there should be an HTML block you can use instead. I do not believe this will remove empty tags as the regular TinyMCE editor does.
-
This reply was modified 6 years, 3 months ago by
Howdy_McGee.
My internal links work for a few minutes. Long enough for me to save, view my page, click all my links (13 on this page) to see if they work okay.
But when I return to the document, all my tags: have been replaced with
After this, clicking a “read more” link goes nowhere.
My href code remains unchanged.
Can you help me find the error. Thank you
https://www.alionhasroared.org/index.php/feast-days/feast-days-just-for-the-jews/
Read more.
changed to:
Read more.
trying again:
[raw]Read more.[/raw]
[raw][/raw]
changed to
[raw]Read more.[/raw]
[raw] [/raw]
one more try
(a href=”#Abraham430″)Read more.(/a)
(a id=”Abraham430″)(/a)
changed to:
(a href=”#Abraham430″)Read more.(/a)
_nbsp_
From the sounds of it you’re running into issues of empty anchors. Maybe try something like this:
<a href="javascript:void(0);" id="abrham430"> </a>
That being said, if you already have a link that jumps to a specific location, the end point doesn’t _need_ to be an anchor. You could say:
<a href="#Abraham430">Read More</a>
<div id="Abraham430">This is about Abraham.</div>
Or you could use an empty div with a non-breaking space:
<div id="Abraham430"> </div>
I am still having issue with this.
When I enter this:
<div align="center" id="frontpage-menu">
<a href="/organic-farm-to-table-menu/#Vegan"><h4>Vegan</h4></a>
<div class="divide"></div>
<a href="/organic-farm-to-table-menu/#Jerk"><h4>Jerk</h4></a>
<div class="divide"></div>
<a href="/organic-farm-to-table-menu/#Pasta"><h4>Pasta</h4></a>
<div class="divide"></div>
<a href="/organic-farm-to-table-menu/#Seafood"><h4>Seafood</h4></a>
<div class="divide"></div>
</div>
It changes it to this:
<div id="frontpage-menu" align="center">
<h4>Vegan</h4>
<div class="divide"></div>
<h4>Jerk</h4>
<div class="divide"></div>
<h4>Pasta</h4>
<div class="divide"></div>
<h4>Seafood</h4>
<div class="divide"></div>
</div>
I found the below which doesn’t strip the code but I have to save the HTML somewhere because the editor is blank when I go back to edit the content.
https://linklay.com/stop-wordpress-automatically-removing-html-markups/
// START Stop removing div tags from WordPress – Linklay
function ikreativ_tinymce_fix( $init )
{
// html elements being stripped
$init[‘extended_valid_elements’] = ‘div[*]’;
// pass back to wordpress
return $init;
}
add_filter(‘tiny_mce_before_init’, ‘ikreativ_tiny_mce_fix’);
// END Stop removing div tags from WordPress – Linklay
Hello,
Form the looks of it, the system is trying to correct your HTML. You shouldn’t put a block level element inside an inline level element. The Anchor tag is an inline level element and the header 4 tag is a block level element. Try converting the h4 to a span and add a class to it so you can style it to look like an h4. This is more about semantic HTML than the site arbitrarily removing your formatting.
<a href="/organic-farm-to-table-menu/#Vegan"><span class="style-h4">Vegan</span></a>
Thank you so much. That helped!!
