{"id":31487,"date":"2024-02-15T13:19:35","date_gmt":"2024-02-15T19:19:35","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31487"},"modified":"2024-02-20T14:55:17","modified_gmt":"2024-02-20T20:55:17","slug":"set-up-wordpress-as-a-headless-cms","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/","title":{"rendered":"How to Set Up WordPress As A Headless CMS"},"content":{"rendered":"\n

Headless WordPress is a website or omnichannel app that uses WordPress content, delivered by the REST API or GraphQL to frontends developed outside WordPress (e.g., Next.js, Nuxt.js, React, Vue). Before you start building a frontend site that connects to your WordPress backend for content, you need to configure your WordPress site with some recommended plugins.<\/p>\n\n\n\n

Installing Plugins<\/h2>\n\n\n\n

WPGraphQL<\/h3>\n\n\n\n

WPGraphQL <\/a>is a plugin for WordPress that extends the WordPress API to support GraphQL <\/a>requests. This plugin is highly recommended, as it makes it much easier to work with WordPress content. In most cases, you can use the default configuration for WPGraphQL, so installing the plugin is enough to get you started.<\/p>\n\n\n\n

\n
\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n

WPGraphQL<\/p>\n<\/div>\n\n\n\n

An extendable GraphQL
schema & API for WordPress.<\/p>\n\n\n\n

\n
Download<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Advanced Custom Fields<\/h3>\n\n\n\n

Advanced Custom Fields<\/a> (ACF) lets you take full control of your WordPress edit screens and custom field data. It supports a ton of different field types that you can attach to content types in WordPress. Assuming you are using WPGraphQL, you should also install the companion WPGraphQL For Advanced Custom Fields<\/a> plugin. This companion plugin will let you extend the WPGraphQL API with ACF information. There is no configuration necessary before you can start working with ACF.<\/p>\n\n\n\n

\n
\n
<\/path><\/path><\/path><\/path><\/path><\/svg><\/div><\/div>\n\n\n\n

Advanced custom fields to build
with WordPress your way.<\/p>\n\n\n\n

\n
Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Faust.js<\/h3>\n\n\n\n

Faust.js<\/a>\u00a0provides a set of tools to make building frontend applications with WordPress as the headless CMS a pleasant experience for developers and publishers. The plugin helps with post previewing, authentication, fetching data, and more. It is used in conjunction with the Faust.js framework<\/a> to build out the frontend of your headless site.<\/p>\n\n\n\n

The Faust.js plugin requires some customization when you first install it. You can find the settings for the plugin in Settings \u2192 Faust<\/strong>. You will want to configure your Frontend site URL<\/strong> to be your frontend website\u2019s root URL. For example, if you are running a Node site on your local machine on port 3000, your Front-end site URL<\/strong> should be \u201chttp:\/\/localhost:3000\u201d. You will need to connect it with the frontend Faust.js app in a .env.local<\/code> file.<\/p>\n\n\n\n

\n
\n
\n
<\/path><\/path><\/svg><\/div><\/div>\n\n\n\n

Faust.js<\/p>\n<\/div>\n\n\n\n

The JavaScript framework
specifically for WordPress.<\/p>\n\n\n\n

\n
Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

After you install the plugins listed above, your WordPress site will be ready for headless development. While there are certainly more plugins you can use; these are the base plugins we recommend based on what we commonly use to build headless WordPress sites!<\/p>\n","protected":false},"excerpt":{"rendered":"

Headless WordPress is a website or omnichannel app that uses WordPress content, delivered by the REST API or GraphQL to frontends developed outside WordPress (e.g., Next.js, Nuxt.js, React, Vue). Before […]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-31487","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"\nHow to Set Up WordPress As A Headless CMS - Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Up WordPress As A Headless CMS - Builders\" \/>\n<meta property=\"og:description\" content=\"Headless WordPress is a website or omnichannel app that uses WordPress content, delivered by the REST API or GraphQL to frontends developed outside WordPress (e.g., Next.js, Nuxt.js, React, Vue). Before […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-15T19:19:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T20:55:17+00:00\" \/>\n<meta name=\"author\" content=\"Grace Erixon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Grace Erixon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/\"},\"author\":{\"name\":\"Grace Erixon\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/238dfb380aff5f2c58b8572d0b661deb\"},\"headline\":\"How to Set Up WordPress As A Headless CMS\",\"datePublished\":\"2024-02-15T19:19:35+00:00\",\"dateModified\":\"2024-02-20T20:55:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/\"},\"wordCount\":386,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/\",\"name\":\"How to Set Up WordPress As A Headless CMS - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"datePublished\":\"2024-02-15T19:19:35+00:00\",\"dateModified\":\"2024-02-20T20:55:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/set-up-wordpress-as-a-headless-cms\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Set Up WordPress As A Headless CMS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/238dfb380aff5f2c58b8572d0b661deb\",\"name\":\"Grace Erixon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"caption\":\"Grace Erixon\"},\"description\":\"Grace Erixon is a Developer Advocate at WP Engine. She has been developing with headless WordPress since 2021. Connect with her on the Headless WordPress Discord community, Twitter, or LinkedIn.\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/grace-erixonwpengine-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Up WordPress As A Headless CMS - Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Up WordPress As A Headless CMS - Builders","og_description":"Headless WordPress is a website or omnichannel app that uses WordPress content, delivered by the REST API or GraphQL to frontends developed outside WordPress (e.g., Next.js, Nuxt.js, React, Vue). Before […]","og_url":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/","og_site_name":"Builders","article_published_time":"2024-02-15T19:19:35+00:00","article_modified_time":"2024-02-20T20:55:17+00:00","author":"Grace Erixon","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Grace Erixon","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/"},"author":{"name":"Grace Erixon","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/238dfb380aff5f2c58b8572d0b661deb"},"headline":"How to Set Up WordPress As A Headless CMS","datePublished":"2024-02-15T19:19:35+00:00","dateModified":"2024-02-20T20:55:17+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/"},"wordCount":386,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/","url":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/","name":"How to Set Up WordPress As A Headless CMS - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"datePublished":"2024-02-15T19:19:35+00:00","dateModified":"2024-02-20T20:55:17+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/set-up-wordpress-as-a-headless-cms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"How to Set Up WordPress As A Headless CMS"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/238dfb380aff5f2c58b8572d0b661deb","name":"Grace Erixon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","caption":"Grace Erixon"},"description":"Grace Erixon is a Developer Advocate at WP Engine. She has been developing with headless WordPress since 2021. Connect with her on the Headless WordPress Discord community, Twitter, or LinkedIn.","url":"https:\/\/wpengine.com\/builders\/author\/grace-erixonwpengine-com\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31487"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31487\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}