Adding an html editor to plugin settings page

Question

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?

Thanks Dave. I did a bit of looking and thought i had it, but it didn't let me save. Can you take a look for me? — pressword
– pressword, Commented Mar 28, 2017 at 4:31
Try it wp_editor( $options['pw_fed_intro'], 'pw_fed_intro', array('textarea_name' => 'pw_fed_intro', 'media_buttons' => false) ); — MahdiY
– MahdiY, Commented Mar 28, 2017 at 6:01
removing echo didn't do anything. i don't don't why that fed should have been removed (i revised the code above), but that didn't change it either... any other options? — pressword
– pressword, Commented Mar 28, 2017 at 6:07

Dave Romsey · Accepted Answer · 2017-03-28 17:48:06Z

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

This was exactly it. I saw that comments aren't supposed to be for thanks but I'm ecstatic! Thanks for looking over it and your time. To make it NOT just a thanks, Mark had said to escape the fields in his answer, is that for the text areas, fields AND the wp_editor? — pressword
– pressword, Commented Mar 28, 2017 at 18:07
Happy to help, pressword! Yes, it's always a good practice to sanitize the data being saved and escape data before it is output. Take a look at wp_kses_post(). wordpress.stackexchange.com/questions/137583/… — Dave Romsey
– Dave Romsey, Commented Mar 28, 2017 at 18:28

Mark Kaplun · Accepted Answer · 2017-03-28 07:14:50Z

2

always always always escape output (ok, some rare cases you should not, but the rule of thumb is to escape). For textarea you need to html escape the content

<textarea><?php echo esc_html(get_option('my option')?></textarea>

having the space between the start and end textarea tags and the actual output also do not help and probably add some spaces around your actual ""content"

answered Mar 28, 2017 at 7:14

Mark Kaplun

23.8k7 gold badges44 silver badges66 bronze badges

Mark that definitely solved the space problem on my text area! Thanks! Do you know what i did wrong with the text editor also? why it doesn't save?

pressword
– pressword

2017-03-28 16:16:42 +00:00
Commented Mar 28, 2017 at 16:16
@pressword, the spaces, are because there is space between the tag and the "content" all spaces in html are being collapsed into at least one, so that is the reason for the extra space. As for why it is not saving... do other settings save?

Mark Kaplun
– Mark Kaplun

2017-03-28 16:56:00 +00:00
Commented Mar 28, 2017 at 16:56
space issue resolved. Yes the other fields save.

pressword
– pressword

2017-03-28 16:58:04 +00:00
Commented Mar 28, 2017 at 16:58

Add a comment |

Stack Exchange Network

Adding an html editor to plugin settings page

2 Answers 2

Your Answer

Linked

Hot Network Questions

Adding an html editor to plugin settings page

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions