Let's say i am having three sections in wordpress customizer. I'm enqueueing the js file with admin_enqueue_scripts action.(should i enqueue it with customize_controls_enqueue_scripts ? )

I'm creating an array using get_option('section_names') and then using foreach loop to create the three sections.

in js file i'm using jquery UI's sortable('serialize') and sending the new order of the sections using ajax to a php file . That php file then uses update_option('option_name', $_POST['list_items']) to update the database.

So the database is getting updated whenever the change in order of the sections is happening. But what i want is the permanent change(database change) should happen upon clicking the publish button. What is the procedure?

Here is the code below that is being used to populate sections in customizer(kirki toolkit is being used):

$sortable_sections = get_option('sortable_sections');

foreach ($sortable_sections as $sortable_section) {
    Kirki::add_section( $sortable_section, array(
        'title'          => esc_attr__( strtoupper($sortable_section), 'airspace' ),
        'description'    => esc_attr__( 'Insert content about this section', 'airspace' ),
        'panel'          => 'frontpage_panel',
    ) );
  • 1
    show us the code you use to show theses configuration fields in customiser.
    – mmm
    Commented Jul 9, 2018 at 20:50
  • @mmm i'm not working with fields or their values, i'm working on the sections and their position on the customizer
    – seeker
    Commented Jul 10, 2018 at 7:59

1 Answer 1


When you add a new field for customisation, WordPress handles how the values are saved, retrieved, previewed.
Then you don't have to save the value with a AJAX call.

You just have to add the new field that store orders of sections. Then with JavaScript, you modify the value of this field and use field.trigger("change") to send the change.

You can also use a custom class for this field :

  • I'm not working on the fields, right now i'm purely interested on the sections. I have a panel, and inside the panel i have three sections. I want to make them drag and droppable to change the order of their position in customizer, it is easily done by using jquery sortable function attached to the classes of the sections. i want to save that change to database upon clicking on the publish button. that's it. not working with fields and their values.
    – seeker
    Commented Jul 10, 2018 at 7:53
  • just like a table with number of rows, we can use .sortable() to the rows to make them sortable and we can use a button when clicked, saves the changes to the database and changes on the browser accordingly. i want to achieve the same things on wordpress customizer sections.
    – seeker
    Commented Jul 10, 2018 at 7:56
  • to do that, you need to save the order in a field of the customiser. without that, you cannot use the "publish" button.
    – mmm
    Commented Jul 10, 2018 at 8:30
  • isn't there any action hook which triggers upon "publish" button clicked? all i need to do is get the updated array sent from js file to the php file and use update_option('option_name', $new array) when "publish" button is clicked.
    – seeker
    Commented Jul 10, 2018 at 8:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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