I recently had the need to perform some ajax functions on the backend of Texas Tech Today and wasn’t sure exactly how to go about it. So after a search, I found this great explanation: Simplified AJAX For WordPress Plugin Developers using Jquery. But it stops short of explaining how to receive some data from a POST, give it to PHP to do something with, and then return a result back to the form.
So, I thought I would detail how to do that in WordPress in a plugin.
The plugin just has a basic options page (Settings -> Ajax4WP) and lets you save an option to the database via ajax. Go ahead and download and install it; you’ll see how simple it is.
1. Create a php file that will have our javascript code, and save it into your plugins folder.
The reason we need our javascript code to be in a PHP file is to get the “get_option(‘siteurl’)” value dynamically, since we’ll need that to reference our PHP file with the ajax function.
js-Ajax4WP.php (download the plugin files)
<?php include('../../../wp-config.php'); $site_url = get_option('siteurl'); ?> jQuery(document).ready(function() { //when the link with the id of save_settings is clicked, get the value of the text field and start doing the ajax stuff jQuery('#save_settings').click(function() { var Ajax4WP_test_setting = jQuery("#Ajax4WP_test_setting").val(); //action is the name of the php function in your main plugin file jQuery.post("<?php echo $site_url; ?>/wp-admin/admin-ajax.php", {action:"Ajax4WP_save_settings", 'cookie': encodeURIComponent(document.cookie), Ajax4WP_test_setting:Ajax4WP_test_setting}, function(res) { var message_result = eval('(' + res + ')'); if (!message_result.success) { jQuery("#Ajax4WP_test_setting").css("border","2px solid #cc0000"); } alert(message_result.message + ' ' + message_result.setting); }); return false; }); });
This is jQuery ajax code that takes the value of a text field and passes it to Ajax4WP_save_settings() in our plugin file. We use jQuery.post to define a post variable (Ajax4WP_test_setting) that PHP can use.
Once the plugin code does its thing on the server (step 2 below), it returns the result back to this function at “function(res)”. Then we eval the json result and use an alert to display a message.
2. Create your standard plugin file and put in the Ajax4WP_save_settings function.
Ajax4WP.php (download the plugin files)
... // our ajax action: add_action('wp_ajax_Ajax4WP_save_settings', array(&$this, 'Ajax4WP_save_settings'), 10); function Ajax4WP_save_settings() { $name = 'Ajax4WP_test_setting'; $value = $_POST['Ajax4WP_test_setting']; if ($value == "") { $message_result = array( 'setting' => "", 'message' => 'Please enter a Setting Value!', 'success' => FALSE ); } else { update_option($name, $value); $message_result = array( 'setting' => $value, 'message' => 'Saved! You entered:', 'success' => TRUE ); } echo json_encode($message_result); exit; } ...
This is standard PHP to process a POST request. When we’re through, we echo the json_encode() result. NOTE: json_encode is a PHP >= 5.2 only function, so be sure you are up to date on your PHP install.
3. Make a php file that will contain basic html and will get included on our settings page
Ajax4WP-settings.php (download the plugin files)
<div id="Ajax4WP Settings" class="inside" style="margin-left: 29px; width: 200px;"> <h3>Ajax4WP Settings</h3> <div id="loading_message"></div> <p> <label for="Ajax4WP_test_setting">Setting Value:</label> <br /> <input type="text" id="Ajax4WP_test_setting" name="Ajax4WP_test_setting" value="<?php if (isset($this->Ajax4WP_test_setting)) { echo $this->Ajax4WP_test_setting; } ?>" size="20" /> </p> <p><a href="#" id="save_settings" class="button button-highlighted">Save Settings</a></p> </div>
This is just a “stub” and gets included in our plugin. That way we don’t have a lot of html code mucking up the main plugin file. You can see what’s going on better in the source code when you download the files.
I hope that helps you out if you are wondering how to use jQuery and ajax in your WordPress plugins. Please leave a comment if you have any questions. Thanks!