
<p>I have been talking about building headless sites since 2014, my first WordCamp talk was about Angular, and using it to build a headless &#8220;theme&#8221;</p>



<figure class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe width='500' height='281' src='https://video.wordpress.com/embed/99I0IsZz?hd=1' frameborder='0' allowfullscreen></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1435166243'></script>
</div><figcaption>Here is a similar talk (consider it v1.1) I gave at WordCamp Miami in 2015</figcaption></figure>



<h2>Headless in 2021</h2>



<p>The landscape of building headless WordPress websites has shifted. Shifted isn&#8217;t not strong enough of a word. The Headless WordPress community has boomed, and so has the technologies to run and power Headless WordPress.</p>



<p>Soon I&#8217;ll be starting a series on looking at the biggest frameworks that are being used for headless WordPress and doing a deeper dive / comparison, however I want to take a moment to talk about the WordPress side. </p>



<p>Before I choose with API I will be using for the project (I use both REST and GraphQL depending on application), I install <a rel="noreferrer noopener" href="https://wordpress.org/plugins/headless-mode/" target="_blank">Headless Mode</a>.</p>



<h2>What does Headless Mode do?</h2>



<p>When you are running a true headless WordPress website, the main &#8220;theme&#8221; or output of that WordPress site becomes irrelevant. There are some edge cases here, for example if you are only serving data vs. content via your WordPress site&#8217;s API.</p>



<p>For a typical headless site, I would assume the site face (AKA the theme) would be somewhere else, probably coded in some fancy JavaScripts. This is where &#8220;Headless Mode&#8221; comes in. With a simple configuration and 1 line of PHP, no one will be able to access the WordPress site&#8217;s &#8220;theme&#8221; layer. Instead anyone trying to access your WordPress site via non-admin URLs will be redirected to a URL of your choosing.</p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1011" height="211" src="https://arcctrl.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-15-at-9.47.56-PM.png" alt="Headless Mode Admin, already ready for me." class="wp-image-2822" srcset="https://roysivan.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-15-at-9.47.56-PM.png 1011w, https://roysivan.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-15-at-9.47.56-PM-300x63.png 300w, https://roysivan.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-15-at-9.47.56-PM-768x160.png 768w" sizes="(max-width: 1011px) 100vw, 1011px" /></figure>



<p>The best part of it? Their documentation almost had my domain ready to go! </p>



<h2>Effects on site visitors</h2>



<p>You are currently reading this on some variation of hiroy domain (future proofing sentence), while I&#8217;m currently not disclosing the URL of the WordPress website, if you go there, you&#8217;d be redirected right back here.</p>



<p>Did you notice?</p>



<p></p>



<p>If you are migrating to a new headless build from an existing WordPress website and wish to utilize this plugin, make sure you consult with an SEO specialist about creating proper redirects to not lose out on that SEO juice.</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="268" height="138" src="https://arcctrl.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-15-at-10.15.55-PM.png" alt="" class="wp-image-2825"/></figure>



<p>Also, make sure that when you put in the PHP code defining the value of <strong>HEADLESS_MODE_CLIENT_URL</strong> that you use an existing URL that loads properly. You don&#8217;t want your visitors end up in an infinite loop, or going to a site you do not own by mistake.</p>



<p>Overall, I would not start any traditional (in my mind) headless WordPress build without this plugin, because it makes a task I&#8217;d probably forget about or overlook, very easy.</p>



<p>Please go check out <a rel="noreferrer noopener" href="https://wordpress.org/plugins/headless-mode/" target="_blank">Headless Mode</a> and don&#8217;t forget to wish <a href="https://twitter.com/benUNC" target="_blank" rel="noreferrer noopener">Ben</a> a Happy Birthday!</p>


Hi.

Headless without Headless Mode? Don’t be crazy.

Liked this post? Want to discuss?