{"id":107629,"date":"2020-06-30T13:28:19","date_gmt":"2020-06-30T18:28:19","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=107629"},"modified":"2024-02-28T11:44:39","modified_gmt":"2024-02-28T17:44:39","slug":"wordpress-gatsby-tutorial","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/","title":{"rendered":"Tutorial: Build Your Site With WordPress and Gatsby"},"content":{"rendered":"\n<p>Creating a static website with WordPress is possible with <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">headless WordPress<\/a>. These types of websites load faster, because static files are saved on your server. The question is, how do you build a headless website with WordPress?<\/p>\n\n\n\n<p>This is where a static site generator like Gatsby comes in. These generators help you build feature-rich static websites in WordPress. However, you need to integrate them correctly with your WordPress installation to get the most out of them. This integration includes installing, generating, and configuring WordPress Gatsby.&nbsp;<\/p>\n\n\n\n<p>In this article, we\u2019ll look at what Gatsby is and why you might want to use it with WordPress. We\u2019ll then detail how to use Gatsby and whether you should. Let\u2019s get started!<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">What Is Gatsby?<\/h2>\n\n\n\n<p>Simply put, Gatsby is a static site generator. This means that Gatsby generates the static HTML files that are uploaded to your website\u2019s server. When a visitor lands on your site, these static files are served to their browser, instead of the dynamic content WordPress generally offers.&nbsp;<\/p>\n\n\n\n<p>To generate these files, Gatsby fetches data for your website from a range of sources. This includes existing websites, <a href=\"https:\/\/apifriends.com\/api-management\/whats-api-call\/\" target=\"_blank\" rel=\"noreferrer noopener\">API calls<\/a>, and flat files through <a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">GraphQL<\/a>. Your static website is then built based on the configurations you have set.\u00a0<\/p>\n\n\n\n<p>As compared to other static site generators, Gatsby is relatively new. However, this has not stopped many companies from trying it out. One of the largest examples is the <a href=\"https:\/\/airbnb.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Airbnb Engineering &amp; Data Science<\/a> blog, which is powered by Gatsby.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use Gatsby With WordPress?<\/h2>\n\n\n\n<p>As it is possible to create a static website with WordPress, you might wonder why you should use WordPress and Gatsby together. While WordPress is powerful on its own, Gatsby offers some benefits you might want for your website, including faster speeds and lower server costs. Understanding the advantages and disadvantages of Gatsby can help you make an informed decision.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros of Using Gatsby<\/h3>\n\n\n\n<p>Gatsby offers a range of benefits that any website can take advantage of, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Faster loading speeds.<\/strong> Static websites load faster than dynamic ones, and this can impact your <a href=\"https:\/\/wpengine.com\/resources\/\/the-ultimate-checklist-for-wordpress-on-page-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search Engine Optimization (SEO)<\/a>. Page loading speeds is a signal used by <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/search-ads-speed\" target=\"_blank\" rel=\"noreferrer noopener\">search engines<\/a>, and affects your website\u2019s bounce rates.\u00a0<\/li>\n\n\n\n<li><strong>Reduced server costs.<\/strong> Dynamic websites require compatible <a href=\"https:\/\/wpengine.com\/support\/wordpress-glossary\/\" target=\"_blank\" rel=\"noreferrer noopener\">technology stacks<\/a> and servers. Static websites do not, and you can host them on any server. This can reduce your server costs.\u00a0<\/li>\n\n\n\n<li><strong>Improved security.<\/strong> Static websites provide improved security. The static HTML files served don\u2019t offer much for hackers to work with. If these files are lost for any reason, you can also regenerate them with Gatsby.<\/li>\n<\/ul>\n\n\n\n<p>Your website can benefit from all of these advantages. However, you should weigh them against the disadvantages of using Gatsby.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cons of Using Gatsby<\/h3>\n\n\n\n<p>No software system is perfect, and Gatsby does have a few drawbacks you need to know about:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical knowledge needed.<\/strong> Gatsby is built on <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">ReactJS<\/a> and uses GraphQL. To use it, some understanding of JavaScript is necessary. You\u2019ll also need to have basic knowledge of GraphQL to build a website.\u00a0<\/li>\n\n\n\n<li><strong>No dynamic content.<\/strong> Gatsby only generates static websites. If you want dynamic content such as contact forms, they need to be redirected through a third-party provider.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>While many developers find that the pros of Gatsby outweigh the cons, both are important to understand in advance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Do I Use Gatsby with WordPress?<\/h2>\n\n\n\n<p>Setting up Gatsby can take some time, and there are certain steps you\u2019ll need to take. You need to install Gatsby before you can start generating your site and configuring it. In addition, there are a few initial considerations to make.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Check the Prerequisites<\/h3>\n\n\n\n<p>Before you can install Gatsby, you need to install <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">NodeJS<\/a> and <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a> in your website environment. <a href=\"https:\/\/git-scm.com\/downloads\" target=\"_blank\" rel=\"noreferrer noopener\">Git<\/a> is also required for code management. The steps to install the prerequisites vary, depending on the operating system you run.\u00a0<\/p>\n\n\n\n<p>If you have Windows, you can install NodeJS and Git through the installer on the download page. The same is possible with Mac. However, if you run Linux, a <a href=\"https:\/\/linuxize.com\/post\/how-to-use-apt-command\/\" target=\"_blank\" rel=\"noreferrer noopener\">package installer<\/a> such as apt is required.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Install Gatsby<\/h3>\n\n\n\n<p>After installing NodeJS and Git, you can start installing Gatsby. The easiest method to do this is using the <a href=\"https:\/\/www.gatsbyjs.org\/docs\/quick-start\/#install-the-gatsby-cli\" target=\"_blank\" rel=\"noreferrer noopener\">following command<\/a> in your software terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g gatsby-cli<\/code><\/pre>\n\n\n\n<p>This command runs the installer automatically. It will first download and install all dependencies before installing Gatsby. Once that\u2019s complete, you can start creating your first Gatsby website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create a Gatsby Site<\/h3>\n\n\n\n<p>To create your Gatsby website, you\u2019ll need to run the <a href=\"https:\/\/www.gatsbyjs.org\/docs\/quick-start\/#create-a-new-site\" target=\"_blank\" rel=\"noreferrer noopener\">following command<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby new gatsby-site<\/code><\/pre>\n\n\n\n<p>This command clones the <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby-starter-default\" target=\"_blank\" rel=\"noreferrer noopener\">Gatsby starter template<\/a>, and places it in the directory <em>\/gatsby-wordpress<\/em>. Once the cloning and installation are complete, you can open the development version of the site. This is done using the <a href=\"https:\/\/www.gatsbyjs.org\/docs\/quick-start\/#start-development-server\" target=\"_blank\" rel=\"noreferrer noopener\">following command<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby develop<\/code><\/pre>\n\n\n\n<p>While the development environment is running, you can locally visit your new website. In your web browser, enter <em>http:\/\/localhost:8000<\/em> and your default template should open.<\/p>\n\n\n\n<p>If you see this page, you can start building your website. This means creating the static files in those website\u2019s public directory. The <a href=\"https:\/\/www.gatsbyjs.org\/docs\/quick-start\/#create-a-production-build\" target=\"_blank\" rel=\"noreferrer noopener\">following command<\/a> automatically starts the production of tohse static files:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby build<\/code><\/pre>\n\n\n\n<p>This command also generates the pre-route JavaScript code bundles for your website. You can then use the serve command to locally display your new website:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby serve<\/code><\/pre>\n\n\n\n<p>This command will only work if you have already run the build command.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Connect Gatsby to WordPress<\/h3>\n\n\n\n<p>You now have a basic static website, but you need to integrate it with WordPress. This points your Gatsby site to the address of your WordPress blog, enabling it to pull the latest data when you run the development server. Once connected, Gatsby will build a static website based on your current WordPress template.&nbsp;<\/p>\n\n\n\n<p>To connect the two, you\u2019ll need to install the Gatsby plugin for WordPress. The <a href=\"https:\/\/www.gatsbyjs.org\/docs\/sourcing-from-wordpress\/#plugin-gatsby-source-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\">following command<\/a> will take care of that:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install gatsby-source-wordpress<\/code><\/pre>\n\n\n\n<p>After installing the plugin, you can start configuring Gatsby.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Configure Gatsby<\/h3>\n\n\n\n<p>To configure Gatsby, you need to work with the <em>gatsby-config.js<\/em> file. In that file, add the <a href=\"https:\/\/www.gatsbyjs.org\/docs\/sourcing-from-wordpress\/#configuring-the-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">following code<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  ...\n  plugins: &#091;\n    ...,\n    {\n      resolve: `gatsby-source-wordpress`,\n      options: {\n        \/\/ your WordPress source\n        baseUrl: `wpexample.com`,\n        protocol: `https`,\n        \/\/ is it hosted on wordpress.com, or self-hosted?\n        hostingWPCOM: false,\n        \/\/ does your site use the Advanced Custom Fields Plugin?\n        useACF: false\n      }\n    },\n  ]\n}<\/code><\/pre>\n\n\n\n<p>Update this code to point to your WordPress website. If your website is locally hosted, after baseUrl you can use <em>localhost:8888\/wordpress<\/em> instead of your website\u2019s URL. After saving the file, you\u2019ll need to build your page templates.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Build Page Templates<\/h3>\n\n\n\n<p>Building page templates enables Gatsby to generate a post for every page on your WordPress website. The source plugin will pull the data you need from WordPress for these pages, but you\u2019ll have to create the design template.&nbsp;<\/p>\n\n\n\n<p>In your <em>gatsby-node.js<\/em> file, add the <a href=\"https:\/\/www.gatsbyjs.org\/docs\/sourcing-from-wordpress\/#using-wordpress-data\" target=\"_blank\" rel=\"noreferrer noopener\">following code<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const path = require(`path`)\nconst { slash } = require(`gatsby-core-utils`)\nexports.createPages = async ({ graphql, actions }) =&gt; {\n  const { createPage } = actions\n  \/\/ query content for WordPress posts\n  const result = await graphql(`\n    query {\n      allWordpressPost {\n        edges {\n          node {\n            id\n            slug\n          }\n        }\n      }\n    }\n  `)\n  const postTemplate = path.resolve(`.\/src\/templates\/post.js`)\n  result.data.allWordpressPost.edges.forEach(edge =&gt; {\n    createPage({\n      \/\/ will be the url for the page\n      path: edge.node.slug,\n      \/\/ specify the component template of your choice\n      component: slash(postTemplate),\n      \/\/ In the ^template's GraphQL query, 'id' will be available\n      \/\/ as a GraphQL variable to query for this posts's data.\n      context: {\n        id: edge.node.id,\n      },\n    })\n  })\n}<\/code><\/pre>\n\n\n\n<p>After calling all the data from WordPress, Gatsby will generate a page for each post. Using the develop command, you can navigate to each new page using the generated URL.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Should I Use Gatsby for WordPress?<\/h2>\n\n\n\n<p>While Gatsby can improve the speed and security of your website, it is not the right choice for everyone. If your website has static content that does not change often, Gatsby can be beneficial. However, if you need dynamic content on your website, traditional WordPress might be the better choice.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Do The Most With Your Site on WP Engine<\/h2>\n\n\n\n<p>Gatsby is an effective static website generator that you can easily integrate with WordPress. There are steps you need to follow to install and configure the system. You also need to have some knowledge of Gatsby and GraphQL before you start.&nbsp;<\/p>\n\n\n\n<p>Static content can improve the speed and security of your website, but you need the right host as well. WP Engine offers the best <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> and <a href=\"https:\/\/wpengine.com\/resources\/\" target=\"_blank\" rel=\"noreferrer noopener\">insightful resources<\/a> for your website to <a href=\"https:\/\/wpengine.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener\">create an excellent digital experience<\/a>. This leaves you with more time to <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">focus on development<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a static website with WordPress is possible with headless WordPress. These types of websites load faster, because static files are saved on your server. The question is, how do you build a headless website with WordPress? This is where a static site generator like Gatsby comes in. These generators help you build feature-rich static<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":177,"featured_media":107630,"template":"","resource-topic":[901],"resource-role":[895,896,899],"resource-type":[916],"class_list":["post-107629","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: Build Your Site With Wordpress &amp; Gatsby | WP Engine\u00ae<\/title>\n<meta name=\"description\" content=\"Using Gatsby &amp; WordPress together can have benefits on your website&#039;s speed and security. Learn how to use the two together in the WP Engine WordPress &amp; Gatsby tutorial.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Build Your Site With Wordpress &amp; Gatsby | WP Engine\u00ae\" \/>\n<meta property=\"og:description\" content=\"Using Gatsby &amp; WordPress together can have benefits on your website&#039;s speed and security. Learn how to use the two together in the WP Engine WordPress &amp; Gatsby tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-28T17:44:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/06\/headless-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/\",\"name\":\"Tutorial: Build Your Site With Wordpress & Gatsby | WP Engine\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2020-06-30T18:28:19+00:00\",\"dateModified\":\"2024-02-28T17:44:39+00:00\",\"description\":\"Using Gatsby & WordPress together can have benefits on your website's speed and security. Learn how to use the two together in the WP Engine WordPress & Gatsby tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: Build Your Site With WordPress and Gatsby\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/aba73ed4c15eda43b5fd78844ec31fad\",\"name\":\"Samantha Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g\",\"caption\":\"Samantha Rodriguez\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Build Your Site With Wordpress & Gatsby | WP Engine\u00ae","description":"Using Gatsby & WordPress together can have benefits on your website's speed and security. Learn how to use the two together in the WP Engine WordPress & Gatsby tutorial.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Tutorial: Build Your Site With Wordpress & Gatsby | WP Engine\u00ae","og_description":"Using Gatsby & WordPress together can have benefits on your website's speed and security. Learn how to use the two together in the WP Engine WordPress & Gatsby tutorial.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-02-28T17:44:39+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/06\/headless-featured.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/","name":"Tutorial: Build Your Site With Wordpress & Gatsby | WP Engine\u00ae","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2020-06-30T18:28:19+00:00","dateModified":"2024-02-28T17:44:39+00:00","description":"Using Gatsby & WordPress together can have benefits on your website's speed and security. Learn how to use the two together in the WP Engine WordPress & Gatsby tutorial.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-gatsby-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Tutorial: Build Your Site With WordPress and Gatsby"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/aba73ed4c15eda43b5fd78844ec31fad","name":"Samantha Rodriguez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/933722cf8761e0c08fbced6085998032df460c5ecfa2481d9cd16f569f3da2c1?s=96&d=mm&r=g","caption":"Samantha Rodriguez"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/06\/headless-grid.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Site Owner","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/107629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/107630"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=107629"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=107629"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=107629"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=107629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}