Question 419857 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Stop WordPress from stripping out custom <dotlottie-player> element

I am using the Tatsu page builder and using their Code module to insert dotlottie code, such as:

<dotlottie-player src="https://lottie.host/******************.lottie" background="transparent" speed="1"  loop autoplay></dotlottie-player>

This works fine; however when I use the usual WordPress Update button for other reasons not related to the page builder, WordPress strips out this code.

I have tried adding the below code to functions.php, but it still got stripped.

function allow_lottie_tags($tags, $context) {
    // Add for all contexts
    $allowed_atts = array(
        'src' => true,
        'background' => true,
        'speed' => true,
        'loop' => true,
        'autoplay' => true,
        'class' => true,
        'id' => true,
        'style' => true
    );

    // Apply to both default and 'post' context
    if ($context === 'post' || $context === 'default') {
        $tags['dotlottie-player'] = $allowed_atts;
    }

    return $tags;
}

// Apply to multiple filters to catch different contexts
add_filter('wp_kses_allowed_html', 'allow_lottie_tags', 999, 2);
add_filter('post_allowed_html', 'allow_lottie_tags', 999, 2);

I then tried adding this, with no luck.

// Also try to force it globally
function hook_lottie_early() {
    global $allowedposttags, $allowedtags;

    $allowed_atts = array(
        'src' => true,
        'background' => true,
        'speed' => true,
        'loop' => true,
        'autoplay' => true,
        'class' => true,
        'id' => true,
        'style' => true
    );

    $allowedposttags['dotlottie-player'] = $allowed_atts;
    $allowedtags['dotlottie-player'] = $allowed_atts;
}
add_action('init', 'hook_lottie_early', 1);

What am I doing wrong? Should I go to a dynamic shortcode instead, or is there another way to handle this?

Tags:

2

Answers


  1. 0

    Try to disable WordPress content filtering:

    remove_filter('content_save_pre', 'wp_filter_post_kses');
remove_filter('excerpt_save_pre', 'wp_filter_post_kses');

    This prevents custom tags like <dotlottie-player> from being stripped but exposes potential security risks. Only use this if you fully control who can edit content.

    If this is not working you should go to a dynamic shortcode instead as you said (I recommend this too because The shortcode approach is the most robust and secure way to include custom tags like <dotlottie-player>)

    EDIT:
    To limit disabling content filtering to administrators only, wrap it in a role check:

    if (current_user_can('administrator')) {
    remove_filter('content_save_pre', 'wp_filter_post_kses');
    remove_filter('excerpt_save_pre', 'wp_filter_post_kses');
}

    This keeps custom tags intact for admins while maintaining security for other users.

    Login or Signup to reply.
  2. 0

    The issue you’re encountering arises because WordPress sanitizes and strips out custom HTML tags that are not explicitly allowed. While your attempts to extend the wp_kses_allowed_html and $allowedposttags are logical, they may not fully resolve the issue, as WordPress sometimes aggressively sanitizes post content, especially in certain contexts like the block editor or when using the update button.

    Here’s how you can resolve the issue:

    1. Dynamic Shortcode (Recommended Approach)

    Using a shortcode is a robust and WordPress-compliant way to include custom elements like .

    Add the following code to your functions.php file:

    function render_dotlottie_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'src' => '',
            'background' => 'transparent',
            'speed' => '1',
            'loop' => 'true',
            'autoplay' => 'true',
            'class' => '',
            'id' => '',
            'style' => ''
        ),
        $atts,
        'dotlottie'
    );

    // Build the attributes string
    $attributes = '';
    foreach ($atts as $key => $value) {
        if (!empty($value)) {
            $attributes .= esc_attr($key) . '="' . esc_attr($value) . '" ';
        }
    }

    return '<dotlottie-player ' . trim($attributes) . '></dotlottie-player>';
}
add_shortcode('dotlottie', 'render_dotlottie_shortcode');

    Usage:

    Instead of directly embedding , use the shortcode:

    [dotlottie src="https://lottie.host/******************.lottie" background="transparent" speed="1" loop="true" autoplay="true"]

    2. Bypassing KSES Filters (Less Recommended)

    If you need to keep the tag as raw HTML, you can disable the KSES filter entirely for specific user roles (e.g., administrators):

    function disable_kses_for_admin() {
    if (current_user_can('administrator')) {
        remove_filter('content_save_pre', 'wp_filter_post_kses');
        remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');
    }
}
add_action('init', 'disable_kses_for_admin');

    Warning: This method disables WordPress’s content sanitization and should only be used if you trust all the administrators on your site.

    3. Fix for Allowed Tags Not Working

    Your existing approach could fail if the wp_kses_allowed_html filter isn’t applied in the relevant context. Make sure your filter runs with the appropriate priority and context. Here’s an updated version of your function:

    function allow_lottie_tags($tags, $context) {
    $allowed_atts = array(
        'src' => true,
        'background' => true,
        'speed' => true,
        'loop' => true,
        'autoplay' => true,
        'class' => true,
        'id' => true,
        'style' => true,
    );

    $tags['dotlottie-player'] = $allowed_atts;

    return $tags;
}
add_filter('wp_kses_allowed_html', 'allow_lottie_tags', 10, 2);

    4. Verify Other Plugins or Builders

    If the above solutions still don’t work, the issue could be caused by interference from another plugin or the Tatsu page builder itself. Some page builders or plugins aggressively sanitize post content. You may need to check their settings or contact their support to ensure compatibility with custom HTML tags.

    Recommendation
    Using a shortcode is the safest and most future-proof approach. It avoids conflicts with WordPress’s content sanitization processes while providing a clean and reusable solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search