Adding an html editor to plugin settings page

by

I am creating a plugin settings page using the register_settings() api.

How can i create a html editor (wordpress default editor would be splendid) instead of just a text area.

This is an example of the code I am using:

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

function pw_textarea_intro_render(  ) { 

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

}

I’ve stripped the code down to just the one field, but there are more fields.

This is rendering the text area for me but I can’t format text and it keeps adding extra tabs before and after any text I enter into the settings page.

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' );
    ?>
    <textarea cols="40" rows="5" name="pw_settings[pw_textarea_intro]"> 
        <?php echo $options['pw_textarea_intro']; ?>
    </textarea>
    <?php

}

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

I added the new code as Dave suggested (thanks!) and now it loads the wp editor, but when I click save to commit changes it doesn’t save the wp_editor content. Any ideas?

2 s
2

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