{"id":31504,"date":"2024-02-23T11:24:38","date_gmt":"2024-02-23T17:24:38","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31504"},"modified":"2024-02-29T12:11:38","modified_gmt":"2024-02-29T18:11:38","slug":"understanding-the-templating-system-in-faust-js","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/","title":{"rendered":"Understanding The Templating System in Faust.js"},"content":{"rendered":"\n<p>Templates in Faust bring the power of <a href=\"https:\/\/wpshout.com\/wordpress-template-hierarchy\/\">the WordPress Template Hierarchy<\/a> to your JavaScript frontend application. This article is a high-level guide to walk you through how templates are resolved and how to create your first templates using this system.<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-7a03825d wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"Prerequisites\">\n<li><a href=\"#prerequisites\">Prerequisites<\/a> <\/li>\n\n\n\n<li><a href=\"#the-traditional-wordpress-template-hierarchy\">The Traditional WordPress Template Hierarchy<\/a><\/li>\n\n\n\n<li><a href=\"#the-templating-system-in-faust.js\">The Templating System in Faust.js<\/a><\/li>\n\n\n\n<li><a href=\"#the-wptemplates-directory\">The WP-Templates Directory<\/a><\/li>\n\n\n\n<li><a href=\"#the-default-files\">The Default Files<\/a><\/li>\n\n\n\n<li><a href=\"#create-your-first-custom-template\">Create Your First Custom Template<\/a><\/li>\n\n\n\n<li><a href=\"#the-index-file\">The Index File<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>To benefit from this article, you will need to have a basic understanding of <a href=\"https:\/\/faustjs.org\/tutorial\/get-started-with-faust\">Faust.js<\/a>, headless WordPress, and <a href=\"https:\/\/www.wpgraphql.com\/\">WPGraphQL<\/a>.<\/p>\n\n\n\n<p>This article also assumes that you already have a WP install and a Faust.js app created and connected.&nbsp; If you do not, please refer to the Faust.js documentation.<\/p>\n\n\n\n<p>If you need a more basic tutorial, please reference this<a href=\"https:\/\/wpengine.com\/builders\/faust-js-headless-wordpress-framework\/\"> article on the subject matter here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-688844c5591b0d750f2228c71fe3f5ec has-global-padding is-layout-constrained wp-container-core-group-is-layout-c825ac28 wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#180038;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-682063c7 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-e4830150 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:38px\"><svg fill=\"none\" viewBox=\"0 0 38 30\" aria-label=\"Frost logo\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18.149.498c-.043.01-.16.025-.259.033-.406.03-.933.112-1.53.238-.205.043-.769.198-.98.269-.114.039-.574.207-.618.226l-.292.124c-.3.128-.74.346-1.01.502a4.92 4.92 0 0 1-.206.115 10.57 10.57 0 0 0-4.878 6.728c-.018.106-.035.118-.237.165-.17.039-.23.055-.54.147C3.36 10.302.453 13.9.037 18.401c-.045.49-.05 8.792-.006 9.065.18 1.094.97 1.87 2.052 2.012.375.049 4.136.05 4.527.002 1.185-.148 2.032-1.046 2.102-2.228.055-.925.614-1.62 1.403-1.745.29-.046.37-.05.528-.022.905.158 1.437.76 1.5 1.7.083 1.249.888 2.135 2.084 2.294.363.048 4.162.048 4.518 0 .633-.086 1.262-.421 1.616-.862l.124-.154c.13-.156.29-.575.341-.885.046-.277.047-8.617.002-8.907-.183-1.17-1.208-1.979-2.505-1.979-.386 0-1.057-.13-1.593-.306a5.82 5.82 0 0 1-3.868-4.496c-.16-.907-.112-1.586.187-2.655.417-1.494 1.717-2.941 3.22-3.585l.158-.068c.28-.121.809-.268 1.214-.336a5.03 5.03 0 0 1 1.98.042c2.288.53 3.911 2.078 4.476 4.272.198.768.189.427.19 7.436.002 3.432.012 6.28.023 6.399.304 3.24 2.565 5.63 5.713 6.037.829.107 1.116.107 1.8-.001 2.037-.322 3.807-1.829 4.698-4.001l.046-.112c.148-.36.347-1.107.407-1.53.119-.823.073-1.372-.15-1.817-.255-.508-.802-.924-1.493-1.137-.253-.078-.998-.08-1.2-.005-.026.01-.11.037-.183.06-.666.202-1.24.854-1.493 1.696-.03.101-.093.523-.093.63 0 .044-.02.162-.046.26-.44 1.724-2.917 1.715-3.316-.013-.03-.128-.034-.905-.034-6.275 0-6.296-.005-6.684-.089-7.276a11.333 11.333 0 0 0-.114-.742c-.012-.05-.042-.186-.066-.304-.734-3.596-3.431-6.625-6.951-7.805a9.125 9.125 0 0 0-.855-.246 7.503 7.503 0 0 0-.888-.179 18.617 18.617 0 0 0-.877-.117c-.28-.033-.874-.046-.977-.02Zm-.047 8.132c-1.224.212-1.998 1.382-1.8 2.72.027.186.034.213.115.462.554 1.717 3.03 1.998 3.992.452.055-.088.1-.165.1-.172 0-.006.025-.064.056-.128.131-.27.214-.68.214-1.052 0-1.52-1.194-2.539-2.677-2.282Zm-9.55 5.116c.577 2.153 2.094 4.3 3.988 5.648.78.554 1.328.849 2.38 1.28.077.031.556.195.675.23l.247.07.236.069.101.03.006 1.66c.006 1.695.002 1.779-.078 1.615-.772-1.58-2.366-2.836-4.134-3.256-.626-.149-.883-.178-1.552-.178-2.132.001-4.114 1.027-5.234 2.711-.17.254-.36.57-.412.686-.101.22-.1.256-.1-2.611 0-3 .005-3.148.129-3.748a5.873 5.873 0 0 1 1.94-3.294 5.92 5.92 0 0 1 1.518-.927c.222-.091.262-.09.29.015Z\" clip-rule=\"evenodd\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-large-font-size\" style=\"font-style:normal;font-weight:800;letter-spacing:-1px\">WPGraphQL<\/p>\n<\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-c86e52ed\" style=\"line-height:1.5\">An extendable GraphQL <br>schema &amp; API for WordPress.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-nowrap is-layout-flex wp-container-core-buttons-is-layout-3bdbf2e2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/wpgraphql-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-1c64e8656e2adf26d6fee6632ed30e85 has-global-padding is-layout-constrained wp-container-core-group-is-layout-c825ac28 wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#1a8bec;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-8b72b8c1 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-b97f5b79 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:52px\"><svg fill=\"none\" viewBox=\"0 0 51 52\" aria-label=\"Frost logo\"><path fill=\"#0076DC\" d=\"M51 26C51 11.917 39.583.5 25.5.5S0 11.917 0 26s11.417 25.5 25.5 25.5S51 40.083 51 26Z\"><\/path><path fill=\"#fff\" d=\"M18.693 43a8.4 8.4 0 0 1-3.701-.944 4.91 4.91 0 0 1-2.044-2.11 2.946 2.946 0 0 1 1.095-3.778 3.386 3.386 0 0 1 4.287.68c.36.423.691.87.991 1.336l.047.071c1.228-2.833 1.785-5.765 2.361-8.838.27-1.417.553-2.875.902-4.325l-2.658-.207a.733.733 0 0 1-.675-.723 1.916 1.916 0 0 1 .52-1.487 1.889 1.889 0 0 1 1.496-.387l.76.07a1.337 1.337 0 0 0 1.416-1.005c.118-.472.232-.944.35-1.45.401-1.99.998-3.937 1.78-5.811 2.001-4.382 5.622-6.01 10.202-4.594.9.28 1.714.787 2.36 1.473a3.41 3.41 0 0 1 .907 2.497 2.973 2.973 0 0 1-1.02 2.082 3.157 3.157 0 0 1-2.318.709 3.485 3.485 0 0 1-2.389-1.214 8.862 8.862 0 0 1-1.067-1.775c-.113-.222-.221-.472-.34-.666-.042-.075-.084-.15-.122-.23l-.302.032-2.116 9.797 2.673.17a.723.723 0 0 1 .67.604 1.78 1.78 0 0 1-.316 1.591 1.716 1.716 0 0 1-1.516.401l-.359-.037-.472-.047c-1.005-.076-1.36.24-1.59 1.416-.1.51-.2 1.02-.293 1.53-.444 2.303-.898 4.683-1.535 6.982a16.486 16.486 0 0 1-2.2 4.835C22.97 41.862 20.955 43 18.693 43Zm-2.946-6.383a2.262 2.262 0 0 0-1.204.34 2.002 2.002 0 0 0-.755 2.568 3.97 3.97 0 0 0 1.62 1.695c3.304 1.624 6.26.878 8.295-2.11a15.411 15.411 0 0 0 2.072-4.552c.628-2.266 1.082-4.627 1.516-6.912l.297-1.53c.227-1.156.709-2.317 2.587-2.176l.51.052.35.038c.368.038.632 0 .736-.113a.854.854 0 0 0 .095-.614l-2.743-.175a.732.732 0 0 1-.652-.878l2.285-10.703 1.653-.189.141.312c.076.165.152.325.236.472.085.146.241.472.36.694.252.564.57 1.098.944 1.59a2.55 2.55 0 0 0 1.742.879 2.229 2.229 0 0 0 1.624-.472 2.031 2.031 0 0 0 .698-1.417 2.484 2.484 0 0 0-.67-1.808 4.557 4.557 0 0 0-1.94-1.204c-4.127-1.28-7.262.133-9.065 4.084a30.694 30.694 0 0 0-1.723 5.637c-.114.473-.232.978-.35 1.464a2.266 2.266 0 0 1-2.412 1.714l-.76-.07a1.034 1.034 0 0 0-.775.145.888.888 0 0 0-.208.581l2.734.198a.728.728 0 0 1 .652.898c-.373 1.51-.666 3.045-.945 4.532-.6 3.12-1.213 6.35-2.606 9.442a.714.714 0 0 1-1.232.114l-.288-.425c-.277-.43-.583-.84-.916-1.228a2.536 2.536 0 0 0-1.903-.873Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:800;letter-spacing:-1px\">Faust.js<\/p>\n<\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-c86e52ed\" style=\"line-height:1.5\">The JavaScript framework<br>specifically for WordPress.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b315634e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/faust-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-1e5642acd0c4764eac9bf4f34d78460d has-global-padding is-layout-constrained wp-container-core-group-is-layout-9b866ece wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#267048;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-75880670 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:140px\"><svg fill=\"none\" viewBox=\"0 0 140 54\" aria-label=\"Local logo\"><path fill=\"currentColor\" d=\"M102.778 36.922c2.222 0 4.291-.852 6.026-2.465.091-.061.183-.183.274-.275.244-.273.213-.578.031-.882 0 0-.579-.944-.731-1.157-.152-.213-.274-.304-.456-.334-.213-.03-.427.09-.67.304-1.4 1.187-2.861 1.796-4.352 1.796-4.018 0-5.844-3.805-5.844-7.335 0-3.5 1.796-7.03 5.844-7.03 1.369 0 2.8.517 4.139 1.521.335.244.7.213.883-.091l.76-1.278c.244-.427.183-.7-.091-.974-.061-.061-.152-.152-.243-.213a8.77 8.77 0 0 0-5.57-1.948c-2.283 0-4.291.822-5.874 2.404-1.887 1.887-2.891 4.626-2.891 7.7 0 2.952.852 5.478 2.343 7.274 1.522 1.857 3.774 2.983 6.422 2.983ZM83.026 16.287c-5.083 0-8.887 4.352-8.887 10.135 0 5.934 3.804 10.408 8.887 10.408 5.052 0 8.856-4.474 8.856-10.408 0-5.753-3.804-10.135-8.856-10.135Zm0 17.47c-3.257 0-5.6-3.105-5.6-7.335 0-4.14 2.313-7.061 5.6-7.061 3.287 0 5.6 2.921 5.6 7.06 0 4.353-2.313 7.336-5.6 7.336ZM72.86 33.604h-7.212V17.23a.61.61 0 0 0-.609-.608h-1.978a.61.61 0 0 0-.609.608v18.718a.61.61 0 0 0 .609.608h9.8a.61.61 0 0 0 .608-.608v-1.735a.61.61 0 0 0-.608-.609ZM139.148 33.604h-7.213V17.23a.61.61 0 0 0-.609-.608h-1.978a.61.61 0 0 0-.609.608v18.718a.61.61 0 0 0 .609.608h9.8a.61.61 0 0 0 .608-.608v-1.735a.61.61 0 0 0-.608-.609ZM126.243 35.765l-6.087-18.687c-.091-.243-.304-.426-.578-.426h-2.039c-.244 0-.426.152-.517.365l-6.179 18.748a.6.6 0 0 0 .579.791h1.978c.274 0 .487-.182.578-.426l1.644-5.143h5.904l1.674 5.143c.091.244.304.426.578.426h1.857c.456 0 .73-.395.608-.79Zm-9.891-7.608 1.826-5.722c.152-.457.304-1.066.426-1.583.122.548.274 1.126.426 1.583l1.826 5.722h-4.504ZM25.326 11.052V2.247c0-.605-.394-1.15-.939-1.392-.544-.242-1.21-.09-1.633.333L3.147 20.795C1.059 22.883.06 24.91.03 27.028c0 2.118.969 4.115 3.026 6.172l19.698 19.698a1.42 1.42 0 0 0 1.059.454c.181 0 .393-.03.575-.182.574-.242.938-.786.938-1.391v-8.896c0-.393-.182-.787-.454-1.06L10.015 26.969 24.872 12.11a1.42 1.42 0 0 0 .454-1.059ZM22.3 43.55v4.629L7.958 33.836c-.06-.09-.121-.182-.212-.272-.454-.454-1.816-1.816.212-4.357L22.3 43.549Zm0-33.072L6.596 26.181c-1.21 1.21-2.027 2.48-2.45 3.721-.757-.998-1.12-1.936-1.12-2.844.03-1.27.756-2.632 2.239-4.115L22.3 5.908v4.57Z\"><\/path><path fill=\"currentColor\" d=\"M14.221 26.998v.12c0 .636.514 1.15 1.15 1.15h22.481a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15H15.371a1.15 1.15 0 0 0-1.15 1.15ZM18.548 22.61v.122c0 .635.514 1.15 1.15 1.15h13.797a1.15 1.15 0 0 0 1.15-1.15v-.122a1.15 1.15 0 0 0-1.15-1.15H19.698a1.15 1.15 0 0 0-1.15 1.15ZM29.229 19.464a1.15 1.15 0 0 0 1.15-1.15v-.121a1.15 1.15 0 0 0-1.15-1.15h-5.477a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.515 1.15 1.15 1.15h5.477ZM23.752 37.164h5.477a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15h-5.477a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.515 1.15 1.15 1.15ZM19.698 32.716h13.797a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15H19.698a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.514 1.15 1.15 1.15Z\"><\/path><path fill=\"currentColor\" d=\"M50.379 20.916 30.68 1.218a1.486 1.486 0 0 0-1.634-.332 1.509 1.509 0 0 0-.938 1.391v8.926c0 .394.182.787.454 1.06l14.856 14.856-14.856 14.856a1.42 1.42 0 0 0-.454 1.06v8.804c0 .605.363 1.15.938 1.392.182.09.393.121.575.121.393 0 .756-.151 1.059-.424l19.607-19.606c2.088-2.088 3.086-4.115 3.116-6.234 0-2.117-.968-4.114-3.025-6.172ZM31.135 10.538v-4.63L45.477 20.25c.06.091.12.182.212.273.453.454 1.815 1.815-.212 4.357L31.135 10.538Zm17.004 20.605L31.105 48.178v-4.539l15.703-15.734c1.21-1.21 2.028-2.48 2.451-3.721.757.998 1.12 1.936 1.12 2.844-.03 1.27-.757 2.632-2.24 4.115Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-9cfa9a5a\" style=\"line-height:1.5\">The #1 local WordPress <br>development tool<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b35f32a3 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/local-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download Free \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-traditional-wordpress-template-hierarchy\">The Traditional WordPress Template Hierarchy<\/h2>\n\n\n\n<p>Before we dive into what the templating system is in Faust.js, let\u2019s quickly go over what it mimics in traditional WordPress.&nbsp;<\/p>\n\n\n\n<p>The WordPress template hierarchy is a system that WordPress uses to decide which template files to use when generating a particular page on a WordPress site. This hierarchy is designed to provide a flexible and efficient method for determining the layout and structure of a page based on the type of content being presented.<\/p>\n\n\n\n<p>When a visitor accesses a page on a WordPress site, WordPress runs a query to determine the type of content requested (e.g., a blog post, a specific page, a category archive, etc.). It then consults the template hierarchy to identify the most appropriate template file to use to display this content. The hierarchy is structured as a series of decisions WordPress makes, looking for template files in a specific order. If it doesn&#8217;t find a specific template file, it moves on to a more generic template until it finds a match.<\/p>\n\n\n\n<p>The hierarchy starts with the most specific template files (like those for individual posts or pages) and moves towards more general templates (like archive or index templates) if the more specific templates are not present in the theme. This allows theme developers to create highly customized experiences for different types of content by creating specific template files, while also providing default templates that ensure content is always presented, even if no custom templates are available.<\/p>\n\n\n\n<p>For instance, for a single blog post, WordPress will first look for a template specific to the post&#8217;s ID, then for a template for the post&#8217;s slug, followed by a template for the post type, and so on, down to more generic templates like <code>single.php<\/code> and finally <code>index.php<\/code> if no other template is found.<\/p>\n\n\n\n<p>Here is an image of the template hierarchy:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"339\" src=\"https:\/\/lh7-us.googleusercontent.com\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-templating-system-in-faust.js\">The Templating System in Faust.js<\/h2>\n\n\n\n<p>Now that we understand what Faust.js is mimicking from WordPress in its templating system, let&#8217;s discuss how templates are resolved in it.&nbsp;<\/p>\n\n\n\n<p>The template resolver works by sending a preliminary GraphQL request (called the Seed Query) for the given URI in WordPress. The response includes data like the database ID, slug, content type, etc, which is then used to determine what the possible templates are for the given URI.&nbsp; This is how traditional WordPress does it but in JavaScript! Stoked!!!<\/p>\n\n\n\n<p>In the next few sections, we will dissect the folder and file structure of the default boilerplate template system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-wptemplates-directory\">The WP-Templates Directory<\/h3>\n\n\n\n<p>The Faust.js template system obeys the Next.js Pages Router method.&nbsp; When you spin up the boilerplate npm package, you will see a directory in the root of the project called <code>wp-templates<\/code>.&nbsp; You can name this anything you want, but out of the box, this name makes the most sense. &nbsp; This is the folder that will house your Faust.js templates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-default-files\">The Default Files<\/h3>\n\n\n\n<p>The files that come out of the box with the Faust.js npm package and the pages that they resolve and render&nbsp;are as follows:<\/p>\n\n\n\n<p><code>category.js<\/code> :&nbsp; This resolves and renders the category archive page with the posts that are related within certain categories from the WordPress backend<br><br><code>front-page.js<\/code> : This resolves and renders the front page of the Faust.js boilerplate that contains your general settings data as well as anything you want to add to the front-page template.&nbsp; When first spun up, it just renders HTML that says this is a front page.<\/p>\n\n\n\n<p><code>index.js<\/code>: This is where your template files will be kept and sifted through for the system to go through what template is best to resolve and render.<\/p>\n\n\n\n<p><code>page.js<\/code> : This file resolves and renders any page post type in WordPress.<\/p>\n\n\n\n<p><code>single.js<\/code>:&nbsp; This file will render any post from the post type menu. Any individual blog posts will resolve and render this template.&nbsp; <\/p>\n\n\n\n<p><code>tag.js<\/code> : This file is the archive page for a specific page. For example, if you have a tag called \u201capple\u201d it will resolve all of the posts tagged as \u201capple\u201d.<\/p>\n\n\n\n<p>Here is an image of the boilerplate folder with files:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"341\" height=\"516\" src=\"https:\/\/lh7-us.googleusercontent.com\/HaAVGpFQLhFyMfxm7-rP0z3G0Ls3VS_-pFNA8_LLDyY0kgSH_qXvlFUHARD-dfIaEYrNmcV9CD0xYk4bNQ6X7ahnJAdDD3y0I_-rw0-lkVGrD-fJXw9aSC3hMlpgUAMErqCl22KnGxzRauwhPriBSv4\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-your-first-custom-template\">Create Your First Custom Template<\/h2>\n\n\n\n<p>Now that we have an understanding of how the templating works in Faust.js, let\u2019s create a custom template.<\/p>\n\n\n\n<p>The first template we will make is a custom sample page template.&nbsp; Navigate to the <code>wp-templates<\/code> directory at the root of your Faust.js project and create a file called <code>sample-page.js<\/code>.&nbsp; Once the file is created, copy and paste this code onto the file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { gql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@apollo\/client\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ The Component is required<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Component<\/span>(<span class=\"hljs-params\">props<\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">return<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{props.data.page.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">dangerouslySetInnerHTML<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">__html:<\/span> <span class=\"hljs-attr\">props.data.page.content<\/span> }} \/&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">    <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">  );<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">}<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">Component.query = gql<span class=\"hljs-string\">`<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">  query GetPageDataByURI($uri: ID!) {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">    page(id: $uri, idType: URI) {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">      title<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">      content<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">      slug<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">    }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">  }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-string\">`<\/span>;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">Component.variables = <span class=\"hljs-function\">(<span class=\"hljs-params\">seedQuery, context<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">uri<\/span>: seedQuery?.uri,<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\">Component.variables = <span class=\"hljs-function\">(<span class=\"hljs-params\">seedQuery, context<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">uri<\/span>: seedQuery?.uri,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Let\u2019s break down what is happening in the code block.<\/p>\n\n\n\n<p>At the top of the file, we import the <code>gql<\/code> tag from the Apollo Client to parse WPGraphQL queries.<\/p>\n\n\n\n<p>Next, we define a functional component named <code>Component<\/code> that takes <code>props<\/code> as an argument.&nbsp; This will be the default exported component.<\/p>\n\n\n\n<p>Following that we return some JSX to render the HTML using the React escape hatch to render the content from a string.&nbsp; We traverse that data path accurately to gain access to the content of the page from WordPress, in this case, just the page content and the page title.<\/p>\n\n\n\n<p>Below that, we have our WPGraphQL queries the <code>Component.query<\/code> syntax from Faust to assign the query prop of the component.&nbsp; We are querying for page data by a variable which is its URI.<\/p>\n\n\n\n<p>Lastly, we need to add its variable component function.&nbsp; We define that and assign it a variables property which is used to compute the variables of the WPGraphQL query based on the input parameters <code>seedQuery<\/code> and <code>context<\/code>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Then we return an object containing the variables for the query and access the URI by chaining the <code>seedQuery<\/code>.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-index-file\">The Index File<\/h3>\n\n\n\n<p>Before we test this out and see if this renders correctly on the browser, the finishing step is to add and specify the template in our <code>index.js<\/code> file in the <code>wp-templates<\/code> directory.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The <code>index.js<\/code> file is the most important file in the <code>wp-templates<\/code> directory when using Faust.js for headless WordPress. It acts as the control center, telling the system which template to use for showing content on the browser. Without setting up this file, the website won&#8217;t display pages correctly, if at all.<\/p>\n\n\n\n<p>I like to think of it as a directory or map. It lists all the templates you have and matches them with what the user wants to see. This setup is vital for making sure the right template is picked for each page request. Without this file, the system is like a library without an index; you wouldn&#8217;t know where to find anything.<\/p>\n\n\n\n<p>In the <code>wp-templates<\/code> folder, import your <code>sample-page.js<\/code> file at the top, then in the export object add the key identifier and value of the imported module like so:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"429\" src=\"https:\/\/lh7-us.googleusercontent.com\/Fw9hSfGOU-xpbMMepHm4gRXfztSlS6xth2tTp-uaAnALLyOkqpGjeFxTP3-HZu5xdsDnYTYeicTuG1WllYVTAZs7oN8qVhGRcMzhrlMRa39fQHUqpOXvTvB4P1l7uquVhAGpErTbW55nSSqdvF3xlMc\"><\/p>\n\n\n\n<p>Notice that we make the key ID string unique by calling it <code>page-sample-page<\/code>.  If we do not, the page will conflict with the <code>page.js<\/code> file and render that instead.  Make sure to make the key ID string unique in relation to the other files in your <code>wp-templates<\/code> folder.<\/p>\n\n\n\n<p>&nbsp;We can now test this out and see if it works.<\/p>\n\n\n\n<p>Go to your WP Admin and navigate to the Pages option on the left-hand side of the hamburger menu:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/luT0M0EnqadKpoUoDhvF3vVFsBfFHpJ1g36kiKXKTbaJlUMh140-QS_OEaGVvOJbHb3px7i1gHCSpRbIs516PESVX8r0PgLZzIUZwuO4Tf4jd-oN919CDiAKv0aYQ433ThCXg_y8K903OkH_DOB5t84\" width=\"617\" height=\"367\"><\/p>\n\n\n\n<p>Make a test sample page.&nbsp; You can call this whatever you want.&nbsp; I called it Test Faust.js Sample Page.&nbsp; Click on the page link you just created to edit it:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/NzmZScAN7OTjM35Fq_e_n7yCyVm4GyhRwBDdThl24Ek4T_ECqq4fPBH-R20-r1WW49X1HUH6coXcIAyk5mZLWZIb5kvuvajlkU6Fcy3qdX5KYCjb6fjtj1LbGgKxvMJwyulUCMinrtQaT8D8evtRB14\" width=\"651\" height=\"336\"><\/p>\n\n\n\n<p>In the URL field, make sure the permalink reflects the name of your file on the frontend.&nbsp; In this case, it is <code>sample-page<\/code>.&nbsp; This will tell Faust.js what template to resolve.<\/p>\n\n\n\n<p>Finally, click the link to view the page and you should see this on the browser:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"408\" src=\"https:\/\/lh7-us.googleusercontent.com\/_7gv6oEFVZd9WWgloAMWgXGxybohjTALgAx2kQY5faDR43lx_Nh8O3kwR88SouufPG2rtACkdZpvevWBLzOHgiSapb15HJLt-OCivbJJexrQ2XNbMKP_AoMr340JXoJ4Rhh7ll9wliXfA4t8niAdZ14\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>The template hierarchy in traditional WordPress is an important system to help the overall UI experience for users on a website.\u00a0 In headless WordPress, Faust.js compliments that hierarchy to mimic it on the JavaScript frontend. I hope this gave you a better understanding of how the basics work on the Faust.js side.<\/p>\n\n\n\n<p>Stay tuned for my next article on this matter where we will dive a little deeper and create custom templates in Faust.js with WPGraphQL for ACF.&nbsp;&nbsp;<\/p>\n\n\n\n<p>As always, stoked to hear your feedback and any questions you might have on headless WordPress! Hit us up in our <a href=\"https:\/\/discord.com\/invite\/J2khkF9XYK\">Discord<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Templates in Faust bring the power of the WordPress Template Hierarchy to your JavaScript frontend application. This article is a high-level guide to walk you through how templates are resolved [&hellip;]<\/p>\n","protected":false},"author":20,"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-31504","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding The Templating System in Faust.js - Builders<\/title>\n<meta name=\"description\" content=\"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.\" \/>\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\/understanding-the-templating-system-in-faust-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding The Templating System in Faust.js\" \/>\n<meta property=\"og:description\" content=\"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-23T17:24:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T18:11:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/02\/WPGraphQL-Office-Hours-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Francis Agulto\" \/>\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=\"Francis Agulto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/\"},\"author\":{\"name\":\"Francis Agulto\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/bcdcb4ac0b215c34b6b30e440a24dc54\"},\"headline\":\"Understanding The Templating System in Faust.js\",\"datePublished\":\"2024-02-23T17:24:38+00:00\",\"dateModified\":\"2024-02-29T18:11:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/\"},\"wordCount\":1531,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/\",\"name\":\"Understanding The Templating System in Faust.js - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw\",\"datePublished\":\"2024-02-23T17:24:38+00:00\",\"dateModified\":\"2024-02-29T18:11:38+00:00\",\"description\":\"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw\",\"contentUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/understanding-the-templating-system-in-faust-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding The Templating System in Faust.js\"}]},{\"@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\\\/bcdcb4ac0b215c34b6b30e440a24dc54\",\"name\":\"Francis Agulto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"caption\":\"Francis Agulto\"},\"description\":\"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding The Templating System in Faust.js - Builders","description":"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.","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\/understanding-the-templating-system-in-faust-js\/","og_locale":"en_US","og_type":"article","og_title":"Understanding The Templating System in Faust.js","og_description":"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.","og_url":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/","og_site_name":"Builders","article_published_time":"2024-02-23T17:24:38+00:00","article_modified_time":"2024-02-29T18:11:38+00:00","og_image":[{"width":1600,"height":640,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/02\/WPGraphQL-Office-Hours-1.png","type":"image\/png"}],"author":"Francis Agulto","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Francis Agulto","Est. reading time":"31 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/"},"author":{"name":"Francis Agulto","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54"},"headline":"Understanding The Templating System in Faust.js","datePublished":"2024-02-23T17:24:38+00:00","dateModified":"2024-02-29T18:11:38+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/"},"wordCount":1531,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-us.googleusercontent.com\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/","url":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/","name":"Understanding The Templating System in Faust.js - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-us.googleusercontent.com\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw","datePublished":"2024-02-23T17:24:38+00:00","dateModified":"2024-02-29T18:11:38+00:00","description":"Understand basics of the integration in the WordPress template hierarchy with Faust.js for headless WordPress setups. Learn how to create and resolve templates using Faust.js for a dynamic JavaScript frontend application.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#primaryimage","url":"https:\/\/lh7-us.googleusercontent.com\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw","contentUrl":"https:\/\/lh7-us.googleusercontent.com\/CAm_Ie6mkFBVsmxhrJ9wCMF7o6Wb45NpQTUIxuld8Uewg5eo8Bh_uvii3hQ1_fPE0HrPkPtGubUZjDXAoo2cs3PMP0e3gZaYpiqVOplXnjUxu6O93lqT4LBqafAbilcTj664UqGA7q6H7fTlGme7bNw"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/understanding-the-templating-system-in-faust-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Understanding The Templating System in Faust.js"}]},{"@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\/bcdcb4ac0b215c34b6b30e440a24dc54","name":"Francis Agulto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","caption":"Francis Agulto"},"description":"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!","url":"https:\/\/wpengine.com\/builders\/author\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31504","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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31504"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31504\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}