1

I'm developing a Bootstrap theme for Wordpress and it's very difficult to implement since Bootstrap uses empty tags with data-attributes and classes but TinyMCE removes the empty tags when I save the page I'm editing.

Here is my code:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

It is part of the Bootstrap Carousel.

Now I'm trying to add this to my front page using the text editor. Whenever I save the page TinyMCE removes the span-tags which are meant for screenreaders.

I tried to read a lot about this and found some solutions like using TinyMCE Advanced plugin or adding some lines of code to the functions.php file but none of those solutions worked. They were all posted years ago and TinyMCE has updated many times after that.

TinyMCE Advanced plugin doesn't have an option anymore to exclude tags from this "cleanup" procedure.

-2

tinyMCE.init({ ... verify_html: false ... });

  • 1
    While a good idea, please expand more on how this piece of code would be implemented in a WordPress theme. – Ciprian Jul 19 '18 at 15:46
  • 1
    How do you implement this in the context of WordPress? Could you expand on this a bit more, maybe using the tiny_mce_before_init hook? – Howdy_McGee Jul 19 '18 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.