Tips & Tricks

How to Disable Visual Editor in the Text Widget?

How to Disable Visual Editor in the Text Widget?

In the new version of WordPress 4.8, the text widget was changed and now new text widget comes with a simple visual and text editor. Similar to the one you see on the post edit screen.

After this update, many developers got a problem, some elements that they inserted on the site using a text widget worked uncorrected. Someone will say that you can make your custom widget and the problem will be solved, but it will take a long time to restore and remake everything. The best solution is to allow users to enable and disable the editor in a text widget when necessary, and now I’ll tell how I did it in my projects.

So, let’s start

We don’t know what version of WordPress use our buyer, and first we check the version. You can also add a new parameter to the theme settings page and add the activity check of this parameter to the condition. That’s exactly what I did.


// Disable Editor in the Text Widget
if ( $wp_version >= 4.8 && $theme_config['config']->get('enable_editor_text_widget', true) )
{
    ...
}

The next step we remove the text-widgets.js from the array of loading files.


// Disable Editor in the Text Widget
if ( $wp_version >= 4.8 && $theme_config['config']->get('enable_editor_text_widget', true) )
{
    add_action( 'admin_init', function()
    {
        global $wp_scripts;

        if ( $wp_scripts )
        {
            $wp_scripts->remove( 'text-widgets' );
        }
    });
}

Next, we change the fields in the widget form


// Disable Editor in the Text Widget
if ( $wp_version >= 4.8 && $theme_config['config']->get('enable_editor_text_widget', true) )
{
    add_action( 'admin_init', function()
    {
        global $wp_scripts;

        if ( $wp_scripts )
        {
            $wp_scripts->remove( 'text-widgets' );
        }
    });

    add_action('in_widget_form', function( $widget, $return, $instance )
    {
        if ($widget->id_base=='text')
        {
            $filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
            $title = isset( $instance['title'] ) ? sanitize_text_field( $instance['title'] ) : '';
            $text = isset( $instance['text'] ) ? esc_textarea( $instance['text']) : '';
            ?>
            <p>
                <label for="<?php echo $widget->get_field_id('title'); ?>"><?php esc_html_e( 'Title', 'deepsoul'); ?>:</label>
                <input class="widefat" id="<?php echo $widget->get_field_id('title'); ?>" name="<?php echo $widget->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
            </p>
            <p>
                <label for="<?php echo $widget->get_field_id('text'); ?>"><?php esc_html_e( 'Content', 'deepsoul' ); ?>:</label>
                <textarea class="widefat" rows="16" cols="20" id="<?php echo $widget->get_field_id('text'); ?>" name="<?php echo $widget->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
            </p>
            <p>
                <input id="<?php echo $widget->get_field_id('filter'); ?>" name="<?php echo $widget->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> class="checkbox onoff"/>
                <label for="<?php echo $widget->get_field_id('filter'); ?>"><?php esc_html_e( 'Automatically add paragraphs', 'deepsoul' ); ?></label>
            </p>
            <?php
        }
    }, 10, 3);

}

And last, we save the data when the user presses save


// Disable Editor in the Text Widget
if ( $wp_version >= 4.8 && $theme_config['config']->get('enable_editor_text_widget', true) )
{
    add_action( 'admin_init', function()
    {
        global $wp_scripts;

        if ( $wp_scripts )
        {
            $wp_scripts->remove( 'text-widgets' );
        }
    });

    add_action('in_widget_form', function( $widget, $return, $instance )
    {
        if ($widget->id_base=='text')
        {
            $filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
            $title = isset( $instance['title'] ) ? sanitize_text_field( $instance['title'] ) : '';
            $text = isset( $instance['text'] ) ? esc_textarea( $instance['text']) : '';
            ?>
            <p>
                <label for="<?php echo $widget->get_field_id('title'); ?>"><?php esc_html_e( 'Title', 'deepsoul'); ?>:</label>
                <input class="widefat" id="<?php echo $widget->get_field_id('title'); ?>" name="<?php echo $widget->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
            </p>
            <p>
                <label for="<?php echo $widget->get_field_id('text'); ?>"><?php esc_html_e( 'Content', 'deepsoul' ); ?>:</label>
                <textarea class="widefat" rows="16" cols="20" id="<?php echo $widget->get_field_id('text'); ?>" name="<?php echo $widget->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
            </p>
            <p>
                <input id="<?php echo $widget->get_field_id('filter'); ?>" name="<?php echo $widget->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> class="checkbox onoff"/>
                <label for="<?php echo $widget->get_field_id('filter'); ?>"><?php esc_html_e( 'Automatically add paragraphs', 'deepsoul' ); ?></label>
            </p>
            <?php
        }
    }, 10, 3);

    add_filter('widget_update_callback', function( $instance, $new_instance, $old_instance, $widget )
    {
        if ( $widget->id_base == 'text' )
        {
            $instance['filter'] = ! empty( $new_instance['filter'] );
        }
        return $instance;
    }, 10, 4);

}
Just paste this code into the functions.php file your theme and don’t forget to change the text domain and condition.

Leave a comment

Subscribe to our Newsletter

Something BIG is coming, you'll be the first to know about it.