In my plugin, I have some jQuery-Ajax code that processes form data and adds it to the database as soon as the button is clicked. Since many people have a different path to their plugin folder, I was wondering if there was anyway to standardize the URL that points to the data processing PHP file. See my example below:
$.ajax({
type: "POST",
url: "url_to_php_file_path.php",
data: data,
cache: false,
success: function() {
alert.("added");
}
});
Firstly, all ajax calls should be registered through wp_ajax
add_action('wp_ajax_add_something', 'add_something');
This code should be in your plugin file, along with the function add_something
function add_something(){
//logic
}
Then in the front end, you should be using the ajaxurl
global variable supplied by Wordpress.
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'add_something', //this was defined earlier
data: 'other data here'
},
success: function(data){
//do whatever with the callback
}
});
This negates the need to explicitly declare any URL, and as such, is the proper way to perform ajax calls in Wordpress.
In WordPress, all AJAX requests must be made to the following URL:
http://www.example.com/wp-admin/admin-ajax.php
You should not make an AJAX request directly to a file residing in the plugin or theme directory.
Also, do not hard-code the above URL, instead you should use the following function to construct the URL:
<script>
ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
Alternatively to the above, you can use wp_localize_script()
, but this is not required, the above is fine too.
Note: Don't worry about the "admin" part, this URL is the correct one to use for all users, including non-logged-in (guest) users.
You need to let WordPress know which function should process your AJAX request.
For that purpose you'll create a custom function, and register it using the wp_ajax_*
and wp_ajax_nopriv_*
hooks:
add_action('wp_ajax_mycustomfunc', 'mycustomfunc'); // Logged-in users
add_action('wp_ajax_nopriv_mycustomfunc', 'mycustomfunc'); // Guest users
function mycustomfunc() {
$whatever = esc_html($_POST['whatever']);
echo 'It works: '.$whatever;
exit; // This is required to end AJAX requests properly.
}
Finally, here is how you would make a proper AJAX request:
(function ($) {
$(document).ready(function () {
var my_data = {
action: 'mycustomfunc', // This is required so WordPress knows which func to use
whatever: "yes it is" // Post any variables you want here
};
jQuery.post(ajax_url, my_data, function(response) {
alert('Got this from the server: ' + response);
});
});
})(jQuery);
If you had to put it all into one file, here's how you'd do it:
// Register my custom function for AJAX processing
add_action('wp_ajax_mycustomfunc', 'mycustomfunc'); // Logged-in users
add_action('wp_ajax_nopriv_mycustomfunc', 'mycustomfunc'); // Guest users
function mycustomfunc() {
$whatever = esc_html($_POST['whatever']);
echo 'It works: '.$whatever;
exit; // This is required to end AJAX requests properly.
}
// Inline JavaScript
add_action('wp_footer', 'my_inline_js');
function my_inline_js() { ?>
<script>
// Set the "ajax_url" variable available globally
ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
// Make your AJAX request on document ready:
(function ($) {
$(document).ready(function () {
var my_data = {
action: 'mycustomfunc', // This is required so WordPress knows which func to use
whatever: "yes it is" // Post any variables you want here
};
$.post(ajax_url, my_data, function(response) { // This will make an AJAX request upon page load
alert('Got this from the server: ' + response);
});
});
})(jQuery);
</script>
<?php
}
Note: For the ajax_url
part, you could use wp_localize_script()
instead of setting it manually, but it is less flexible as it requires to specify an existing enqueued script, which you might not have.
Note: Also, for outputting inline JavaScript manually into a page, the wp_footer
hook is the correct one to use. If using wp_localize_script()
then you would use the wp_enqueue_scripts
hook instead.