Table of Contents

1. Introduction

2. Enabling DEBUG MODE in Wordpress

3. Setting up permalinks

4. Disabling the cache in the web browser

5. Setting up the project

6. Creating the admin page for the plugin

7. Adding Bootstrap to the project

8. Creating a basic grid for the buttons

9. Adding JQuery to the project

10.Adding the nonce to the HTML form

11. Adding an image preview

12. Working with the Wordpress REST API root endpoint

13. Using the Fetch API for the HTTP requests

14. Working with the REST API Authentication

15. Adding metadata to the image le

Introduction

This tutorial covers how to code an Image Uploader with the use of the Wordpress REST API. The plugin implements JQuery to add the frontend functionality and the Fetch API to make HTTP requests to the backend. The Wordpress plugin allows the user to upload one image at a time as well as the corresponding metadata like the title, alternative text, caption and description. Moreover when the user selects and image from the File Explorer then a smaller version of the chosen image file is displayed so that the user is certain on what file will be uploaded; once the upload is complete then the image file is listed in the Media Library of the Wordpress site.

Enabling DEBUG MODE in Wordpress

When developing Wordpress plugins it’s necessary to have access to the errors and warnings from Wordpress so that code errors can be fixed. Those errors and warnings can be displayed either on the site or in the console. In this case the errors and warnings will be shown in the console only. Moreover DEBUG MODE also enables developers to test functions in isolation by printing the result to a file called debug.log; such a file can be accessed by using the console as well. As you can see DEBUG MODE is important for developers so let’s enable it by opening the terminal and navigating to the Wordpress installation folder:

cd /var/www/html

Then open the file called wp-config.php and declare the next constants in the right location as shown below:

define( 'WP_DEBUG', true );
/* Add any custom values between this line and the "stop editing" line.
*/
define('WP_DEBUG_DISPLAY',false);
define('WP_DEBUG_LOG',true);
/* That's all, stop editing! Happy publishing. */

Setting up permalinks

When using Wordpress the users can customize the structure of the URLs of a site. The structure used will impact how we access the REST API endpoints. When coding a web application which makes HTTP requests the code may work for a given URL structure but if the URL structure is shifted then the code will fail. Before reading this tutorial ensure the structure of the URLs in your site is identical to the structure I used when writing this tutorial so that the code provided here runs seamlessly in your site as well. Head over to the Settings > Permalinks page and make sure the option Custom Structure is selected; in my case the value for the text field is /index.php/%postname%/. Finally presse the Save Changes button at the bottom of the page.

Disabling the cache in the web browser

As soon as a web page is displayed to the web browser some resources are saved into the web browser cache so that the next time you visit the same page you don’t have to wait too long and download all the resources again; the problem is that when developing web applications sometimes the latest version of a given file won’t be used by the web browser but the version of the file saved into the cache. Disabling the browser cache during the development of a web app enables you to see the latest version of a file and therefore you can see the changes made to the code instantly. In order to disable the browser cache you must right-click on a web page and select the option Inspect from the menu. A new window opens on the right side; select the Network tab and then select Disable cache; these steps work in Google Chrome only.

Setting up the project

In order to create a Wordpress plugin from scratch the first step is creating the root folder of the project as well as the main plugin file. Open the console and navigate to the Wordpress installation folder:

cd /var/www/html

Then navigate to the plugins folder:

cd wp-content/plugins

Finally create the root folder called imageUploaderJs:

mkdir imageUploaderJs

Open the code editor and create the main plugin file; in this case the file will be imageUploaderJs.php because the name of the file and the name of the root folder must be identical; that’s the way Wordpress knows such a file is the entry point for the plugin code. Inside the main plugin file add the next code snippet:

<?php
/*
Plugin Name: Image Uploader JS
Description: This image uploader uses the Wordpress Rest API
Author: your-name-here
*/

The above php code is a short description of the plugin; it’s the plugin metadata and is displayed inside the Plugins section within the Dashboard. Finally head over to the Dashboard and activate the plugin so that changes we make to the code take effect instantly and you can see the result.

Creating the admin page for the plugin

The plugin needs an area in the Dashboard and a menu item so that users can access the image uploader easily. Open the code editor and create a subfolder called mainScreen. Then create a new php file inside called adminPage.php; this file is where the logic to create a new admin page will be located. We must notify Wordpress that a new php file was added to the project; this notification must be located inside the main plugin file otherwise Wordpress won’t be aware of the new php code and won’t run it. Open the imageUploaderJs.php file and add the next php code snippet:

require_once plugin_dir_path(__FILE__)."mainScreen/adminPage.php";

The plugin_dir_path() function returns the path to the root folder or the project. The function require_once includes the contents of the new file into the main plugin file. Once Wordpress is aware of the addition of the adminPage.php file then open the file and add the next php code inside:

<?php
function rch_image_uploader_js_html(){
?>
     <div class="wrap">
        <h1>
          <?php
            echo get_admin_page_title();
           ?>
        </h1>
     </div>
   <?php
}
function rch_setting_up_admin_page(){

       add_menu_page(
          "Image Uploader JS",
          "Image Uploader JS",
          "manage_options",
          "rch_image_uploader_js",
          "rch_image_uploader_js_html",
          "dashicons-images-alt",
          10
        );
}
add_action("admin_menu","rch_setting_up_admin_page");

The action() function is used to run hooks and their corresponding functions; hooks allow users to run specific code at specific moments and for specific places; hooks are the way developers can customize the behaviour and appearance of Wordpress. In this case the admin_menu hook is used to configure a new admin page and its corresponding menu item. The second parameter of the add_action function is the name of the function which will be run when the hook is called by Wordpress. The add_menu_page function is the place where the admin page and its menu item will be configured and requires the next parameters:

● The “Image Uploader JS” parameter is the title of the admin page.

● The second “Image Uploader JS” string represents the label for the menu item.

● The “manage_options” parameter represents the permission required to see the admin page; in this case only admins can see it.

● The “rch_image_uploader_js” parameter is the slug; the portion of text within the URL which represents the current admin screen being displayed.

● The “rch_image_uploader_js_html” parameter represents the name of the function which outputs the HTML markup.

● The “dashicons_images_alt” parameter represents the icon of the menu item.

● The number 10 represents the position of the menu item; you can play with this value and use other number. Note how the container HTML element is a div and uses the class wrap; this class is required by Wordpress to style the admin page. Also; the function get_admin_page_title() is called in between a pair of header tags.

<-------This is the end of the free trial, thank you!!! ----------------------->