{"id":60866,"date":"2016-09-30T07:42:35","date_gmt":"2016-09-30T07:42:35","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=60866"},"modified":"2025-05-20T08:31:57","modified_gmt":"2025-05-20T08:31:57","slug":"using-ajax-wordpress","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/using-ajax-wordpress\/","title":{"rendered":"Using AJAX in WordPress"},"content":{"rendered":"\n

In this article will demonstrate that how you can use ajax in wordpress<\/strong>. There is a different proccess of using ajax in wordpress as ajax request first goes to admin-ajax.php file and then proccess it.if there is no function created then admin-ajax.php will return -1.
Here is sample code of using ajax in wordPress in front end<\/p>\n\n\n\n

<?php \nadd_action( 'wp_enqueue_scripts', 'my_enqueue' );\nfunction my_enqueue() {\n wp_enqueue_script('like_post', get_template_directory_uri().'\/js\/post-like.js', '1.0', 1 );\n wp_localize_script('like_post', 'ajax_var', array(\n 'url' => admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('ajaxnonce')\n ));\n}\n\n?><\/pre>\n\n\n\n
In above Code we have used wp_localize_script() function which Localizes a registered script with data for a JavaScript variable. <\/strong> Inside which we have used an array for url<\/strong> and nonce.<\/strong><\/p>\n\n\n\n
now we can use url <\/strong>and nonce<\/strong> variables in our javascript code easily.<\/p>\n\n\n\n
if you want execute the script  to fire on the front-end for both visitors and logged-in users, then you need to use these hooks:<\/p>\n\n\n\n
<?php\nadd_action( 'wp_ajax_my_post_like', 'my_post_like' );\nadd_action( 'wp_ajax_nopriv_my_post_like', 'my_post_like' );\n\n ?><\/pre>\n\n\n\n
where my_post_like() <\/strong>is our defined function which will be invoked once ajax request is fired .<\/p>\n\n\n\n
var $wk_jq=jQuery.noConflict();\n (function($wk_jq){ \n \t$wk_jq(window).bind("load",function(){\n\t$wk_jq(".post-like a").click(function(eve){ \n\t\theart = $wk_jq(this);\n\t\tpost_id = heart.data("post_id"); \n\t\t$wk_jq.ajax({\n\t\t\ttype: "post",\n\t\t\turl: ajax_var.url,   \/\/ variable defined above with an array for url and nonce \n\t\t\tdata: "action=my_post_like&nonce="+ajax_var.nonce+"&post_id="+post_id,  \/\/ Action variable defines the name of the php function which proceess ajax request based on the variable we have passed   \n\t\t\tsuccess: function(count){\n\t\t\t\t \/\/ Do your stuff here once ajax response is returned\n\t\t\t}\n\t\t});\n\t\teve.preventDefault();\n\t\t\t\t\n\t\treturn false;\n\t\t});\n\t});\n})($wk_jq);<\/pre>\n\n\n\n
In our above code we also passing a nonce variable along with the post id for security reasons<\/p>\n\n\n\n
<?php\nfunction my_post_like()\n{\n  $nonce = $_POST['nonce']; \n \/\/ Verify nonce field passed from javascript code\n    if ( ! wp_verify_nonce( $nonce, 'ajaxnonce' ) )\n        die ( 'Busted!');\n   \n  if(isset($_POST['post_like']))\n  {\n    \/\/ do your stuff and return count;\n    echo $count;\n    }\n    else\n      echo "default text";\n  }\n  exit;\n}\n?><\/pre>\n\n\n\n
If you have noticed, in above code we have used exit <\/strong>ajax in wordPress returns 0 for any function, so we must use exit at the end of the function<\/p>\n\n\n\n
That\u2019s all for how to use Ajax in wordPress<\/strong>.<\/p>\n\n\n\n

Live Demo<\/a> Buy Now<\/a><\/p>\n\n\n\n
WordPress WooCommerce Marketplace Stripe Connect<\/h1>\n\n\n\n
Updated 1 April 2024<\/p>\n\n\n\n
<\/a><\/a><\/p>\n\n\n\n
Revisions<\/p>\n\n\n\n
Array<\/p>\n\n\n\n
GENERATE PDF<\/a><\/p>\n\n\n\n
 <\/h3>\n\n\n\n
WordPress WooCommerce Marketplace Stripe<\/a> Connect plugin, which works as a payment gateway. Thus, allowing users to can accept payments from all around the world for their e-commerce store.<\/p>\n\n\n\n
This plugin can run in both tests and live modes. Hence, in addition, it facilitates the sellers to connect using stripe connect.<\/p>\n\n\n\n
Using WooCommerce Multi Vendor Subscription<\/a>, sellers can add subscription products and customer can subscribe to them on a daily, weekly, monthly, or yearly basis.<\/p>\n\n\n\n
Note:<\/strong><\/p>\n\n\n\n