5

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?

  • 1
    Check out wp_editor(). – Dave Romsey Mar 27 '17 at 21:16
  • 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 Mar 28 '17 at 4:31
  • Try it wp_editor( $options['pw_fed_intro'], 'pw_fed_intro', array('textarea_name' => 'pw_fed_intro', 'media_buttons' => false) ); – MahdiY Mar 28 '17 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 Mar 28 '17 at 6:07
3

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>';
}
  • 1
    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 Mar 28 '17 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 Mar 28 '17 at 18:28
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"

  • 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 Mar 28 '17 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 Mar 28 '17 at 16:56
  • space issue resolved. Yes the other fields save. – pressword Mar 28 '17 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.