data-accordion removed in Visual Editor

by

The question:

Using Foundation 5’s accordion, and the data-accordion html data attribute in:

<dl class="accordion" data-accordion>

gets removed when a user only edits a page with the Visual Editor.

Does anyone know of a way to keep this from happening?

I noticed this link that allows you to Register Additional HTML Attributes for TinyMCE and WP KSES, though I’m not sure where I’d place data-accordion in that code.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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; 
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment