Support » Fixing WordPress » Text Editor Removing “a” Tag

  • Any idea why the HTML editor is stripping the a tag? I add the example below but when I click on text/html it’s gone.

    <a id="Menu"></a>

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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 (&nbsp;) between the two anchor tags:

    <a id="Menu">&nbsp;</a>

    2) Add a non-clickable href:

    <a href="javascript:void(0);" id="Menu">&nbsp;</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 7 months, 3 weeks 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">&nbsp;</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">&nbsp;</div>

    MyWorldz

    (@myworldz)

    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">
    &nbsp;
    <h4>Vegan</h4>
    &nbsp;
    <div class="divide"></div>
    &nbsp;
    <h4>Jerk</h4>
    &nbsp;
    <div class="divide"></div>
    &nbsp;
    <h4>Pasta</h4>
    &nbsp;
    <div class="divide"></div>
    &nbsp;
    <h4>Seafood</h4>
    &nbsp;
    <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

    Howdy_McGee

    (@howdy_mcgee)

    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>

    MyWorldz

    (@myworldz)

    Thank you so much. That helped!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.