wordpress editor removes/re-formats <span> tag within the <a> tag

1 Views

I have this piece of HTML: 

<p>
<a class="home_link sel_link" id="home_link_01" title="ABOUT" onclick="javascript: return home_link_click(1);"><span>ABOUT</span></a><br /> 
<a class="home_link" id="home_link_02" title="TEXTS" onclick="javascript: return home_link_click(2);"><span>TEXTS</span></a><br /> 
<a class="home_link" id="home_link_03" title="STILLS" onclick="javascript: return home_link_click(3);"><span>STILLS</span></a><br /> 
<a class="home_link" id="home_link_04" title="AUDIO" onclick="javascript: return home_link_click(4);"><span>AUDIO</span></a><br /> 
<a class="home_link" id="home_link_05" title="VIDEO" onclick="javascript: return home_link_click(5);"><span>VIDEO</span></a><br /> 
<a class="home_link" id="home_link_06" title="ARTWORK" onclick="javascript: return home_link_click(6);"><span>ARTWORK</span></a><br /> 
<a class="home_link" id="home_link_07" title="TRANSCRIPTS" onclick="javascript: return home_link_click(7);"><span>TRANSCRIPTS</span></a>
</p>

Now when I put it in the WordPress (3.5.1) deafult editor[or with TinyMCE Advanced (3.5.8) installed] and publish/update it it’s fine. But once I update the page for second time (after making other changes), the above code reformats to:

Read More
<a class="home_link sel_link" id="home_link_01" title="ABOUT" onclick="javascript: return home_link_click(1);"></a><span>ABOUT</span>

<a class="home_link" id="home_link_02" title="TEXTS" onclick="javascript: return home_link_click(2);"></a><span>TEXTS</span>

<a class="home_link" id="home_link_03" title="STILLS" onclick="javascript: return home_link_click(3);"></a><span>STILLS</span>

<a class="home_link" id="home_link_04" title="AUDIO" onclick="javascript: return home_link_click(4);"></a><span>AUDIO</span>

<a class="home_link" id="home_link_05" title="VIDEO" onclick="javascript: return home_link_click(5);"></a><span>VIDEO</span>

<a class="home_link" id="home_link_06" title="ARTWORK" onclick="javascript: return home_link_click(6);"></a><span>ARTWORK</span>

<a class="home_link" id="home_link_07" title="TRANSCRIPTS" onclick="javascript: return home_link_click(7);"></a><span>TRANSCRIPTS</span>

Any idea what to do/what not?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Your problem is that your <a> tags don’t have href attributes in them, so I think that WordPress’s TinyMCE editor is treating them as named anchors and not links.

    What you need to do is just put a dummy href=”#” in your links and it should work fine, like so:

    <p>
<a href="#" class="home_link sel_link" id="home_link_01" title="ABOUT" onclick="javascript: return home_link_click(1);"><span>ABOUT</span></a><br /> 
<a href="#" class="home_link" id="home_link_02" title="TEXTS" onclick="javascript: return home_link_click(2);"><span>TEXTS</span></a><br /> 
<a href="#" class="home_link" id="home_link_03" title="STILLS" onclick="javascript: return home_link_click(3);"><span>STILLS</span></a><br /> 
<a href="#" class="home_link" id="home_link_04" title="AUDIO" onclick="javascript: return home_link_click(4);"><span>AUDIO</span></a><br /> 
<a href="#" class="home_link" id="home_link_05" title="VIDEO" onclick="javascript: return home_link_click(5);"><span>VIDEO</span></a><br /> 
<a href="#" class="home_link" id="home_link_06" title="ARTWORK" onclick="javascript: return home_link_click(6);"><span>ARTWORK</span></a><br /> 
<a href="#" class="home_link" id="home_link_07" title="TRANSCRIPTS" onclick="javascript: return home_link_click(7);"><span>TRANSCRIPTS</span></a>
</p>

    I’ve tested it, and although it will strip out the <p> and <br> tags, it otherwise preserves the <spans> in the <a> tags.

    So, yeah, just add href attributes, it seems.