Support » Developing with WordPress » Sortable fields in plugin settings page

  • I have added several textareas in plugin settings page. I was able to make them sortable (drag to reorder) by using jquery ui, but, of course, when I click save the order is not saved correctly
    What would be the proper way to do something like this

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz


    Create a hidden settings field that holds the ordering data. It’s value is updated by jQuery any time the ordering changes. You could add PHP code to the page’s output function to utilize the saved ordering so jQuery doesn’t have to reorder after page load.

    do we have an example?
    here is my code

    add_action( 'admin_menu', 'cmby_add_admin_menu' );
    add_action( 'admin_init', 'cmby_settings_init' );
    $settingfields = array('NA','HTML Banner','GIF Banner','Booking Form','Udemy Course', 'Test Missile');
    function cmby_add_admin_menu(  ) { 
        add_options_page( 'Cambrickyard Settings', 'Cambrickyard', 'manage_options', 'cambrickyard', 'cmby_options_page' );
    function cmby_settings_init(  ) { 
        global $settingfields;
        register_setting( 'pluginPage', 'cmby_settings' );
    		__( "Cambrick Yard Plugin Settings Page", "wordpress" ), 
        foreach ($settingfields as $id => $item) {
    		__( "Enter widget code", "wordpress" ), 
            array (
                'indicator' => $id,
                'class' => 'ui-state-default'
        function cmby_textarea_render_field($args) {
        $options = get_option( 'cmby_settings' );
        echo '<textarea cols="60" rows="5" name="cmby_settings[cmby_textarea_field_'.$args['indicator'].']">';
        echo $options['cmby_textarea_field_'.$args['indicator']];
        echo '</textarea>'; 
    function cmby_settings_section_callback(  ) { 
        echo __( 'Use fields below to enter the code to be displayed when shortcode called out', 'wordpress' );
    function cmby_options_page(  ) { 
        <div id="sortable">
    	<form action='options.php' method='post'>
    		settings_fields( 'pluginPage' );
    		do_settings_sections( 'pluginPage' );
    • This reply was modified 10 months, 1 week ago by  bcworkz. Reason: code fixed

    also, I forget to mention, the output has to reflect whats in the settings. So if I call shortcode with id=”1″ it has to output the ocntent of the first field in the plugin settings. So after reordering it has to output whatever new is on the position “1”. Thats why I need to save the order after reordering

    Moderator bcworkz


    Sorry, I cannot offer any examples. While this hidden field could be handled as a setting itself and hidden with CSS, that might cause problems with certain screen readers, I’m not sure. You can add a true hidden field to your page output and handle saving the POSTed value yourself by using the ‘whitelist_options’ filter as a sort of action hook. Your callback would simply return whatever is passed, but also grab the hidden field value from $_POST and update the related option.

    Modify how your $settingfields is assigned value. Get the value from the hidden field option. Only use the default if no option yet exists. As an indexed array, this will work well with your shortcode scheme. Get the option name from this array based on the shortcode ID minus 1. For example, assuming the default array is saved and the shortcode ID passed is 3, get the value for index 2, or ‘GIF Banner’. Get that option for output in place of the shortcode.

    The PHP part is relatively simple. You already have the tricky jQuery part — the drag and drop. What’s left is to get the field names in the new order and update the hidden field.

    BTW, any time you post blocks of code in these forums, please delimit your code with backticks or use the “code” button. Failure to do so will corrupt your code. I fixed your code for you this time 😉

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sortable fields in plugin settings page’ is closed to new replies.