Atte Liimatainen

<p>Converts frontend to JSON response when request is done with certain conditions.</p>
<h3>Inspiration</h3>
<p>After creating a bunch of headless WordPress + Web app stacks, I wanted to find a standard and a all-round solution for fetching per page information for web applications inside WordPress. Built-in rest api works fine in basic cases, but it doesn’t support querying by path. Usually this meant that for each project developers would create a custom rest endpoint which would return expected content using content type and slug parameters.</p>
<p>WordPress has few built-in functions to retrieve content by path, <a href="https://developer.wordpress.org/reference/functions/url_to_postid/" rel="nofollow ugc">url_to_postid</a> and <a href="https://developer.wordpress.org/reference/functions/get_page_by_path/" rel="nofollow ugc">get_page_by_path</a>, but they don’t seem to work with multilanguage plugins, taxonomy or archive pages, which means that WP doesn’t have a reliable way to fetch content this way through rest api.</p>
<p>This plugin converts frontend to JSON which seems after above solution the best way to do things, with added layer of security through application passwords (WordPress v5.6 feature) and a filter, which let’s developers alter outgoing data.</p>
<h3>How to start using the plugin</h3>
<ul>
<li>Install and activate this plugin in your environment</li>
<li>Create application password for a user with administrator role</li>
</ul>
<p>After above steps have been made, make a request to a page with added <a href="https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side" rel="nofollow ugc">Authorization header</a>. See data fetching examples at the end of this documentation for more help</p>
<h3>Modifying the output</h3>
<p>Plugin outputs current page’s Post object or null. This can be modified using <code>headless-converter-modify-data</code>-filter. You can either modify passed in post object or do your own logic like in the example below.</p>
<pre><code>/**
 * Modifies Headless Converter plugin's output.
 * 
 * @param WPPost|null $post - Current template's post object 
 */
function modify_headless_converter_output($post) {
  if(is_404()) {
    return "this block renders 404 page content";
  } else if(is_page()) {
    return "this block renders page post types content";
  } else if (is_singular('post')) {
    return "this block renders single post content";
  } else if(is_home()) {
    return "this block renders post archive";
  } else {
    return $post;
  }
}

add_filter('headless-converter-modify-data', 'modify_headless_converter_output');
</code></pre>
<h3>Data fetching examples</h3>
<h4>Fetch</h4>
<pre><code>const username = "admin"
const password = "1111 1111 1111 1111 1111"
const url = "http://localhost:3000/?page_id=2"
const opts = {
  headers: {
     'Authorization': 'Basic ' + btoa(username + ":" + password) 
  }, 
}
fetch(url, opts).then(r => r.json()).then(console.log)
</code></pre>
<h4>Axios</h4>
<pre><code>const axios = require("axios")

const username = "admin"
const password = "1111 1111 1111 1111 1111"
const url = "http://localhost:3000/?page_id=2"
const opts = {
  auth: {
    username,
    password
  }
}

axios(url, opts).then(r => r.data).then(console.log)
</code></pre>


Headless Converter

Converts frontend to JSON response when request is done with certain conditions.

ben.moody

<p>Plugin provides a framework sets up WordPress as a headless CMS.</p>
<p>Framework options include:</p>
<ul>
<li>JSON Web Token Authentication (optional)</li>
<li>Adds Gutenberg block data to REST responses (optional)</li>
<li>Protects REST requests with nonce (optional)</li>
<li>Cleans up REST response objects (optional)</li>
<li>Removes non required REST endpoints (optional)</li>
<li>Disables the frontend (optional)</li>
</ul>
<p>All modules can be enabled/disabled or configured to suit most if not all WordPress as a headless CMS use cases.</p>
<p>Developing a single page React app but still want to use the WordPress theme based fronted.</p>
<p>Not a problem, maybe you just use these modules:</p>
<ul>
<li>Adds Gutenberg block data to REST responses</li>
<li>Protects REST requests with nonce</li>
<li>Cleans up REST response objects</li>
<li>Removes non required REST endpoints</li>
</ul>
<p>Developing a truly headless WordPress single page app or mobile app and just want WordPress for the backend?</p>
<p>Maybe use these modules:</p>
<ul>
<li>JSON Web Token Authentication</li>
<li>Adds Gutenberg block data to REST responses</li>
<li>Protects REST requests with nonce</li>
<li>Cleans up REST response objects</li>
<li>Removes non required REST endpoints</li>
<li>Disable the WordPress frontend</li>
</ul>
<p>You get the idea.</p>
<p>The plugin documentation is held inside the plugin ‘options’ page in the WordPress admin, although there are some docs for the custom rest endpoints:</p>
<p><a href="https://documenter.getpostman.com/view/1175138/RztkPpV4#fc567f81-ff31-442e-a236-fa247bd1fd6c" rel="nofollow ugc">Learn More about plugin endpoint requests</a></p>
<p>Anyway if you are looking to use WordPress as a headless CMS on a React, React Native, Angular, iOS/Android native project. This plugin should go a long way to setting WordPress up as you need it.</p>


WP Headless CMS Framework

I like your plugin! Keep on going with this one! :)

Plugin provides a framework sets up WordPress as a headless CMS.

Headless Converter vs WP Headless CMS Framework