data-accordion removed in Visual Editor

Here is an example of How to Update kses and TinyMCE to allow select data-* attributes in WordPress. Reference

add_action( 'after_setup_theme', 'x_kses_allow_data_attributes_on_links' );
function x_kses_allow_data_attributes_on_links() {
  global $allowedposttags;

    $tags = array( 'a' );
    $new_attributes = array(
        'data-foo' => array(),
        'data-bar' => array(),
    );

    foreach ( $tags as $tag ) {
        if ( isset( $allowedposttags[ $tag ] ) && is_array( $allowedposttags[ $tag ] ) )
            $allowedposttags[ $tag ] = array_merge( $allowedposttags[ $tag ], $new_attributes );
    }
}

add_filter( 'tiny_mce_before_init', 'x_tinymce_allow_data_attributes_on_links' );
function x_tinymce_allow_data_attributes_on_links( $options ) { 
    if ( ! isset( $options['extended_valid_elements'] ) ) 
        $options['extended_valid_elements'] = ''; 

    $options['extended_valid_elements'] .= ',a[data-foo|data-bar|class|id|style|href]';

    return $options; 
}

Leave a Comment