#SamGoesHeadless: Chapter 00

2024 is the year I learn headless WordPress. I am ready to humble myself and learn a totally new way of building a website.

Before I joined WP Engine (back in May 2022) I was relatively naive to headless WordPress. Alright, to be honest, I hadn’t even heard of it.

However, in a world where the landscape of website building is endlessly evolving, it would be foolish to stick my head in the sand and ignore the new techniques I discover. I took much of 2022 and 2023 to learn about how to build with blocks in monolithic WordPress, so 2024 is when I deep dive into headless.

Explore all #SamGoesHeadless Chapters

I also have an obligation to the community.

In my current role at WP Engine, I am the Community Manager for the Developer Relations team. Not only do I engage with the traditional WordPress community, but I also help manage the Headless WordPress Discord, help run headless events, and share content with headless developers.

I believe I am responsible for being as competent as possible with the tech our community uses. So here we are.

In conjunction with my goal of learning headless WordPress, I want to diligently document the journey, “build in public,” and walk alongside those who also want to learn.

You can follow along with the #SamGoesHeadless hashtag in the following places:

Now that I have thoroughly explained my “why” behind this venture let’s dig into my first day of building with Headless!

A huge shout out to my colleagues, Fran & Grace. ✨

These two headless rockstars are my sherpas on this journey. Thank you for taking me by the hand and teaching me.

Fran Agulto
Grace Erixon

Chapter 00: Getting Set Up

For clarity, anything I share regarding setup will be on macOS.

It turns out my machine was not ready for this endeavor. 😂 Lucky for me, I got set up on my work computer and then practiced those steps on my personal computer to make sure I understood what was going on.

First, I installed Xcode by running the following in the terminal:

xcode-select --install

Next, I needed to get the following up and running:

🍺 Homebrew
❇️ Node.js
🚀 Node Version Manager (NVM)

Here are the commands I ran in my terminal.

/bin/bash -c "$(curl -fsSL"
brew install node
curl -o- | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/" ] && \. "$NVM_DIR/"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
source ~/.nvm/

Now I can start using Node apps! 💃🏼

npx create-next-app@latest

And there we have it! I have my first Next.js project created (thanks to that handy npx command) – here were the settings I selected 👇

I opened this project up in VSCode and created a folder within app called “hello_world” and a page.jsx file.

Because I can’t help it I updated some CSS to respect user dark mode preferences and wa-lah! 🎉

Biggest Takeaways + “Aha” Moments

I finally understand what “headless WordPress” means; I’ll explain it as well as possible.

WordPress is just the database for the site (more or less, a spreadsheet). It is not responsible at all for what happens on the front end.

This allows someone to use whatever more advanced, secure frontend framework they want (React, Astro, Vue.js, Svelte, Faust.js).

Which, of course, made me wonder – why even bother with using WordPress?

As I understand it, in the real world, the main benefit is that someone handling the site’s content can stay detached from the frontend rendering – allowing for a user-friendly environment for content management (through WordPress) while leveraging those fancy frontend frameworks.

There is still so much to learn – heck, I haven’t even incorporated WordPress yet, but I am eager to continue the process.

For now, it has felt good dusting off some coding knowledge I haven’t used in a while.

My mentors have informed me that our next session will be all about GraphQL – I’ve leveraged the REST API quite a bit in past roles, so this will be a new ball game.

Until next time!

Prompt: A 30-year-old woman with mid-length, dirty-blonde hair learning code on her laptop in a cozy, warm gaming aesthetic.

DALL-E 3 model with the help of Magai.

8 responses to “#SamGoesHeadless: Chapter 00”

  1. Dovid Levine Avatar

    Good luck!

    >WordPress is just the database for the site (more or less, a spreadsheet)[…]Which, of course, made me wonder – why even bother with using WordPress?

    Not *just* a database, the entire CMS backend that most people are already trained with and an ecosystem of data entry APIs and workflow (so more like a professional Notion template than a boring old spreadsheet).

    The part you are indeed losing is the front matter (only for now, FSE will trickle down to headless too). For most that’s a big cost of entry to overcome. For many – especially in Enterprise – it’s liberating! Keeping plugins from hijacking your bespoke UX and design is a nightmare even before you need to handle back/cross-compatibility in a sea of plugin ecosystems, and long term even building the frontend from scratch on WP is still more economical vs *also* having to reinvent -and maintain- a data API/ backend UX without the benefit of feedback from 60% of the web.

    1. Sam Brockway Avatar

      Hi Dovid!

      Thank you for adding all that extra context – it makes sense “why WordPress” in that case.

      Once I get into the weeds of building with headless WP, I would love to explore those real-world examples more – enterprise clients, etc.

      Without knowing how it all works it’s been hard to help developers explore solutions and ideas that will work best in different situations.

      Do you ever build non-headless WordPress projects?

      1. Dovid Levine Avatar

        This might surprise you, but most my billable hours are still for traditional WP builds.

        IMO the ideal market for headless rn is an inverted bell-curve, i.e. great for really simple OR really complex reqs, and really hard to justify the ROI on anything in between. That dip is shrinking at a pretty fast rate though!

        1. Sam Brockway Avatar

          That’s so interesting – thank you for sharing! I imagine as the tech catches on and more resources are created (educational, extensions, etc) that will lower the barrier of entry for people which may mean those “mid market” clients will be interested in headless…maybe?

  2. Hashim Warren Avatar

    “Which, of course, made me wonder – why even bother with using WordPress?”

    Yes, this question is a rite of passage for WordPress devs who try headless.

    Then you go on a journey around the internet looking for other solutions, before finally landing on WordPress again. 🙂

    Here’s my real world situation:

    I have several sites with no database or CMS and they are barely get updates. I have one site that’s headless WordPress. And I have three sites that are classic WordPress.

    1. Sam Brockway Avatar

      Thanks for taking the time to comment here!

      What’s the reasoning behind having sites with so many different setups, Hasim?

  3. Dustin W. Stout Avatar

    I just want to say that I LOVE that you put a footnote about the image you use + prompt you used to create it. What a thoughtful inclusion!

    1. Sam Brockway Avatar

      Thank you, Dustin! I thought it would be fun to be transparent about where it came from + also share Magai along the way 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

xoxo, receive new posts & the occasional private note: