Background

The main Michigan Daily website runs on WordPress, a framework built on top of PHP, a language commonly used for backend web development. WordPress websites usually also expose a representational state transfer application programming interface (REST API).

<aside> 💡 An API is the public facing interface that a program can interact with. For example, an array or list has certain functions that can be invoked on it (append, indexOf, find, etc). These functions can be considered part of the array’s API.

</aside>

A REST API specifically means that queries or (function or endpoint) calls to an API are independent of one another. The output of a specific API endpoint is not directly affected by the invocation of another API endpoint.

Many websites have REST APIs that return information about the website.

Use cases

We interact with the WordPress REST API for a few use cases:

1. The mobile application queries several endpoints to retrieve information about specific articles, categories, images, etc.
2. We track alternative text for photos and designs by querying the API to find if images published in stories contain alternative text.
3. The default WordPress REST API does not have all of the functionality that we need sometimes. Thus, we customize the API by implementing custom endpoints through a WordPress plugin.

Interacting with the WordPress API

REST APIs are typically implemented through a web server. The WordPress API is public and returns results in JSON format. Thus, you can interact with it through the browser. There is an official WordPress API handbook, but I don’t think it is well organized.

The default endpoint for the API is https://www.michigandaily.com/wp-json/wp/v2. If you open it in the browser, you’ll probably see a JSON blob. You may want to install an extension that better formats JSON files in your browser. The default endpoint isn’t too useful itself, but other endpoints start with the same URL.

Getting several posts with a script

To get a list of the most recent articles published on the website, you can use the https://www.michigandaily.com/wp-json/wp/v2/posts endpoint. Open that URL in your browser. Alternatively, we can also try to programmatically, like how we do with the mobile application. We’ll be creating a JavaScript script to do this.

1. Check your Node version with node --version.

   If the version is less than 18, update your Node version with the Node version manager.

   Run nvm install 18 and nvm use 18. If you don’t have nvm installed on your command line, then install it with these instructions.

2. Create a temporary directory in our daily directory called api.

3. Create a file called get.mjs inside the directory.

4. Paste this function stub into your file:

   const main = async () => {
     const response = await fetch("<https://www.michigandaily.com/wp-json/wp/v2/posts>");
     console.log(response);
   }
   
   main();
   

   Run the script with node get.mjs. A fetch will send a request to the specified URL. It will get a response, which needs to be further parsed. Currently, the script won’t print out anything too useful for us.