Auto Fill Input Fields for Unique Page Sidebars

When you are developing a website with WordPress and support for Unique Page Sidebars WordPress Plugins then you may noticed when add a sidebar all the widget parameters inputs are empty. Something like the below image

Here with this code example you can auto fill the widget parameters.

Step 1: include a javascript for WordPress admin interface.

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'admin-custom-js', get_template_directory_uri() . '/resources/js/custom-admin.js', array( 'jquery' ), '1.2', true );

Step 2: Write below codes on your custom-admin.js

/*
---------------------------------------------------------------------------------------
Auto fill input values for WordPress Unique Page Sidebars when creating a synamic sidebar with default values
---------------------------------------------------------------------------------------
*/

jQuery(document).ready( function($) {

    //Finding all inputs from unique page sidebars when creating a sidebar
    $("input[id^=ups_sidebars]").each( function( k, v ) {

        //Finding current input fields id
        id = $( this ).attr( 'id' );

        //Check if it has a default value already
        if ( $( this ).val() == '' ) {

            //Matching if it is the before_title field
            before_title = id.match(/bbefore_title/);
            if ( before_title ) {
            $( this ).val( '<h3 class="widget-title">' );
            }

            //Matching if it is the after_title field
            after_title = id.match(/bafter_title/);
            if ( after_title ) {
            $( this ).val( '</h3>' );
            }

            //Matching if it is the before_widget field
            before_widget = id.match(/bbefore_widget/);
            if ( before_widget ) {
            $( this ).val( '<div id="%1$s" class="widget %2$s">' );
            }

            //Matching if it is the after_widget field
            after_widget = id.match(/bafter_widget/);
            if ( after_widget ) {
            $( this ).val( '</div>' );
            }

        }

    });

});

That’s all if everything goes fine you will see a interface as the below image shown when adding a sidebar.

Note: Don’t forget to widget parameters as your need on javascript what you are using when registering a sidebar for your theme.