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.

Create Custom Fields to Input Data with Meta Box

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.

Fill in the information for tab Field

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

Choose product for the Post type section

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

Create a button to set the default value

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

A new button with the label created

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.

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.

Pick Tools for Your Case Studies

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. How to Create ACF Flexible Content Field with Meta Box
  3. How to Create a Product Page using Meta Box Plugin
  4. How to Add Related Posts to WordPress Using Meta Box
  5. How to Create a Classified Ads Website using Meta Box
  6. Create Posts Series in WordPress Using Meta Box
  7. How to Add Guest Author in WordPress using Meta Box (Part 1)
  8. How to Add Guest Author in WordPress using Meta Box (Part 2)
  9. Create Dynamic Favicon in WordPress using Meta Box plugin
  10. How to Build a Hotel Booking Website Using Meta Box - P1
  11. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  12. Create a Filter to Find Hotels by Location
  13. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  14. How to Create an FAQs Page Using Meta Box
  15. How to Manually Reorder Posts with Meta Box
  16. How to Add Custom JavaScript Actions Using Button Field with Meta Box
  17. Display a User List On the Frontend with Meta Box
  18. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  19. How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
  20. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS
  21. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  22. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  23. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  24. How to Add Custom Fields to Display Banners using Meta Box Plugin
  25. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  26. How to Create a Recipe with Meta Box Plugin
  27. How to Create an Auto-Updated Cheat Sheet in WordPress
  28. How to Create Online Admission Form for School or University
  29. How to Create Online Reservation Form for Restaurants using Meta Box
  30. How to Create Buttons with Dynamic Link using Custom Fields
  31. How to Create Category Thumbnails & Featured Images Using Custom Fields

Leave a Reply

Your email address will not be published. Required fields are marked *