Author: Ben Rothman

In this post we will learn ways to run a PHP function from JQuery and then from react.

First the JQuery:

jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {
            action: "my_user_vote",
            nonce: nonce
         },
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

I’m sure many of you recognize the javascript code block above, added to your code to call an AJAX function and run a PHP function from javascript. The above code will call the PHP function my_user_vote() when an action picked up by JQuery takes place if the function exists, the AJAX hooks were added correctly and the script was in fact localized with the ajaxurl.

If we want to pass data from the original JQuery function that calls the PHP function TO that PHP function, we can simply add more ‘data’ to the call and that data/those variables will be accessible in the PHP as $_POST variables in the function that is called with the names the data was given in the data part of the call.

data : {
            action: "my_user_vote",
            nonce: nonce,
            myVariable: "foobar"
         },

Now, in my PHP function I can get the value “foobar” simply by

public function my_user_vote() {
     $my_variable = wp_unslash( wp_kses_post( $_POST'myVariable'] ) );
...
}

Now from React:

Inside the React element that you wish to send the request from we first define a function that will send a request to a specific endpoint and pass the PHP function a variable called “answers”. Define the following new function in the React element:

const run_algorithm = async () => {
  try {
      const formData = new FormData();
      formData.append('answers', JSON.stringify(answers));

      const response = await fetch('/wp-json/v1/run_algorithm', {
          method: 'POST',
          body: formData,
      });

      const responseData = await response.text();
      console.log(responseData);
  } catch (error) {
      console.error('Error calling PHP function:', error);
  }
};

Then in the return for that element, call the function. In this case we will call the PHP function when a button in react is pushed:

return (
  <>
  <div>
      <button onClick={run_algorithm}>Run PHP Algorithm</button>
  </div>
.
.
.

Finally we will do two things in the PHP. Firstly we will register a new REST endpoint and we will specify the callback function to be run when that endpoint is hit (in this case by the React request):

add_action('rest_api_init', function () {
  register_rest_route('/v1', '/run_algorithm', array(
      'methods' => 'POST',
      'callback' => 'run_algorithm',
  ));
});

Secondly we ill define the actual callback function that is hit by the REST endpoint:

function run_algorithm() {

  // pass the answers from the react
  $answers = wp_unslash(wp_unslash($_POST['answers']));

  // Return a response or print the answers for demo purposes
  return $answers;
}

These are not the only ways to send an asynchronous request from js that runs a PHP function using the REST API in WordPress but these are two possible methods that can be used depending on the structure of the project.

This article assumes you have knowledge of PHP, JQuery, developing for WordPress and enqueueing scripts and using AJAX calls that work but do not use nonce security.

I am not here to try to sell you on using nonces. Nonces do add security to AJAX calls but they are not REQUIRED, just greatly recommended. WordPress describes nonces as “a one-time token generated by a website… This could prevent unwanted, repeated, expired, or malicious requests from being processed.”

In other words, a nonce is a unique key that your website creates that allows you to verify actions. For the purposes of this article, we’re going to focus on using nonces to ensure that requests are originating from our own website.

First, let’s start by generating the nonce. The proper way of doing this is by localizing your javascript files in the PHP where you register and enqueue the script files.

wp_register_script( 'cp_script', plugin_dir_url( __FILE__ ) . '/library/js/cp_script.js', [ 'jquery' ], 'all', true );

		wp_localize_script( 'cp_script', 'vars', [
			'ajaxurl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce('any_text'),
		] );

		wp_enqueue_script( 'cp_script' );

In the code above we register a script, point to it’s file, tell WordPress jquery is a dependency, and then localize into the script 1) the ajax url and 2) the nonce that we generate

Then inside the script file, create a JQuery on click function and inside it put this AJAX call:

jQuery.ajax({
	type: 'POST',   // Adding Post method
	url: cp_script.ajaxurl, // Including ajax file
	data: {
	 "action": "my_function",
	 "data"   : data,
	 "nonce": cp_script.nonce
	},
	success: function( response ) { // Show returned data using the function.
		alert( response );
	}

The final step is the shortest. Inside of my_function, the function being called by the AJAX call, just add the actual check as it’s first line:

function my_function() {
     check_ajax_referer( 'any_text', 'nonce' );
...

The check is just that one line. Notice ‘any_text’ can be subbed for any string you choose as long as it matches the string used in the function to generate the nonce, and ‘nonce’ can also be any variable name, as long as it matches the parameter passed in the data of the AJAX call.

Happy WordPressing!

Sources:

How to Add a WordPress AJAX Nonce

This post is long overdue on this blog. I have personally used this method of querying and iterating through the results many many times. Below is the standard structure for a query and a loop. This query and loop will find all ‘post’s on this WordPress website that have the ‘people’ taxonomy with ‘bob’ checked off.

<?php
// define the search arguments
$args = array(
	'post_type' => 'post',
	'tax_query' => array(
		array(
			'taxonomy' => 'people',
			'field'    => 'slug',
			'terms'    => 'bob',
		),
	),
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
	echo '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<li>' . get_the_title() . '</li>';
	}
	echo '</ul>';
} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

After a site migration I got this error. Don’t panic, this was an easy fix, go to Settings > Permalinks and choose ‘Post name’ then press the save button. Easy right? Happy WordPressing!