Adding an html editor to plugin settings page

Here’s an updated version of your original code, which solves the saving issue.

The reason that the content inside of the WP Editor was not saving was due to the value of the textarea_name parameter passed to wp_editor().

This is wrong:

 'textarea_name' => 'pw_intro',

It should look like this:

 'textarea_name' => 'pw_settings[pw_intro]',

I also removed the echo from wp_editor(), fixed up the extra spaces around the text area, etc.

Full code example:

add_action( 'admin_menu', 'pw_add_admin_menu' );
add_action( 'admin_init', 'pw_settings_init' );
function pw_add_admin_menu(  ) { 
    add_menu_page( 'wpset', 'wpset', 'manage_options', 'pset', 'pw_options_page' );
}

function pw_settings_init(  ) { 
    register_setting( 'pluginPage', 'pw_settings' );

    add_settings_section(
            'pw_pluginPage_section', 
            __( 'Live Credentials', 'pw' ), 
            'pw_settings_section_callback', 
            'pluginPage'
    );

    add_settings_field( 
            'pw_textarea_intro', 
            __( 'Header Intro Text', 'pw' ), 
            'pw_textarea_intro_render', 
            'pluginPage', 
            'pw_pluginPage_section' 
    );

    add_settings_field( 
            'pw_intro', 
            __( 'Intro', 'pw' ), 
            'pw_intro_render', 
            'pluginPage', 
            'pw_pluginPage_section' 
    );
}

function pw_textarea_intro_render(  ) { 
    $options = get_option( 'pw_settings', array() );

?><textarea cols="40" rows="5" name="pw_settings[pw_textarea_intro]"><?php echo isset( $options['pw_textarea_intro'] ) ?  $options['pw_textarea_intro'] : false; ?></textarea><?php
}

function pw_intro_render() {
    $options = get_option( 'pw_settings', array() );
    $content = isset( $options['pw_intro'] ) ?  $options['pw_intro'] : false;
    wp_editor( $content, 'pw_intro', array( 
        'textarea_name' => 'pw_settings[pw_intro]',
        'media_buttons' => false,
    ) );
}

// section content cb
function pw_settings_section_callback() {
    echo '<p>Section Introduction.</p>';
}

Leave a Comment