{"id":31523,"date":"2024-03-27T11:01:27","date_gmt":"2024-03-27T16:01:27","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31523"},"modified":"2024-03-27T11:01:28","modified_gmt":"2024-03-27T16:01:28","slug":"custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/","title":{"rendered":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL"},"content":{"rendered":"\n

Creating custom content types is a prevalent part of many modern, content-rich headless WordPress sites. By defining custom content types, developers can structure their data in a way that best suits their specific requirements, ensuring consistency and efficiency in content management. On a headless WordPress site, this can be done easily using Advanced Custom Fields to design the content structure and WPGraphQL to query data.<\/p>\n\n\n\n

Introducing Advanced Custom Fields (ACF)<\/h2>\n\n\n\n

While WordPress provides built-in support for standard content types such as posts and pages, Advanced Custom Fields (ACF)<\/a> allows users to define custom content types and fields for WordPress websites. This plugin enables developers to visually create custom fields for posts, pages, custom post types, and taxonomy terms. These custom fields can store a wide range of data types, including text, images, files, and more, making it a popular tool for tailoring WordPress content to specific needs.<\/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

Begin by defining custom post types and fields using the ACF interface within the WordPress admin dashboard. You can create any type of custom post type and add a few fields to it. Then, add some example data in the WordPress admin.<\/p>\n\n\n\n

Setting Up GraphQL in WordPress<\/h2>\n\n\n\n

To expose WordPress data via GraphQL, we’ll utilize the WPGraphQL plugin. WPGraphQL provides a schema and endpoints to query WordPress data using GraphQL syntax.<\/p>\n\n\n\n

WPGraphQL serves as the bridge between WordPress and modern frontend frameworks by exposing WordPress data via a GraphQL API. With WPGraphQL, developers can query WordPress content with precision, retrieving only the data they need for a particular request.<\/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

We will need to install two plugins to access ACF data using GraphQL queries: the WPGraphQL plugin<\/a> and the WPGraphQL for ACF plugin<\/a>.<\/p>\n\n\n\n

Accessing ACF Data with GraphQL Queries<\/h2>\n\n\n\n

Settings to Make Data Accessible<\/h3>\n\n\n\n

Notably, you will need to do two things to proceed with accessing ACF data. First, check the Enable Public Introspection<\/strong> box in GraphQL’s settings. Then, on each created Post Type’s page in ACF, click the slider for Advanced Configuration<\/strong>. Select the furthest right tab titled GraphQL<\/strong> and enable the Show in GraphQL<\/strong> slider.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

GraphQL Queries<\/h3>\n\n\n\n

Let’s dive into using GraphQL queries to retrieve ACF data from WordPress.<\/p>\n\n\n\n

For example, here is a query that fetches a list of products along with their ACF fields:<\/p>\n\n\n

{\n<\/span><\/span>  products {\n<\/span><\/span>    edges {\n<\/span><\/span>      node {\n<\/span><\/span>        id\n<\/span><\/span>        title\n<\/span><\/span>        acfFields {\n<\/span><\/span>          productName\n<\/span><\/span>          productDescription\n<\/span><\/span>          productImage {\n<\/span><\/span>            sourceUrl\n<\/span><\/span>            altText\n<\/span><\/span>          }\n<\/span><\/span>        }\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
<\/p>\n\n\n\n
Let’s break down what each part of the query is doing:<\/p>\n\n\n\n
    \n
  1. products<\/strong>: This is the root field of the query, indicating that we want to retrieve data related to products.<\/li>\n\n\n\n
  2. edges<\/strong>: This is a connection type used in WPGraphQL to represent a list of items with pagination information. It’s commonly used when querying data from a list or collection.<\/li>\n\n\n\n
  3. node<\/strong>: Within each edge, there is a node representing a single product item. This is where the actual data for each product resides.<\/li>\n\n\n\n
  4. id<\/strong>: This field requests the unique identifier (ID) of each product. IDs are typically used to uniquely identify each item in a collection.<\/li>\n\n\n\n
  5. title<\/strong>: This field requests the title of each product. Titles are common pieces of information associated with content items in WordPress.<\/li>\n\n\n\n
  6. acfFields<\/strong>: This field requests custom fields associated with each product. In this case, it’s specifically asking for fields created using the Advanced Custom Fields (ACF) plugin.<\/li>\n\n\n\n
  7. productName, productDescription, productImage<\/strong>: These are custom fields defined in ACF for products. The query requests data for each of these fields, including the product name, description, and image.<\/li>\n\n\n\n
  8. sourceUrl, altText<\/strong>: These are sub-fields of the productImage field, requesting the source URL (i.e., the URL of the image) and alt text (i.e., the alternative text for the image) respectively.<\/li>\n<\/ol>\n\n\n\n
    <\/p>\n\n\n\n
    For your own queries, you can replace the values such as productName<\/code>, productDescription<\/code>, and productImage<\/code> with your own ACF field names.<\/p>\n\n\n\n
    Integrating ACF Data in a React App<\/h2>\n\n\n\n
    Once we have our GraphQL query, we can integrate it into a React web application. This React component fetches the product data using the previous GraphQL query and displays the list of products.<\/p>\n\n\n
    import<\/span> React from<\/span> 'react'<\/span>;\n<\/span><\/span>import<\/span> { useQuery, gql } from<\/span> '@apollo\/client'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> GET_PRODUCTS = gql`<\/span>\n<\/span><\/span>{<\/span>\n<\/span><\/span>  products {<\/span>\n<\/span><\/span>    edges {<\/span>\n<\/span><\/span>      node {<\/span>\n<\/span><\/span>        id<\/span>\n<\/span><\/span>        title<\/span>\n<\/span><\/span>        acfFields {<\/span>\n<\/span><\/span>          productName<\/span>\n<\/span><\/span>          productDescription<\/span>\n<\/span><\/span>          productImage {<\/span>\n<\/span><\/span>            sourceUrl<\/span>\n<\/span><\/span>            altText<\/span>\n<\/span><\/span>          }<\/span>\n<\/span><\/span>        }<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span>}<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> ProductList = ()<\/span> =><\/span> {\n<\/span><\/span>  const<\/span> { loading, error, data } = useQuery(GET_PRODUCTS);\n<\/span><\/span>\n<\/span><\/span>  if<\/span> (loading) return<\/span> <p<\/span>><\/span>Loading...<\/p<\/span>><\/span><\/span>;\n<\/span><\/span>  if<\/span> (error) return<\/span> <p<\/span>><\/span>Error :(<\/p<\/span>><\/span><\/span>;\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <div<\/span>><\/span><\/span>\n<\/span><\/span>    {data.products.edges.map(({ node }) => (<\/span><\/span>\n<\/span><\/span>      <div<\/span> key<\/span>={node.id}<\/span>><\/span><\/span><\/span>\n<\/span><\/span>        <h2<\/span>><\/span>{node.title}<\/h2<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <p<\/span>><\/span>{node.acfFields.productName}<\/p<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <p<\/span>><\/span>{node.acfFields.productDescription}<\/p<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <img<\/span> src<\/span>={node.acfFields.productImage.sourceUrl}<\/span> alt<\/span>={node.acfFields.productImage.altText}<\/span> \/><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    ))}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> ProductList;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    <\/p>\n\n\n\n
    Let’s take a look at how this React component works.<\/p>\n\n\n\n
    GraphQL Query Definition<\/h3>\n\n\n\n
    The GET_PRODUCTS<\/code> constant defines a GraphQL query using the gql<\/code> tag template literal. This query requests data for products, including their IDs, titles, and custom fields (productName<\/code>, productDescription<\/code>, and productImage<\/code>), from the headless WordPress backend.<\/p>\n\n\n\n
    ProductList Component<\/h3>\n\n\n\n
    Inside the component, the useQuery<\/code> hook is used to execute the GraphQL query defined in GET_PRODUCTS<\/code>. It returns an object containing loading, error, and data properties. If the query is still loading (loading<\/code> is true), the component renders a loading message (<p>Loading...<\/p><\/code>). If there is an error during the query execution (error<\/code> is not null), the component renders an error message (<p>Error :(<\/p><\/code>). If the query is successful and there are no errors, the component renders a list of products.<\/p>\n\n\n\n
    The list of products is rendered using the map<\/code> function on data.products.edges<\/code>, which represents an array of product nodes. For each product node, a <div><\/code> element is rendered with the product’s title, productName<\/code>, productDescription<\/code>, and productImage<\/code> (including source URL and alt text) displayed.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    Many headless WordPress sites require the ability to create and query for custom content types. Leveraging Advanced Custom Fields (ACF) for content customization and WPGraphQL for seamless data retrieval offers a powerful solution for building flexible and customizable websites.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Creating custom content types is a prevalent part of many modern, content-rich headless WordPress sites. By defining custom content types, developers can structure their data in a way that best […]<\/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-31523","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"\nCustom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - 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\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - Builders\" \/>\n<meta property=\"og:description\" content=\"Creating custom content types is a prevalent part of many modern, content-rich headless WordPress sites. By defining custom content types, developers can structure their data in a way that best […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-27T16:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T16:01:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/\"},\"author\":{\"name\":\"Grace Erixon\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/238dfb380aff5f2c58b8572d0b661deb\"},\"headline\":\"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL\",\"datePublished\":\"2024-03-27T16:01:27+00:00\",\"dateModified\":\"2024-03-27T16:01:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/\"},\"wordCount\":864,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-10-1024x646.png\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/\",\"name\":\"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-10-1024x646.png\",\"datePublished\":\"2024-03-27T16:01:27+00:00\",\"dateModified\":\"2024-03-27T16:01:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-10.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-10.png\",\"width\":2027,\"height\":1278},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL\"}]},{\"@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":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - 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\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/","og_locale":"en_US","og_type":"article","og_title":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - Builders","og_description":"Creating custom content types is a prevalent part of many modern, content-rich headless WordPress sites. By defining custom content types, developers can structure their data in a way that best […]","og_url":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/","og_site_name":"Builders","article_published_time":"2024-03-27T16:01:27+00:00","article_modified_time":"2024-03-27T16:01:28+00:00","og_image":[{"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png","type":"","width":"","height":""}],"author":"Grace Erixon","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Grace Erixon","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/"},"author":{"name":"Grace Erixon","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/238dfb380aff5f2c58b8572d0b661deb"},"headline":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL","datePublished":"2024-03-27T16:01:27+00:00","dateModified":"2024-03-27T16:01:28+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/"},"wordCount":864,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/","url":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/","name":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png","datePublished":"2024-03-27T16:01:27+00:00","dateModified":"2024-03-27T16:01:28+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10.png","width":2027,"height":1278},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/custom-content-in-headless-wordpress-using-advanced-custom-fields-and-wpgraphql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Custom Content in Headless WordPress Using Advanced Custom Fields and WPGraphQL"}]},{"@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\/31523","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=31523"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31523\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}