Edit: Enjoyed this? Check out my new post on AJAX using JSONP in WordPress.
There are some great posts and a fantastic wiki page explaining how to use AJAX in WordPress. But I haven’t found a quick plug-and-play tutorial. So here goes…
The problem: A simple form that will give the visitor an input and when they click “Next” it will send the content of the input to the server who will send all the $_POST fields back as JSON. Why you’d want this? Who knows. But it’s a simple problem to solve that you can adopt to do anything.
Here’s the Gist
This is the plug-and-play version my friends. (Extra points if you recognize what ui framework is here… DON’T JUDGE ME IT’S ONLY FOR WIREFRAMING.)
How to use the code
include_once(‘inputtitle_submit_inc.php’);in functions.php. Make sure inputtitle_submit_inc.php in in your template folder.
- page-ajax_input.php is a template page, make sure it’s in in your template folder. Just create a page in WordPress using “Input Submition Page”.
- inputtitle_submit.js should be in a folder named ‘js’ in your template folder. Otherwise
wp_enqueue_script( ‘inputtitle_submit’, get_template_directory_uri() . ‘/js/inputtitle_submit.js’, array( ‘jquery’ ));
How it works
This is a simple template file. The important elements here are the input field and the next button. They are hooked in the JS file.
The server-side magic.
The first line enqueues the js file and pops some variables in for the AJAX onto the page. They are called in inputtitle_submit_scripts().
The next two lines enable the AJAX to work. They create the ajax action “ajax-inputtitleSubmit”. If you only have “wp_ajax_ajax-inputtitleSubmit” it will only work for logged in users. If you only have “wp_ajax_nopriv_ajax-inputtitleSubmit” it will only work for logged out users. If you do this, make sure you have serious security in place.
Those two lines tie the action to myajax_inputtitleSubmit_func(). This is what happens server side. Inside you’ll find some nonce magic for security. The function checks the nonce, then converts the $_POST variables to JSON and sends them back to the browser. Don’t forget the exit();
First I encapsulate the JQuery so that it won’t conflict with anything. Then when the DOM is ready…
When “Next” is clicked it sends a POST AJAX request to the server. The AJAX URL was defined in wp_localize_script in inputtitle_submit_inc.php as well as the nonce.
We send the action, the nonce and the inputted “title” as variables to the server. Then in outputs the response (all $_POST variables as JSON) in the console.
I built this for reference sake. If you can suggest any best practices or improvements please comment below.