WordPress Editor removing div attributes

Question

I am helping out with a wordpress site for an upcoming marine conference. One of the things I am working on is for an interactive platform page. It uses a combination of css & javascript. I am noticing for each of the div tags I am putting in, it keeps on removing some of the attributes. For example...

I put in:

<div id="booth107"
          class="booth booth_20x10bronze"
          data-name="Fluval"
          data-link="http://www.fluvalaquatics.com/"
          data-logo="http://piscespets.com/wp-content/uploads/fluval-logo.jpg"
>&nbsp;</div>

and it comes out:

<div id="booth107" class="booth booth_20x10bronze">&nbsp;</div>

I am editing in text mode, not visual, and I am not flipping back and forth.

Anyone know why I might be losing some of my div attributes?

Answer 1

Try to add this code in your functions.php to override the messing up html code.

function override_tinymce_option($initArray) {
    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_tinymce_option');