Dynamically add/remove Input Fields in WordPress Metabox using jQuery

Dynamically Add/Remove Input Fields in WordPress Metabox

There are many cases where you may want to add/remove duplicate input fields dynamically in WordPress metabox to enhance the usability of default posts or custom posts. Here in this article I will show you how to create the front-end of it by using jQuery and then save & retrieve those data to WordPress database.

So I am splitting this tutorial in 2 sections. In first section I’ll show you how to implement the front-end part and in the next will discuss about the backend coding part.

So let’s begin.

1. Creating metabox and using jQuery scripts in the field

At first we will create the custom metabox as below for the default post type of WP.

Creating Metabox

To do this first we need to update the functions.php file of currently activated theme. Here is the code below.

I have added this code at the bottom of functions.php file, which will create the metabox. Now let me explain you a bit of this code.

This is a predefined action hooks in wordpress to hack into WP admin area and  my_custom_codes_init_func is the callback function, which I have defined below. If you want to know more about action hooks then visit this. Within the my_custom_codes_init_func function we have added  add_meta_box() method, which is a WP function to add meta boxes (Reference) to posts and it takes few parameters as mentioned at the above comment of the code. As third parameter we have passed the name of the callback function my_custom_metabox_func  to implement the necessary HTML in the metabox. At the function we have added a button a add more field and a default input field which later will be duplicated by the help of jQuery.

Now, we are creating a JS file called dynamic-fields.js, where we will write the code below. If you follow the comments in the code then it is quiet strait forward to make you understand what is happening.

Now, we need to link this js file to our admin page. To do this we to again a few more line of codes as below to functions.php  file.

Here I have again used an action hook defined by WP to link the script. wp_enqueue_script() is a method (reference) which accepts few parameters as mentioned above comment of the code.

With this we have completed our first section of coding where you can find a properly working add/remove buttons to add/remove input fields dynamically with the help of jQuery.

2. Saving the meta data and display fields properly

Now we have to save the value from this dynamically generated fields to WP database post meta. Here we are again going to use another action hook in functions.php file. The code as following below and descriptions are present there as comments.

update_post_meta  is a WP function that take 3 parameters and update the meta data for the post or create the meta if not already exists. By this simple code snippet we can save the meta value to WP database.  Here we need to note one thing that the value which we submitting to database is an array value, so when we will fetch & display it that time we need to keep it in mind.

After saving meta data successfully to our database, we need to show the values to the fields where we have input the data. Currently it will not display the value to the fields which we have created to input the values but if we check it then we can see it there. Now we will fetch the data and just display data above the fields. so we need to update previous code of where we have created the metabox.

before-and-after-saving-value

Here as you can see the data is now showing after saving but it is not at the place where it has been typed. so we need to make it dynamic in respect to PHP to show the data in respective fields.

Now our saved data showing in their respective fields, but there is one problem. If you check it in our jQuery script then you can find that we have limited maximum number of fields to 10 but if we now try to add more fields then we can see that it will go to 11 fields. And that is because we have already 2 fields available by default and after that it is adding 9 more fields. so in order to make it work properly with jQuery script we need to make the jQuery script know about that there is already 2 fields available from the value of database. To do this we need to take that script to our PHP file and update as necessary. Follow the code below.

Highlighted lines are commented as it is now not needed to load our external jQuery script file as we have now included those scripts to our page footer to make it work with our PHP codes. If you wish you can remove those lines of codes and delete the dynamic-fields.js  file, I have commented it here for the reference purpose.

Now it is a fully functional script for WordPress to dynamically add/remove input fields in metabox.

I think it will be helpful for you. If so share your opinions in the comment below.

Happy coding 🙂

4 comments:

  1. This is what i really want to do in my site. I tried it and worked as well. but I couldn’t print metabox value where i want to apply. Normally I use to code to print meta box value like ;
    $myvalue = get_post_meta($post->ID, ‘mytext’, true);
    echo $myvalue ;

    I would be grateful to you if you help me to solve the issue.

    1. I’m glad that you liked it and this tutorial helped you to get your work done.

      If you see the point 2, then you can find all the necessary code from there to display metabox value to there respective position.

Leave a Reply

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