How to Add Custom JavaScript Actions Using Button Field with Meta Box

In WordPress, there are only default functional buttons on the backend for you to do some actions like submitting posts or adding categories. Do you want to add other custom buttons to make your management much easier? So, read this article to know how to add custom JavaScript actions using the button field with Meta Box in the most convenient way.

First, you need to have Meta Box plugin. It has a free version on WordPress.org here. With the free Meta Box plugin, you are provided with a framework to create custom fields.

However, to create custom fields easily, in this case, the button field, with the intuitive UI without coding yourself, you have to buy Meta Box Builder extension. There is another free tool to do it without coding: Online Generator. If you want to code yourself, you can skip this extension.

After installing and activating this plugin and extension, we will start creating a custom JavaScript action using the button field with Meta Box now. In this article, I will create two buttons for my eCommerce site using the WooCommerce plugin: one to reset the inputs and another to set default values.

Step 1: Create Custom Fields to Input Data with Meta Box

Before adding custom Javascript actions using the button field, we need some custom fields to make a demo.

I will create some extra custom fields for my WooCommerce site to input data. If you don’t know how to add custom fields for a WooCommerce website, you can read this article.

I’ve just made 3 custom fields: wholesale prices, retail price, and discount. Remember the ID of these fields because you need to insert them to the code in the third step.

Step 2: Create Custom Buttons with Meta Box Builder

Go to Meta Box > Custom Fields > Add New, click the Add Field button and select the Button field in the dropdown menu.

You need to fill in the information for this field and remember the field’s ID to add it to the code in the next step. Here, I renamed the ID  button_reset for easy remembering. Click Publish when you finish.

In the Settings tab, choose product for the Post type section to show the buttons on product pages, then click Save Changes.

Similarly, come back to the Fields tab and create a button to set the default value, fill in the information, and click Update.

After creating this button field, you can go to any product page and see a new button with the label you created above:

Step 3: Adding JavaScript to Handle Custom Actions

In the theme’s function.php file, add this code:

add_action( 'rwmb_enqueue_scripts', 'twentytwenty_enqueue_custom_script' );
function twentytwenty_enqueue_custom_script() {
        wp_enqueue_script( 'script-id', get_template_directory_uri() . '/assets/js/admin.js', array( 'jquery' ), '', true );
}

This code enqueues a script file running in the admin. As claimed, this file’s name is admin.js in the assets/js folder of themes.

Then, create an admin.js file in the assets/js folder with this content:

jQuery( function ( $ ) {

$( '#button_reset' ).on( 'click', function() {
                $( '#product-information' ).find( 'input[type=text]' ).val('');
} );

        $( '#set_default' ).on( 'click', function() {
                $( '#product-information' ).find( '#whole_sale_price' ).val('150000');
                $( '#product-information' ).find( '#retail_price' ).val('100000');
                $( '#product-information' ).find( '#discount_price' ).val('80000');
        } );

} );

Explanation:

$( '#button_reset' ).on( 'click', function(): this function runs when you click the Reset button created above ( my button’s ID is button_reset). When you click this button, this code will run:

$( '#product-information' ).find( 'input[type=text]' ).val('')

It will set all the value of the custom fields in the field group with the ID product-information to blank, which means all the value of the fields wholesale price, retail price, and discount will be deleted.

$( '#set_default' ).on( 'click'): it is executed when clicking the Default button. When you click this button, these codes will run:

$( '#whole_sale_price' ).val('150000'): it sets all the input data of the wholesale price field (with the ID is whole_sale_price) to 150000 (if you want to change this default value, you can replace it here with any value you want).

( '#retail_price' ).val('100000') and find( '#discount_price' ).val('80000'): similarly, they set the input data of the retail price and discount sub-field to 100000 and 80000 respectively.

Now, when you click the Reset button created above, it deletes all the value of the custom fields. And when clicking the Default value, all the values are set to the default value.

The Last Words

So, now you can create your own custom button on the backend with the help of the Meta Box plugin and the Meta Box Builder extension. It will make the management and use of your WordPress more convenient and effective. I also suggest you should style these fields to give your users a better experience.