Fun with the WordPress REST API

Sal Ferrarello / @salcode

salferrarello.com/slides/wp-rest-api-fun

( Jump to Resources )

Ordering Sandwiches

JSON

  {
    "name": {
      "first": "Sal",
      "last": "Ferrarello"
    },
    "wcus": [
      2015, 2016
    ]
  }

Why?

Chrome Extension

Reading and Writing

Update title

await wp.apiFetch({
  data: {
    title: 'My new title',
  },
  method: 'POST',
  path: 'wp/v2/pages/8926'
});

Big Ideas

• Read from REST API
• Write to REST API
• Add new endpoints

JSON

  {
    "name": {
      "first": "Sal",
      "last": "Ferrarello"
    },
    "wcus": [
      2015, 2016
    ]
  }

Unformatted JSON

  {"name":{"first":"Sal","last":
  "Ferrarello"},"wcus":[2015,2016]}

Unformatted JSON

  {"name":{"first":"Sal","last":
  "Ferrarello"},"wcus":[2015,2016]}

Formatted JSON

  {
    "name": {
      "first": "Sal",
      "last": "Ferrarello"
    },
    "wcus": [
      2015, 2016
    ]
  }

JSONVue

Chrome browser extension to pretty print JSON

See JSONVue in Chrome Web store

source code

Formatting Alternative

While not as convenient as a browser extension, you can use this JS trick

await (await fetch(
  window.location.href
)).json()

See Pretty Print JSON URL blog post

Which URL?

How to find blog post REST API URL

<link
  rel="alternate"
  type="application/json"
  href="https://salferrarello.com/wp-json
    /wp/v2/posts/6799"
/>

source: https://salferrarello.com/math-metaphors/

https://salferrarello.com/wp-json/wp/v2/posts/6799

Find REST API URL with JavaScript

document.querySelector(
  'link[rel="alternate"]' +
  '[type="application/json"]'
).href

https://salferrarello.com/wp-json/wp/v2/posts/6799

Run JS in Browser Console

https://salferrarello.com/wp-json/wp/v2/posts/6799

JavaScript

(await (await fetch(
  '/wp-json/wp/v2/posts/6799'
)).json())

https://salferrarello.com/wp-json/wp/v2/posts/6799

Last Modified (JS)

jsonData = (await (await fetch(
  '/wp-json/wp/v2/posts/6799'
)).json());
jsonData.modified

https://salferrarello.com/wp-json/wp/v2/posts/6799

Chrome Extension

Same-origin Policy

Web browser JavaScript can only access URLs on the same domain

Same-origin policy

Exploring WP REST API

Single Post

https://salferrarello.com/wp-json/wp/v2/posts/6799

Structure

Base

https://example.com/wp-json/

Route (a.k.a. Path)

wp/v2/post/6799

Route

wp/v2/post/6799

First Part is "Namespace"

wp/v2

Route

salcode/v1/owner

Namespace

salcode/v1

Route

salcode-v1/owner

Namespace

salcode-v1

Route

salcodev1/owner

Namespace

salcodev1

Route

tuna/owner

Namespace

tuna

Route

salcode/v1/owner

Namespace

salcode/v1

No route was found

https://salferrarello.com/wp-json/wp/

Namespace

wp/v2

REST FORBIDDEN

REST Forbidden (JS)

(await (await fetch(
  '/wp-json/wp-site-health/v1/' +
  'tests/background-updates'
)).json());

REST Forbidden (JS)

REST Authenticated (JS)

(await (await fetch(
  '/wp-json/wp-site-health/v1/' +
  'tests/background-updates'



)).json());

REST Authenticated (JS)

(await (await fetch(
  '/wp-json/wp-site-health/v1/' +
  'tests/background-updates',
  {
    headers: { 'X-Wp-Nonce': 'd2bd6ec6c3' },
  }
)).json());

REST with Nonce (JS)

X-Wp-Nonce

On /wp-admin pages available from JavaScript global

wpApiSettings.nonce

/wp-admin/admin-ajax.php?action=rest-nonce

wp.apiFetch()

await wp.apiFetch({
  path: '/wp-site-health/v1/' +
    'tests/background-updates'
})

wp.apiFetch()

Update title

await wp.apiFetch({
  data: {
    title: 'My new title',
  },
  method: 'POST',
  path: 'wp/v2/pages/8926'
});

Route vs Endpoint

Routes vs Endpoints

Adding a REST API Endpoint

add_action(
  'rest_api_init',
  'salcode_owner_rest'
);

function salcode_owner_rest() {
  register_rest_route(
    'salcode/v1', '/name',
    [
      'callback' => 'salcode_owner_callback',
      'permission_callback' =>
                            '__return_true',
    ]
  );
}

function salcode_owner_callback() {
  return [
    'name' =>
      [
        'first' => 'Sal',
        'last' => 'Ferrarello'
      ],
    'wcus' => [ 2015, 2016 ],
  ];
}

Result

  {
    "name": {
      "first": "Sal",
      "last": "Ferrarello"
    },
    "wcus": [
      2015, 2016
    ]
  }

Remember REST FORBIDDEN

register_rest_route(
  'salcode/v1', '/name',
  [
    'callback' => 'salcode_owner_callback',
    'permission_callback' =>
                          '__return_true',
  ]
);

Where Do I Put This Code?

• functions.php
• a custom plugin you write
• mu-plugins directory

mu-plugins ?

/wp-content/mu-plugins/

Same-origin Policy

MyWeather Plugin adds REST endpoint with weather

https://ferrarello.com/wp-json/myweather/v1/weather

https://ferrarello.com/weather/

Resources

• Run Code in the Browser Console
• Format JSON without Browser Extension Pretty Print JSON URL
• JSONVue Chrome browser extension (source)
• Add Owner REST Endpoint code
• Proxy weather endpoint code
• WordPress REST API Handbook
• Posts in WordPress REST API Handbook

Sal Ferrarello

salcode.com/wcm

Image Credits

• "A Milano Sandwich from the Italian Store." by WilliamMarlow is licensed under CC BY-NC-SA 2.0.
• People at desks from Pix4free