Create custom field in wordpress with Jquery

What I say about wordpress? I will just say that wordpress is great CMS. Almost 25% websites in this world are running with wordpress. Now you can put up a question that why people are using wordpress? This is nice question because there are so many alternatives of wordpress. The main reason for WordPress success is its “customization”. You can create any kind of website with wordpress from simple blog to ecommerce portal.

There are lots of ways for customization in wordpress. In this article, I will discuss about custom field. Here you will learn that how to create extra field in your post or page?

I am going to explain you that how to create custom field in wordpress with Jquery. Here you will learn that how to add, update, select and delete post metadata. For Better explanation, I will create a very simple plugin with step by step example.

 

Who can learn this?

  1. Intermediate Knowledge of wordpress.
  2. Basic Knowledge of WordPress Action and Filter.
  3. Basic knowledge of wordpress plugin development.
  4. Knowledge of HTML.
  5. Knowledge of Jquery.
  6. And intermediate knowledge of php.

 

Main Goal: I want to add related question to my post where I can add single or multiple questions with edit and delete option.Here is sample screen shot:

Create wordpress custom field with jquery

 

Create Custom Field Plugin

  • Index.php : All the function running in file.. Follow these simple steps:

Determine Plugin

Whenever you will create plugin the above comment code is most important. With this comment code WordPress will determine your plugin.

 

Include Custom Jquery Code

Include jquery and custom jquery with above code. wp_enqueue_script() helps you to add your custom code in wordpress.

 

 Get and display Question Field

In the above code, add_meta_box() is main function. with the help of this function you can add custom meta box in post or page with some specific arguments. You can read its arguments in the commented section of above code. get_post_meta() function helps you to get data from wp_postmeta table.

 

Creating a plugin for WordPress is no different, and it ’ s a best practice to make your plugin match the WordPress user  interface as closely as possible. This helps keep the interface consistent for end users and can make your plugin more professional by providing a solid user experience from the start. WordPress features many different styles that you can easily use in your plugin.

 

Update or add custom field

You can save your data in wp-postmeta table with update_post_meta() function. You can read more about these function at the end of this article.

 

Full Source Code

 

 

  • admin-custom.js: All the jquery code is running here.

Delete and Add  Single Question Via Jquery

Now this is important code if you want to add or delete single custom field with jquery. Here i have used some DOM traversal methods like parent(), remove() etc.

 

Some important functions
  1. wp_enqueue_script()
  2. plugin_dir_url()
  3. add_action()
  4. add_meta_box()
  5. get_post_meta()
  6. unserialize()
  7. esc_attr()
  8. update_post_meta()