"WordPress nonces are one-time use security tokens generated by WordPress to help protect URLs and forms from misuse"
The first step in the process is to Enqueue (Include) our script with WordPress and provide our script with a Base Url and a Nonce.
With the snippet above we first create a function called namespace_enqueue_scripts. Inside this new function we use the wp_enqueue_script function to enqueue a script called scripts.js as normal. Assuming the our script file lives inside our theme's directory we use the get_template_directory_uri function to get the full url to our theme.
Second we use the wp_localize_script function to add some custom data to our script. wp_localize_script accepts the following arguments:
- $handle: The handle of the script we want to add our data to. In our case we want to add data to the namespace-scripts script we enqueued.
- rootapiurl: This will be the Base Url for the Rest Api endpoints. We use the rest_url function to get this Url from WordPress, and then we escape it using the esc_url_raw function.
- nonce: Here use the wp_create_nonce function and pass 'wp_rest' to create the actual nonce token for the Rest Api.
In the snippet above we used the wp_enqueue_scripts hook. This hook will add our script.js file to the frontend of our website. If on the other hand we want to enqueue to the admin area, replace the add_action call with the code below:
This code is almost the same as we used earlier except that here we replaced the wp_enqueue_scripts hook with the admin_enqueue_scripts one. This will include our scripts on every single admin screen. If we want to add our script to a specific admin screen only we can alter our namespace_enqueue_scripts function like shown below:
In this altered version we accept a new parameter called $screen. We can use this new parameter to check if the current screen is the one we want to enqueue our script to.
if we want to enqueue our scripts specifically for the Gutenberg editor we can change our call to add_action like shown below:
Again this code is similar to our earlier code but here we replaced the wp_enqueue_scripts hook with the enqueue_block_editor_assets one. This will enqueue our scripts anywhere the Gutenberg editor is use. This is ideal for adding your own custom blocks to the editor or creating your own Gutenberg sidebar plugins.
Now that we have our scripts enqueued it's time to configure Axios with the localized data we added. For this we create a new file called Api.js and add the code below:
Here we First import Axios, and then create a new object called Api by calling the Axios.create function and passing it a object with the following items:
- baseUrl: This will be the Base Url for the Rest Api endpoints. In our case we pass it the mynamespace.rootapiurl object key.
- headers.content-type: The content type we expect. In our case 'application/json'
- headers.X-WP-Nonce: The nonce we want to send with our Api request. In our case we pass it the mynamespace.nonce object key.
As a last step we export the Api object and we now have a configured Axios object that we can start using in our scripts,
Next we are going to use our new Api object to call the /posts endpoint of the WordPress Rest Api like shown below:
Here we first import our Api object and then call the get method to call the /posts endpoint. When the data returns we simply output it to the console.
From here it is up to you to create some code to consume the Rest Api data.
Thanks for reading and stay safe