{"id":350070,"date":"2021-09-09T07:31:18","date_gmt":"2021-09-09T14:31:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=350070"},"modified":"2021-09-09T07:31:21","modified_gmt":"2021-09-09T14:31:21","slug":"mars-theme-a-deep-look-at-frontitys-headless-wordpress-theme","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/mars-theme-a-deep-look-at-frontitys-headless-wordpress-theme\/","title":{"rendered":"Mars Theme: A Deep Look at Frontity\u2019s Headless WordPress Theme"},"content":{"rendered":"\n<p class=\"is-style-explanation\">This post was in progress before Automattic&nbsp;<a href=\"https:\/\/frontity.org\/blog\/frontity-is-joining-automattic\/\" rel=\"noopener\">acquired Frontity and its entire team<\/a>. According to Frontity&#8217;s founders, the framework will be transitioned into a community-led project and leave the project in \u201ca stable, bug-free position\u201d with documentation and features. Like other open-source community projects, Frontity will remain free as it has been, with opportunities to contribute to the project and make it an even better framework for decoupled WordPress. More detail is found&nbsp;<a href=\"https:\/\/frontity.org\/frontity-automattic-qa\/\" rel=\"noopener\">in this FAQ page<\/a>.<\/p>\n\n\n\n<p>In my <a href=\"https:\/\/css-tricks.com\/creating-headless-wordpress-site-with-frontity\">previous article<\/a>, we created a headless WordPress site with Frontity and briefly looked at its file structure. In this companion article, we will go into a deep dive of the <code>@frontity\/mars-theme<\/code> package, or Mars Theme, with a step-by-step walkthrough on how to customize it to make our own. Not only is the Mars Theme a great starter, it\u2019s Frontity\u2019s default theme \u2014 sort of like WordPress Twenty Twenty-One or the like. That makes it a perfect starting point for us to get hands-on experience with Frontity and its features.<\/p>\n\n\n\n<p>Specifically, we will look at the fundamental parts of Frontity\u2019s Mars Theme, including what they call \u201cbuilding blocks\u201d as well as the different components that come with the package. We\u2019ll cover what those components do, how they work, and finally, how styling works with examples.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Ready? Let\u2019s go!<\/p>\n\n\n\n<div class=\"wp-block-group ticss-c35bb282\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h2 class=\"wp-block-heading\" id=\"h-table-of-contents\">Table of contents<\/h2>\n\n\n<ul><li>Introduction: <a href=\"#frontitys-building-blocks\">Frontity&#8217;s building blocks<\/a><\/li><li>Section 1: <a href=\"#section-1-digging-into-the-mars-theme\">Digging into the Mars Theme<\/a><\/li><li>Section 2: <a href=\"#section-2-working-with-the-list-component\">Working with the List component<\/a><\/li><li>Section 3: <a href=\"#section-3-links-menus-and-featured-images\">Links, menus, and featured images<\/a><\/li><li>Section 4: <a href=\"#section-4-how-to-style-a-frontity-project\">How to style a Frontity project<\/a><\/li><li>Section 5: <a href=\"#section-5-customizing-the-frontity-mars-theme\">Customizing the Frontity Mars Theme<\/a><\/li><li>Section 6: <a href=\"#section-6-resources-and-credit\">Resources and credit<\/a><\/li><li>Conclusion: <a href=\"#wrapping-up-and-personal-thoughts\">Wrapping up and personal thoughts<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-frontity-s-building-blocks\">Frontity\u2019s building blocks<\/h3>\n\n\n<p>Let\u2019s revisit the file structure of the Frontity project we made <a href=\"https:\/\/css-tricks.com\/creating-headless-wordpress-site-with-frontity\">in the last article<\/a> as that shows us exactly where to find Frontity\u2019s building blocks, the <code>frontity.settings.js<\/code>, and <code>package.json<\/code> and <code>packages\/mars-theme<\/code> folder. We covered these is great detail before but, in particular, the <code>package.json<\/code> file gives us a lot of information about the project, like the name, description, author, dependencies, etc. Here\u2019s what that file includes:<\/p>\n\n\n\n<ul><li><strong><code>frontity<\/code>:<\/strong> this is the main package that includes all the methods used in Frontity app development. It\u2019s also where the CLI lives.<\/li><li><strong><code>@frontity\/core<\/code>:<\/strong> This is the most important package because it takes care of all the bundling, rendering, merging, transpiling, serving, etc. We don\u2019t need to access to it in order to develop a Frontity app. The full list is captured in <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity\" rel=\"noopener\">the Frontity docs<\/a>.<\/li><li><strong><code>@frontity\/wp-source<\/code>:<\/strong> <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/wp-source\" rel=\"noopener\">This package<\/a> connects to the WordPress REST API of our site and fetches all the data needed in the Mars Theme.<\/li><li><strong><code>@frontity\/tiny-router<\/code>:<\/strong> <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/tiny-router\" rel=\"noopener\">This package<\/a> handles <code>window.history<\/code> and helps us with routing.<\/li><li><strong><code>@frontity\/htmal2react<\/code>:<\/strong> <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/html2react\" rel=\"noopener\">This package<\/a> converts HTML to React, working with <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/html2react#processors\" rel=\"noopener\">processors<\/a> that match HTML portions while replacing them with React components.<\/li><\/ul>\n\n\n\n<p>Frontity core, or <code>@frontity\/package<\/code> (also referred as Frontity\u2019s <strong>building block<\/strong>), is composed of useful React component libraries in its <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components\" rel=\"noopener\">@frontity\/components<\/a> package, which exports helpful things like <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#link\" rel=\"noopener\">Link<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#auto-prefetch\" rel=\"noopener\">Auto Prefetch<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#image\" rel=\"noopener\">Image<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#props\" rel=\"noopener\">Props<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#iframe\" rel=\"noopener\">Iframe<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/collections-packages\/components#switch\" rel=\"noopener\">Switch<\/a>, and other functions, objects, etc., that can be directly imported into Frontity project components. A more detailed description of these components\u2014including syntax info use cases\u2014is in this <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#api-reference\" rel=\"noopener\">package reference API<\/a>.<\/p>\n\n\n\n<p>The Frontity docs provide a little more information on <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme#how-does-everything-work-together\" rel=\"noopener\">what happens when a Frontity project is started<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>When starting frontity, all the packages defined in <code>frontity.settings.js<\/code> are imported by <code>@frontity\/file-settings<\/code> and the settings and exports from each package are merged by <code>@frontity\/core<\/code> into a single store where you can access the <code>state<\/code> and <code>actions<\/code> of the different packages during development using <code>@frontity\/connect<\/code>, the frontity state manager.<\/p><\/blockquote>\n\n\n\n<p>Next up, we\u2019re familiarizing ourselves with how these building blocks, utilities and exports are used in the <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/index.js\" rel=\"noopener\">Mars Theme package<\/a> to create a functioning Frontity project with a headless WordPress endpoint.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-1-digging-into-the-mars-theme\">Section 1: Digging into the Mars Theme<\/h3>\n\n\n<p>Before discussing styling and customizing let\u2019s briefly familiarize ourselves with the Mars Theme (<code><a href=\"https:\/\/github.com\/frontity\/frontity\/tree\/dev\/packages\/mars-theme\" rel=\"noopener\">@frontity\/mars-theme<\/a><\/code>) file <a href=\"https:\/\/github.com\/frontity\/frontity\/tree\/dev\/packages\/mars-theme#theme-anatomy\" rel=\"noopener\">structure<\/a> and how it is put together.<\/p>\n\n\n\n<pre rel=\"Files\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">#! frontity\/mars-theme file structure\npackages\/mars-theme\/\n|__ src\/\n  |__ index.js\n  |__ components\/\n     |__ list\/\n       |__ index.js\n       |__ list-item.js\n       |__ list.js\n       |__ pagination.js\n     |__ featured-media.js\n     |__ header.js\n     |__ index.js\n     |__ link.js\n     |__ loading.js\n     |__ menu-icon.js\n     |__ menu-model.js\n     |__ menu.js\n     |__ nav.js\n     |__ page-error.js\n     |__ post.js\n     |__ title.js<\/code><\/pre>\n\n\n\n<p>The Mars Theme has three important component files: <code>\/src\/index.js<\/code> file, <code>src\/list\/index.js<\/code> and <code>src\/components\/index.js<\/code>. Frontity\u2019s documentation is a great resource for understanding the Mars Theme, with especially great detail on <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1\" rel=\"noopener\">how different Mars Theme components are defined and connected together in a Frontity site<\/a>. Let\u2019s start familiarizing ourselves with the theme\u2019s three most important components: <code>Root<\/code>, <code>Theme<\/code> and <code>List<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-theme-root-component-src-index-js\">Theme Root component (<code>\/src\/index.js<\/code>)<\/h4>\n\n\n<p>The <code>src\/index.js<\/code> file, also known as the theme\u2019s <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/roots#roots\" rel=\"noopener\">Root<\/a>, is one of the most important Mars Theme components. The Root serves as an <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/packages#entry-points\" rel=\"noopener\">entry point<\/a> that targets <code>&lt;div id=\"root\"&gt;<\/code> in the site markup to inject the roots of all the installed packages required to run a Frontity project. A Frontity theme exports a <strong>root<\/strong> and other required packages in the DOM as shown in the following use case example <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/roots#roots\" rel=\"noopener\">from the Frontity documentation<\/a>:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- \/index.HTML (rendered by Frontity) -->\n&lt;html>\n  &lt;head>...&lt;\/head>\n  &lt;body>\n    &lt;div id=\"root\">\n      &lt;MyAwesomeTheme \/>\n      &lt;ShareModal \/>\n      &lt;YetAnotherPackage \/>\n    &lt;\/div>\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/docs.frontity.org\/learning-frontity\/roots#roots\" rel=\"noopener\">This Frontity doc<\/a> explains how Frontity extends its theme using extensibility patterns called <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#slot\" rel=\"noopener\">Slot<\/a> and <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#usefills\" rel=\"sponsored nofollow noopener\">Fill<\/a>. An example of the <code>Root<\/code> component (<code>\/src\/index.js<\/code>) is <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/index.js\\\" rel=\"noopener\">taken from its Mars Theme package<\/a> (<code>@frontity\/mars-theme<\/code>).<\/p>\n\n\n\n<p>This is everything the package pulls in when initializing the <code>Root<\/code> component:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"12,13,14,15,16\"><code markup=\"tt\">\/\/ mars-theme\/src\/components\/index.js\nimport Theme from \".\/components\";\n\/\/ import processor libraries\nimport image from \"@frontity\/html2react\/processors\/image\";\nimport iframe from \"@frontity\/html2react\/processors\/iframe\";\nimport link from \"@frontity\/html2react\/processors\/link\";\n\nconst marsTheme = {\n  \/\/ The name of the extension\n  name: \"@frontity\/mars-theme\",\n  \/\/ The React components that will be rendered\n  roots: {\n    \/** In Frontity, any package can add React components to the site.\n      * We use roots for that, scoped to the `theme` namespace. *\/\n    theme: Theme,\n  },\n  state: {\n    \/** State is where the packages store their default settings and other\n      * relevant state. It is scoped to the `theme` namespace. *\/\n    theme: {\n      autoPrefetch: \"in-view\",\n      menu: [],\n      isMobileMenuOpen: false,\n      featured: {\n        showOnList: false,\n        showOnPost: false,\n      },\n    },\n  },\n\n  \/** Actions are functions that modify the state or deal with other parts of\n    * Frontity-like libraries. *\/\n  actions: {\n    theme: {\n      toggleMobileMenu: ({ state }) => {\n        state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;\n      },\n      closeMobileMenu: ({ state }) => {\n        state.theme.isMobileMenuOpen = false;\n      },\n    },\n  },\n  \/** The libraries that the extension needs to create in order to work *\/\n  libraries: {\n    html2react: {\n      \/** Add a processor to `html2react` so it processes the `&lt;img>` tags\n        * and internal link inside the content HTML.\n        * You can add your own processors too. *\/\n      processors: [image, iframe, link],\n    },\n  },\n};\n\nexport default marsTheme;<\/code><\/pre>\n\n\n\n<p>The Mars Theme root component <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1#exports\" rel=\"noopener\">exports<\/a> packages that <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/packages#package-exports\" rel=\"noopener\">includes<\/a> any of the <em>roots<\/em>, <em>fills<\/em>, <em>state<\/em>, <em>actions<\/em> and <em>libraries<\/em> elements. More detailed information on <code>Root<\/code> can be found in <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/roots#roots\" rel=\"noopener\">this Frontity doc<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-theme-component-src-components-index-js\">Theme component (<code>\/src\/components\/index.js<\/code>)<\/h4>\n\n\n<p>The Frontity <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1#theme-component\" rel=\"noopener\"><code>Theme<\/code> component<\/a> is its main root level component that is exported by the <code>Theme<\/code> namespace (lines 12-16, highlighted in the previous example. The <code>Theme<\/code> component is wrapped with the <code>@frontity\/connect<\/code> function (line 51, highlighted below) which provides access to its <code>state<\/code>, <code>actions<\/code> and <code>libraries<\/code> props from the <code>Root<\/code> component instance and allows <code>Theme<\/code> component to read the <code>state<\/code>, manipulate through <code>actions<\/code>, or use code from other features packages in the libraries.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"39,40,41,42,43,44,45,46,51\"><code markup=\"tt\">\/\/ mars-theme\/src\/components\/index.js\nimport React from \"react\"\n\/\/ Modules from @emotion\/core, @emotion\/styled, css, @frontity\/connect, react-helmet\nimport { Global, css, connect, styled, Head } from \"frontity\";\nimport Switch from \"@frontity\/components\/switch\";\nimport Header from \".\/header\";\nimport List from \".\/list\";\nimport Post from \".\/post\";\nimport Loading from \".\/loading\";\nimport Title from \".\/title\";\nimport PageError from \".\/page-error\";\n\n\/** Theme is the root React component of our theme. The one we will export\n * in roots. *\/\nconst Theme = ({ state }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n\n  return (\n    &lt;>\n      {\/* Add some metatags to the &lt;head> of the HTML with react-helmet *\/}\n      &lt;Title \/>\n      &lt;Head>\n        &lt;meta name=\"description\" content={state.frontity.description} \/>\n        &lt;html lang=\"en\" \/>\n      &lt;\/Head>\n\n      {\/* Add some global styles for the whole site, like body or a's. \n      Not classes here because we use CSS-in-JS. Only global HTML tags. *\/}\n      &lt;Global styles={globalStyles} \/>\n\n      {\/* Render Header component. Add the header of the site. *\/}\n      &lt;HeadContainer>\n        &lt;Header \/>\n      &lt;\/HeadContainer>\n\n      {\/* Add the main section. It renders a different component depending\n      on the type of URL we are in. *\/}\n      &lt;Main>\n        &lt;Switch>\n          &lt;Loading when={data.isFetching} \/>\n          &lt;List when={data.isArchive} \/>\n          &lt;Post when={data.isPostType} \/>\n          &lt;PageError when={data.isError} \/>\n        &lt;\/Switch>\n      &lt;\/Main>\n    &lt;\/>\n  );\n};\n\nexport default connect(Theme);\n\n{\/* define Global styles and styled components used Theme component here *\/}\nconst globalStyles = css`\n  body {\n    margin: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n      \"Droid Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  }\n  a,\n  a:visited {\n    color: inherit;\n    text-decoration: none;\n  }\n`;\nconst HeadContainer = styled.div`\n  \/\/ ...\n`;\n\nconst Main = styled.div`\n  \/\/ ...\n`;<\/code><\/pre>\n\n\n\n<p>This example is pulled directly <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/index.js\\\" rel=\"noopener\">from the Mars Theme<\/a>\u2019s <code>\/src\/components\/index.js<\/code> component, which we imported with <code>connect<\/code> from frontity (line 4, above). We are using <code>state.source.get()<\/code> to retrieve <code>data<\/code> to be rendered from the current path (lines 39-46, highlighted above); for example, <code>List<\/code>, <code>Post<\/code> and other components.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-2-working-with-the-list-component\">Section 2: Working with the List component<\/h3>\n\n\n<p>What we just looked at are the theme-level components in Frontity\u2019s Mars Theme. You may have noticed that those components import additional components. Let\u2019s look at a specific one of those, the <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1#list-component\" rel=\"noopener\"><code>List<\/code> component<\/a>.<\/p>\n\n\n\n<p>The List component is exported by <code>src\/components\/list\/index.js<\/code> which uses <code>@loadable\/components<\/code> to split the List component code in such a way that the component only loads when a user clicks a List view; otherwise it won\u2019t render at all, like when a Post view is clicked instead.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/list\/index.js\nimport { loadable } from \"frontity\";\n\n\/\/ Codesplit the list component so it's not included if the users\n\/\/ load a post directly.\nexport default loadable(() => import(\".\/list\"));<\/code><\/pre>\n\n\n\n<p>In this example, Frontity utilizes <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#loadable\" rel=\"noopener\"><code>loadble<\/code><\/a> functions (integrated from <a href=\"https:\/\/www.smooth-code.com\/open-source\/loadable-components\/docs\/code-splitting\/\" rel=\"noopener\">Loadable components<\/a>) for code splitting which loads a component asynchronously and separates code into different bundles that are dynamically loaded at run time. <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#loadable\" rel=\"noopener\">Frontity\u2019s core package API reference<\/a> goes into much more detail.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-displaying-lists-of-posts\">Displaying lists of posts<\/h4>\n\n\n<p>To display a list of posts in an archive page, we first have to look Frontity <code>src\/components\/list\/list.js<\/code> component. As the name suggests, the <code>List<\/code> component renders lists of posts using <code>state.source.get(link)<\/code> and its <code>items<\/code> field (lines 22-25, highlighted below).<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"22,23,24,25\"><code markup=\"tt\">\/\/ src\/components\/list\/list.js\nimport { connect, styled, decode } from \"frontity\";\nimport Item from \".\/list-item\";\nimport Pagination from \".\/pagination\";\n\nconst List = ({ state }) => {\n  \/\/ Get the data of the current list.\n  const data = state.source.get(state.router.link);\n  return (\n    &lt;Container>\n      {\/* If the list is a taxonomy, we render a title. *\/}\n      {data.isTaxonomy &amp;&amp; (\n        &lt;Header>\n          {data.taxonomy}: {state.source[data.taxonomy][data.id].name}\n        &lt;\/Header>\n      )}\n      {\/* If the list is an author, we render a title. *\/}\n      {data.isAuthor &amp;&amp; (\n        &lt;Header>Author: {state.source.author[data.id].name}&lt;\/Header>\n      )}\n      {\/* Iterate over the items of the list. *\/}\n      {data.items.map(({ type, id }) => {\n        const item = state.source[type][id];\n        \/\/ Render one Item component for each one.\n        return &lt;Item key={item.id} item={item} \/>;\n      })}\n      &lt;Pagination \/>\n    &lt;\/Container>\n  );\n};\nexport default connect(List);<\/code><\/pre>\n\n\n\n<p>In the <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1#list-component\" rel=\"noopener\">code example<\/a> above, the <code>connect<\/code> function is imported by <code>frontity<\/code> in line 2 and is wrapped around the exported <code>connect(List)<\/code> component in line 31 (the last line). Two other components, <code>list-item.js<\/code> and <code>pagination.js<\/code> are also imported. Let\u2019s look at those next!<\/p>\n\n\n\n<p>Here\u2019s what we have for <code>list-item.js<\/code>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"12,13,14,19,20,21,25,26,27,28\"><code markup=\"tt\">\/\/ src\/components\/list\/list-item.js\nimport { connect, styled } from \"frontity\";\nimport Link from \"..\/link\";\nimport FeaturedMedia from \"..\/featured-media\";\n\nconst Item = ({ state, item }) => {\n  const author = state.source.author[item.author];\n  const date = new Date(item.date);\n  return (\n    &lt;article>\n     {\/* Rendering clickable post Title *\/}\n      &lt;Link link={item.link}>\n        &lt;Title dangerouslySetInnerHTML={{ __html: item.title.rendered }} \/>\n      &lt;\/Link>\n      &lt;div>\n        {\/* If the post has an author, we render a clickable author text. *\/}\n        {author &amp;&amp; (\n          &lt;StyledLink link={author.link}>\n            &lt;AuthorName>\n              By &lt;b>{author.name}&lt;\/b>\n            &lt;\/AuthorName>\n          &lt;\/StyledLink>\n        )}\n        {\/* Rendering post date *\/}\n        &lt;PublishDate>\n          {\" \"}\n          on &lt;b>{date.toDateString()}&lt;\/b>\n        &lt;\/PublishDate>\n      &lt;\/div>\n      {\/* If the want to show featured media in the\n       * list of featured posts, we render the media. *\/}\n      {state.theme.featured.showOnList &amp;&amp; (\n        &lt;FeaturedMedia id={item.featured_media} \/>\n      )}\n      {\/* If the post has an excerpt (short summary text), we render it *\/}\n      {item.excerpt &amp;&amp; (\n        &lt;Excerpt dangerouslySetInnerHTML={{ __html: item.excerpt.rendered }} \/>\n      )}\n    &lt;\/article>\n  );\n};\n\/\/ Connect the Item to gain access to `state` as a prop\nexport default connect(Item);<\/code><\/pre>\n\n\n\n<p>The <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/index.js\\\" rel=\"noopener\"><code>Item<\/code> component<\/a> renders the preview of a blog post with clickable post title (lines, 12-14, highlighted above), author name (lines 19-21, highlighted above) and published date (lines: 25-28, highlighted above) along with <code>&lt;FeaturedMedia \/&gt;<\/code> which serves as a post\u2019s optional featured image.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-paginating-a-list-of-posts\">Paginating a list of posts<\/h4>\n\n\n<p>Let\u2019s look at the<a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/index.js\\\" target=\"_blank\" rel=\"noreferrer noopener\"> <code>Pagination<\/code> component<\/a> that was rendered earlier in the List component by the <code>src\/components\/list\/pagination\/js<\/code> that follows:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/list\/pagination.js\nimport { useEffect } from \"react\";\nimport { connect, styled } from \"frontity\";\nimport Link from \"..\/link\";\n\nconst Pagination = ({ state, actions }) => {\n  \/\/ Get the total posts to be displayed based for the current link\n  const { next, previous } = state.source.get(state.router.link);\n  \/\/ Pre-fetch the the next page if it hasn't been fetched yet.\n  useEffect(() => {\n    if (next) actions.source.fetch(next);\n  }, []);\n  return (\n    &lt;div>\n      {\/* If there's a next page, render this link *\/}\n      {next &amp;&amp; (\n        &lt;Link link={next}>\n          &lt;Text>\u2190 Older posts&lt;\/Text>\n        &lt;\/Link>\n      )}\n      {previous &amp;&amp; next &amp;&amp; \" - \"}\n      {\/* If there's a previous page, render this link *\/}\n      {previous &amp;&amp; (\n        &lt;Link link={previous}>\n          &lt;Text>Newer posts \u2192&lt;\/Text>\n        &lt;\/Link>\n      )}\n    &lt;\/div>\n  );\n};\n\/**\n * Connect Pagination to global context to give it access to\n * `state`, `actions`, `libraries` via props\n *\/\nexport default connect(Pagination);<\/code><\/pre>\n\n\n\n<p>The <code>Pagination<\/code> component is used so that users can paginate between lists of posts \u2014 you know, like navigating forward from Page 1 to Page 2, or backward from Page 2 to Page 1. The <code>state<\/code>, <code>actions<\/code>, <code>libraries<\/code> props are provided by the global context that wraps and exports them with <code>connect(Pagination)<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-displaying-single-posts\">Displaying single posts<\/h4>\n\n\n<p>The <a href=\"https:\/\/docs.frontity.org\/guides\/understanding-mars-theme-1#post-component\" rel=\"noopener\"><code>Post<\/code> component<\/a> displays both single posts and pages. Indeed, structurally both are the same except, in posts, we usually display meta data (author, date, categories etc). Meta data isn\u2019t usually used in pages.<\/p>\n\n\n\n<p>In this <code>Post<\/code> component, conditional statements are rendered only if the <code>post<\/code> object contains data (i.e. <code>data.isPost<\/code>) and a featured image is selected in <code>sate.theme.featured<\/code> in the theme\u2019s root component:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/post.js\nimport { useEffect } from \"react\";\nimport { connect, styled } from \"frontity\";\nimport Link from \".\/link\";\nimport List from \".\/list\";\nimport FeaturedMedia from \".\/featured-media\";\n\nconst Post = ({ state, actions, libraries }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n  \/\/ Get the data of the post.\n  const post = state.source[data.type][data.id];\n  \/\/ Get the data of the author.\n  const author = state.source.author[post.author];\n  \/\/ Get a human readable date.\n  const date = new Date(post.date);\n  \/\/ Get the html2react component.\n  const Html2React = libraries.html2react.Component;\n\n  useEffect(() => {\n    actions.source.fetch(\"\/\");\n    {\/* Preloading the list component which runs only on mount *\/}\n    List.preload();\n  }, []);\n\n  \/\/ Load the post, but only if the data is ready.\n  return data.isReady ? (\n    &lt;Container>\n      &lt;div>\n        &lt;Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/>\n        {\/* Only display author and date on posts *\/}\n        {data.isPost &amp;&amp; (\n          &lt;div>\n            {author &amp;&amp; (\n              &lt;StyledLink link={author.link}>\n                &lt;Author>\n                  By &lt;b>{author.name}&lt;\/b>\n                &lt;\/Author>\n              &lt;\/StyledLink>\n            )}\n            &lt;DateWrapper>\n              {\" \"}\n              on &lt;b>{date.toDateString()}&lt;\/b>\n            &lt;\/DateWrapper>\n          &lt;\/div>\n        )}\n      &lt;\/div>\n      {\/* Look at the settings to see if we should include the featured image *\/}\n      {state.theme.featured.showOnPost &amp;&amp; (\n        &lt;FeaturedMedia id={post.featured_media} \/>\n      )}\n      {\/* Render the content using the Html2React component so the HTML is processed\n       by the processors we included in the libraries.html2react.processors array. *\/}\n      &lt;Content>\n        &lt;Html2React html={post.content.rendered} \/>\n      &lt;\/Content>\n    &lt;\/Container>\n  ) : null;\n};\n{\/* Connect Post to global context to gain access to `state` as a prop. *\/} \nexport default connect(Post);<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-3-links-menus-and-featured-images\">Section 3: Links, menus, and featured images<\/h3>\n\n\n<p>We just saw how important the <code>List<\/code> component is when it comes to displaying a group of posts. It\u2019s what we might correlate to the markup we generally use when working with the <a href=\"https:\/\/css-tricks.com\/video-screencasts\/91-the-wordpress-loop\/\">WordPress loop<\/a> for archive pages, latest posts feeds, and other post lists.<\/p>\n\n\n\n<p>There are a few more components worth looking at before we get into Mars Theme styling.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-the-link-component-src-components-link-js\">The Link component (<code>src\/components\/link.js<\/code>)<\/h4>\n\n\n<p>The following <code>MarsLink<\/code> component comes from <code><a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/link.js\" target=\"_blank\" rel=\"noreferrer noopener\">src\/components\/link.js<\/a><\/code>, which is a wrapper on top of the <code>{@link Link}<\/code> component. It <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/link.js\" rel=\"noopener\">accepts<\/a> the same props as the <code>{@link Link}<\/code> component.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/link.js\nimport { connect, useConnect } from \"frontity\";\nimport Link from \"@frontity\/components\/link\";\n\nconst MarsLink = ({ children, ...props }) => {\n  const { state, actions } = useConnect();\n\n  \/** A handler that closes the mobile menu when a link is clicked. *\/\n  const onClick = () => {\n    if (state.theme.isMobileMenuOpen) {\n      actions.theme.closeMobileMenu();\n    }\n  };\n\n  return (\n    &lt;Link {...props} onClick={onClick} className={className}>\n      {children}\n    &lt;\/Link>\n  );\n};\n\/\/ Connect the Item to gain access to `state` as a prop\nexport default connect(MarsLink, { injectProps: false });<\/code><\/pre>\n\n\n\n<p>As explained in <a href=\"https:\/\/tutorial.frontity.org\/part2-adding-a-menu\/use-the-link-component\" rel=\"noopener\">this tutorial<\/a>, the <code>Link<\/code> component provides a <code>link<\/code> attribute that takes a target URL as its value. Quoting from the doc: <q>it outputs an <code>&lt;a&gt;<\/code> element into the resulting HTML, but without forcing a page reload which is what would occur if you simply added an <code>&lt;a&gt;<\/code> element instead of using the <code>Link<\/code> component.<\/q><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-frontity-menu-src-components-nav-js\">Frontity menu (<code>src\/components\/nav.js<\/code>)<\/h4>\n\n\n<p>Earlier, we defined values for menu items in the <code>frontity.settings.js<\/code> file. In the <code>Nav<\/code> component (located in <code><a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/nav.js\" target=\"_blank\" rel=\"noreferrer noopener\">src\/components\/nav\/js<\/a><\/code>) those menu item values are iterated over, match their page <code>url<\/code>, and display the component inside the <code>Header<\/code> component.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/nav.js\nimport { connect, styled } from \"frontity\";\nimport Link from \".\/link\";\n\nconst Nav = ({ state }) => (\n  &lt;NavContainer>\n    \/\/ Iterate over the menu exported from state.theme and menu items value set in frontity.setting.js\n    {state.theme.menu.map(([name, link]) => {\n      \/\/ Check if the link matched the current page url\n      const isCurrentPage = state.router.link === link;\n      return (\n        &lt;NavItem key={name}>\n          {\/* If link URL is the current page, add `aria-current` for a11y *\/}\n          &lt;Link link={link} aria-current={isCurrentPage ? \"page\" : undefined}>\n            {name}\n          &lt;\/Link>\n        &lt;\/NavItem>\n      );\n    })}\n  &lt;\/NavContainer>\n);\n\/\/ Connect the Item to gain access to `state` as a prop\nexport default connect(Nav);<\/code><\/pre>\n\n\n\n<p>The Mars Theme provides two additional menu components \u2014 <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/menu.js\" rel=\"noopener\"><code>menu.js<\/code><\/a> and <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/menu-modal.js\" rel=\"noopener\"><code>menu-modal.js<\/code><\/a> \u2014 for mobile device views which, like <code>nav.js<\/code>, are available from the <a href=\"https:\/\/github.com\/frontity\/frontity\/tree\/dev\/packages\/mars-theme\/src\/components\" rel=\"noopener\">Mars Theme GitHub repository<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-featured-image-component-src-components-featured-media-js\">Featured Image component (<code>\/src\/components\/featured-media.js<\/code>)<\/h4>\n\n\n<p>In Frontity, featured media items values are defined in the <code>Root<\/code> component \u2018s <code>theme.state.featured<\/code> line that we discussed earlier. Its full code is available in the <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/featured-media.js\" rel=\"noopener\"><code>\/src\/components\/featured-media.js<\/code><\/a> component file.<\/p>\n\n\n\n<p>Now that we&#8217;re more familiar with the Mars Theme, as well as its building blocks, components, and functions, we can move into the different approaches that are available for styling the Mars Theme front-end.<\/p>\n\n\n\n<p>As we move along, you may find this <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles\" target=\"_blank\" rel=\"noreferrer noopener\">Frontity doc<\/a> a good reference for the various styling approaches we cover.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-4-how-to-style-a-frontity-project\">Section 4: How to style a Frontity project<\/h3>\n\n\n<p>For those of us coming from WordPress, styling in Frontity looks and feels different than the various approaches for <a href=\"https:\/\/css-tricks.com\/methods-overriding-styles-wordpress\/\">overriding styles in a typical WordPress theme<\/a>.<\/p>\n\n\n\n<p>First off, Frontity provides us with <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles#styled\" rel=\"noopener\">reusable components made with with styled-components<\/a>, and <a href=\"https:\/\/emotion.sh\/docs\/introduction\" rel=\"noopener\">Emotion<\/a>, a CSS library for styling components in JavaScript, right out of the box. Emotion is popular with React and JavaScript developers, but not so much in the WordPress community based on what I\u2019ve seen. CSS-Tricks has <a href=\"https:\/\/css-tricks.com\/tag\/css-in-js\/\">covered CSS-in-JS<\/a> in great detail including <a href=\"https:\/\/css-tricks.com\/comparing-styling-methods-in-2020\/\">how it compares with other styling<\/a>, and <a href=\"https:\/\/css-tricks.com\/video-screencasts\/168-css-in-js\/\">this video<\/a> provides background information about the library. So, knowing that both styled-components and Emotion are available and ready to use is nice context as we get started.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Frontity\u2019s documentation has great learning resources for <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles\" rel=\"noopener\">styling frontity components<\/a> as well as <a href=\"https:\/\/tutorial.frontity.org\/part4-adding-styling\" rel=\"noopener\">set-by-step guidance for customizing Frontity theme styles<\/a>.<\/p>\n\n\n\n<p>I am new to the CSS-in-JS world, except for some general reading on it here and there. I was exposed to CSS-in-JS styling in a Gatsby project, but <a href=\"https:\/\/css-tricks.com\/creating-a-gatsby-site-with-wordpress-data\/#section-5-styling-and-deployment\">Gatsby provides a bunch of other styling options<\/a> that aren\u2019t readily available in Frontity or the Mars Theme. That said, I feel I was able to get around that lack of experience, and what I learned from my discovery work is how I\u2019m going to frame things.<\/p>\n\n\n\n<p>So, with that, we are going to visit a few styling examples, referencing <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles\" rel=\"noopener\">Frontity\u2019s styling documentation<\/a> as we go in order to familiarize ourselves with even more information.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-styled-components\">Using styled-components<\/h4>\n\n\n<p>As the name suggests, we need a component in order to style it. So, first, let\u2019s create a styled-component using Emotion\u2019s <a href=\"https:\/\/emotion.sh\/docs\/styled\" rel=\"noopener\"><code>styled<\/code><\/a> function.<\/p>\n\n\n\n<p>Let\u2019s say we want to style a reusable <code>&lt;Button \/&gt;<\/code> component that\u2019s used throughout our Frontity project. First, we should create a <code>&lt;Button \/&gt;<\/code> component (where its <code>div<\/code> tag is appended with a dot) and then call the component with a template literal for string styles.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Creating Button styled component\nimport { styled } from \"frontity\"\n\nconst Button = styled.div`\n  background: lightblue;\n  width: 100%;\n  text-align: center;\n  color: white;\n`<\/code><\/pre>\n\n\n\n<p>Now this <code>&lt;Button \/&gt;<\/code> component is available to import in other components. Let\u2019s look specifically at the <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/header.js\" target=\"_blank\" rel=\"noreferrer noopener\">Mars Theme<\/a> <code>&lt;Header \/&gt;<\/code> component to see how the styled-component is used in practice.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"39,40,41\"><code markup=\"tt\">\/\/ mars-theme\/src\/components\/header.js\nimport { connect, styled } from \"frontity\";\nimport Link from \".\/link\";\nimport MobileMenu from \".\/menu\";\n\nconst Header = ({ state }) => {\n  return (\n    &lt;>\n      &lt;Container> \/\/ This component is defined later\n        &lt;StyledLink link=\"\/\"> \/\/ This component is defined later\n          &lt;Title>{state.frontity.title}&lt;\/Title> \/\/ This component is defined later\n        &lt;\/StyledLink>\n        \/\/ ...\n      &lt;\/Container>\n    &lt;\/>\n  );\n};\n\n\/\/ Connect the Header component to get access to the `state` in its `props`\nexport default connect(Header);\n\n\/\/ Defining the Container component that is a div with these styles\nconst Container = styled.div` \n  width: 848px;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 24px;\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n`;\n\/\/ Defining Title component that is h2 with these styles \nconst Title = styled.h2`\n  margin: 0;\n  margin-bottom: 16px;\n`;\n\/\/ Defining StyledLink component that is a third-party Link component\nconst StyledLink = styled(Link)`\n  text-decoration: none;\n`;<\/code><\/pre>\n\n\n\n<p>In the above code example, the <code>&lt;StyledLink \/&gt;<\/code> component (lines 39-41, highlighted above) is used to style another component, <code>&lt;Link \/&gt;<\/code>. Similarly. the <code>&lt;Container \/&gt;<\/code> and <code>&lt;Title \/&gt;<\/code> styled-components are used to style the site title and the site\u2019s main container width.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/emotion.sh\/docs\/styled#styling-any-component\" rel=\"noopener\">Emotion docs<\/a> describe how a <q>styled component can be used as long as it accepts <code>className<\/code> props.<\/q> This is a useful styling tool that can be extended using a variable as shown in the following example below <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles#styled\" rel=\"noopener\">from Frontity\u2019s documentation<\/a>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ mars-theme\/src\/components\/header.js \n\/\/ ...\n\/\/ We create a variable to use later as an example\nConst LinkColor = \"green\";\n\n\/\/ ... \n\n\/\/ Defining StyledLink component that is a third-party Link component\nconst StyledLink = styled(Link)`\n  text-decoration: none;\n  Background-color: ${linkColor};\n`;<\/code><\/pre>\n\n\n\n<p>The <code>styled<\/code> component above is used extensively in the Mars Theme. But before we go further, let\u2019s look at using a CSS prop to style components.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-a-css-prop\">Using a CSS prop<\/h4>\n\n\n<p>The <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#css\" rel=\"noopener\"><code>css<\/code> prop<\/a> is available as a template literal for inline styling from the <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#css\" rel=\"noopener\">Frontity core package<\/a>. It is <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles#the-css-prop\" rel=\"noopener\">similar<\/a> to styled-components, except <code>css<\/code> does not return a React component but rather a special object that can be passed to a component through the <code>css<\/code> prop.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"35,36,37,38,39,40,41,42,43,44,45\"><code markup=\"tt\">\/* Using as CSS prop *\/\nimport { css } from \"frontity\";\n\nconst PinkButton = () => (\n  &lt;div css={css`background: pink`}>\n    My Pink Button\n  &lt;\/div>\n);<\/code><\/pre>\n\n\n\n<p>See that? We can style a component inline using the <code>css<\/code> prop on a component. Additional use case examples are available <a href=\"https:\/\/emotion.sh\/docs\/css-prop\" rel=\"noopener\">in the Emotion docs<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-the-global-component\">Using the <code>&lt;Global \/&gt;<\/code> component<\/h4>\n\n\n<p><a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#global\" rel=\"noopener\"><code>&lt;Global \/&gt;<\/code><\/a> is a React component that allows to us create site-wide general styles, though Frontity does not optimize it for performance. Global styles should be added to the <code>&lt;Theme \/&gt;<\/code> root component.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ packages\/mars-theme\/src\/components\/index.js\n\/\/ ...\n\nimport { Global, css, styled } from \"frontity\";\nimport Title from \".\/title\";\nimport Header from \".\/header\";\n\/\/ ...\n\n\/\/ Theme root\nconst Theme = ({ state }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n\n  return (\n   &lt;>\n     {\/* Add some metatags to the &lt;head> of the HTML. *\/}\n      &lt;Title \/>\n        \/\/ ...\n      {\/* Add global styles *\/}\n      &lt;Global styles={globalStyles} \/>\n      {\/* Add the header of the site. *\/}\n      &lt;HeadContainer>\n        &lt;Header \/>\n      &lt;\/HeadContainer>\n        \/\/ ...\n   &lt;\/>\n  );\n };\n\nexport default connect(Theme);\n\nconst globalStyles = css`\n  body {\n    margin: 0;\n    font-family: -apple-system, \"Helvetica Neue\", Helvetica, sans-serif;\n  }\n  a,\n  a:visited {\n    color: inherit;\n    text-decoration: none;\n  }\n`;\n\nconst HeadContainer = styled.div`\n  \/\/ ...\n`;<\/code><\/pre>\n\n\n\n<p>The <code>&lt;Global \/&gt;<\/code> component <a href=\"https:\/\/tutorial.frontity.org\/part4-adding-styling\/global-styles\" rel=\"noopener\">has a <code>style<\/code> attribute<\/a> that takes a <code>css<\/code> function as its value and consists of standard CSS inside back ticks (lines 35-45, highlighted above) as template literals. Frontity <a href=\"https:\/\/api.frontity.org\/frontity-packages\/core-package\/frontity#global\" rel=\"noopener\">recommends<\/a> using global styles for globally-used HTML tags, like <code>&lt;html&gt;<\/code>, <code>&lt;body&gt;<\/code>, <code>&lt;a&gt;<\/code>, and <code>&lt;img&gt;<\/code>.<\/p>\n\n\n\n<p>Additional CSS styling options \u2014 including a <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles#dynamic-css-using-props\" rel=\"noopener\">dynamic CSS prop<\/a> and <a href=\"https:\/\/docs.frontity.org\/learning-frontity\/styles#reacts-style-prop\" rel=\"noopener\">React style props<\/a> \u2014 are described in this <a href=\"https:\/\/tutorial.frontity.org\/part4-adding-styling\" rel=\"noopener\">Frontity guide to styling<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-resources-for-customizing-a-frontity-theme\">Resources for customizing a Frontity theme<\/h4>\n\n\n<p>I did a lot of research heading into my Mars Theme project and thought I\u2019d share some of the more useful resources I found for styling Frontity themes:<\/p>\n\n\n\n<ul><li><strong>Official Frontity themes.<\/strong> In addition to the default Mars Theme, <a href=\"https:\/\/api.frontity.org\/frontity-themes\/frontity-twentytwenty-theme\" rel=\"noopener\">Frontity has a ready-to-use package<\/a> that ports the default WordPress Twenty Twenty theme in its entirety to a Frontity project. You will notice in the next section that my style customizations were inspired by this great learning resource.<\/li><li><strong>Community themes.<\/strong> At this time of this writing, there are a grand total of <a href=\"https:\/\/api.frontity.org\/frontity-themes#third-party-themes\" rel=\"noopener\">nine Frontity community members<\/a> who contributed fully functional theme packages. Those themes can be cloned into your own project and customized according to your needs. Likewise, many of the sites included in the <a href=\"https:\/\/frontity.org\/showcase\/\" rel=\"noopener\">Frontity showcase<\/a> have GitHub repository links, and just as we can copy or pick up design tips from WordPress themes, we can use these resources to customize our own Frontity theme by referencing these packages.<\/li><li><strong>Creating your own theme from scratch.<\/strong> <a href=\"https:\/\/tutorial.frontity.org\/\" rel=\"noopener\">The Frontity tutorial site<\/a> has an excellent step-by-step guide to create your own fully working and functional theme package from scratch. Although it\u2019s a little time consuming to go through it all, it is the best approach to fully understand a Frontity site project.<\/li><\/ul>\n\n\n\n<p>Now that we have covered the more commonly used Frontity styling techniques, let\u2019s apply what we\u2019ve learned to start customizing our Mars Theme project.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-5-customizing-the-frontity-mars-theme\">Section 5: Customizing the Frontity Mars Theme<\/h3>\n\n\n<p>I\u2019m going to share one of my working Frontity projects, where I took the Mars Theme as a base and modified it with the resources we\u2019ve covered so far. Because this is my learning playground, I took time to learn from <a href=\"https:\/\/api.frontity.org\/frontity-themes#frontity-themes\" rel=\"noopener\">Frontity default themes<\/a>, <a href=\"https:\/\/api.frontity.org\/frontity-packages\/themes-packages#community-themes\" target=\"_blank\" rel=\"noreferrer noopener\">community themes<\/a> and <a href=\"https:\/\/frontity.org\/showcase\/\" rel=\"noopener\">Frontity showcase sites<\/a>.<\/p>\n\n\n\n<p>So here are examples of how I customized Frontity\u2019s Mars Theme for my headless WordPress site project.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Repository<\/a><\/div>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-changing-the-theme-package-name\">Changing the theme package name<\/h4>\n\n\n<p>First, I wanted to change the <code>@frontity\/mars-theme<\/code> package name to something different. It\u2019s a good idea to change the package name and make sure all of the dependencies in the package file are up to date. Luis Herrera outlines the required steps for renaming the Mars Theme package in <a href=\"https:\/\/community.frontity.org\/t\/rename-mars-theme-to-a-new-name\/543\/3\" rel=\"noopener\">this frontity community forum<\/a>, which I used as a reference to go from <code>@fontity\/mars-theme<\/code> package to <code>@frontity\/labre-theme<\/code>.<\/p>\n\n\n\n<p>So, open up the <code>package.json<\/code> file and change the <code>name<\/code> property on line 2. This is the name of the package that gets used throughout the project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"619\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-01-1024x619-1.png?resize=1024%2C619&#038;ssl=1\" alt=\"Screenshot of the package.json file open in VS Code. The left panel shows the files and the right panel displays the code.\" class=\"wp-image-350083\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-01-1024x619-1.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-01-1024x619-1.png?resize=300%2C181&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-01-1024x619-1.png?resize=768%2C464&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-01-1024x619-1.png?resize=1000%2C604&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>I renamed my project from <code>mars-theme<\/code> to <code>labre-theme<\/code> in my <code>package.json<\/code> file,.<\/figcaption><\/figure>\n\n\n\n<p>We should also update the name of the project folder while we\u2019re at it. We can do that on line 25. I changed mine from <code>.\/package\/mars-theme<\/code> to <code>.\/package\/labre-theme<\/code>. Now, the theme package is properly listed as a dependency and will be imported to the project.<\/p>\n\n\n\n<p>Our <code>frontity-settings.js<\/code> file needs to reflect the name change. So, let\u2019s open that up and:<\/p>\n\n\n\n<ul><li>rename the package name on line 13 (I changed mine from <code>@frontity\/mars-theme<\/code> to <code>@frontity\/labre-theme<\/code>), and<\/li><li>rename the name on line 3 (I changed mine from <code>mars-demo<\/code> to <code>labre-demo<\/code>).<\/li><\/ul>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ @frontity-settings.js\nconst settings = {\n  \"name\": \"labre-demo\",\n  \"state\": {\n    \"frontity\": {\n      \"url\": \"http:\/\/frontitytest.local\",\n      \"title\": \"Frontity Demo Blog\",\n      \"description\": \"Exploring Frontity as Headless WordPress\"\n    }\n  },\n  \"packages\": [\n    {\n      \"name\": \"@frontity\/labre-theme\",\n      \"state\": {\n        \"theme\": {\n          \"menu\": [\n            [\"Home\", \"\/\"],\n            [\"Block\", \"\/category\/block\/\"],\n            [\"Classic\", \"\/category\/classic\/\"],\n            [\"Alignments\", \"\/tag\/alignment-2\/\"],\n            [\"About\", \"\/about\/\"]\n          ],\n \/\/ ...<\/code><\/pre>\n\n\n\n<p>Next up, we want to re-initialize the project with these changes. We should delete the <code>node_modules<\/code> folder with <code>rm -rf node_modules<\/code> in a terminal and reinstall the npm package with <code>yarn install<\/code>. Once the npm package is reinstalled, everything gets properly linked internally and our Frontity project runs just fine without any errors.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-refactoring-navigation-with-dynamic-menu-fetching\">Refactoring navigation with dynamic menu fetching<\/h4>\n\n\n<p>As we discussed earlier, Frontity menu items are either hard-coded in the <code>frontity.setting.js<\/code> file or in <code>index.js<\/code> component that\u2019s stored in the Frontity <code>state<\/code>. However, WordPress can dynamically fetch the Frontity menu. In fact, Frontity just so happens to have a <a href=\"https:\/\/www.youtube.com\/watch?v=BMJn0RZ2I9s\" rel=\"noopener\">YouTube video on<\/a> <a href=\"https:\/\/www.youtube.com\/watch?v=BMJn0RZ2I9s\" rel=\"noopener\">the subject<\/a>. Let me break down the key steps here.<\/p>\n\n\n\n<p>The first step is to install the <a href=\"https:\/\/wordpress.org\/plugins\/wp-rest-api-v2-menus\/\" rel=\"noopener\">WP-REST-API V2 Menus<\/a> plugin in WordPress. The plugin is freely available in the WordPress Plugin Directory, which means you can find it and activate it directly from the WordPress admin.<\/p>\n\n\n\n<p>Why do we need this plugin? It extends the new routes to all the registered WordPress menus to the REST API (e.g. <code>\/menus\/v1\/menus\/&lt;slug&gt;<\/code>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"424\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_6CEC16FB9C7FB3F327D7A11C84388E7E7FF8907AE639F8798AA35590D157B1B8_1624410933563_frontity-menu.png?resize=1000%2C424&#038;ssl=1\" alt=\"\" class=\"wp-image-350088\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_6CEC16FB9C7FB3F327D7A11C84388E7E7FF8907AE639F8798AA35590D157B1B8_1624410933563_frontity-menu.png?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_6CEC16FB9C7FB3F327D7A11C84388E7E7FF8907AE639F8798AA35590D157B1B8_1624410933563_frontity-menu.png?resize=300%2C127&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_6CEC16FB9C7FB3F327D7A11C84388E7E7FF8907AE639F8798AA35590D157B1B8_1624410933563_frontity-menu.png?resize=768%2C326&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>If we check our project site at <code>\/wp-json\/menu\/v1\/menus<\/code>, it should display our selected menu items in the JSON. We can get the menu items with the menu item\u2019s <code>slug<\/code> property.<\/figcaption><\/figure>\n\n\n\n<p>Next, let\u2019s use the <code>menuHandler<\/code> function from the <a href=\"https:\/\/github.com\/frontity-demos\/frontity-examples\/blob\/master\/fetch-menu-from-wp\/packages\/mars-theme\/src\/components\/handlers\/menu-handler.js\" rel=\"noopener\">tutorial<\/a>. Create a new <code>menu-handler.js<\/code> file at <code>src\/components\/handler\/menu-handler.js<\/code> and paste in the following code:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/handler\/menu-handler.js\nconst menuHandler = {\n  name: \"menus\",\n  priority: 10,\n  pattern: \"\/menu\/:slug\",\n  func: async ({ link, params, state, libraries }) => {\n    console.log(\"PARAMS:\", params);\n    const { slug } = params;\n\n    \/\/ Fetch the menu data from the endpoint\n    const response = await libraries.source.api.get({\n      endpoint: `\/menus\/v1\/menus\/${slug}`,\n    });\n\n    \/\/ Parse the JSON to get the object\n    const menuData = await response.json();\n\n    \/\/ Add the menu items to source.data\n    const menu = state.source.data[link];\n    console.log(link);\n    Object.assign(menu, {\n      items: menuData.items,\n      isMenu: true,\n    });\n  },\n};\n\nexport default menuHandler;<\/code><\/pre>\n\n\n\n<p>This <code>menuHandler<\/code> function is only executed if the <code>pattern<\/code> value (i.e. <code>\/menu\/:slug<\/code>) matches. Now let\u2019s update our <code>\/src\/index.js<\/code> root component so it imports the handler:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/index.js\nimport Theme from \".\/components\";\nimport image from \"@frontity\/html2react\/processors\/image\";\nimport iframe from \"@frontity\/html2react\/processors\/iframe\";\nimport link from \"@frontity\/html2react\/processors\/link\";\nimport menuHandler from \".\/components\/handlers\/menu-handler\";\n\nconst labreTheme = {\n  \/\/ ...\n  state: {\n    theme: {\n      autoPrefetch: \"in-view\",\n      menu: [],\n      {\/* Add menuURL property with menu slug as its value *\/}\n      menuUrl: \"primary-menu\",\n      isMobileMenuOpen: false,\n      \/\/ ...\n    },\n  },\n\n  \/** Actions are functions that modify the state or deal with other parts of\n    * Frontity-like libraries *\/\n  actions: {\n    theme: {\n      toggleMobileMenu: ({ state }) => {\n        state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;\n      },\n      closeMobileMenu: ({ state }) => {\n        state.theme.isMobileMenuOpen = false;\n      },\n      {\/* Added before SSR action *\/}\n      beforeSSR: async ({ state, actions }) => {\n        await actions.source.fetch(`\/menu\/${state.theme.menuUrl}\/`);\n      },\n    },\n  },\n  libraries: {\n    \/\/ ...\n    {\/* Added menuHandler source *\/}\n    source: {\n      handlers: [menuHandler],\n    },\n  },\n};\n\nexport default labreTheme;<\/code><\/pre>\n\n\n\n<p>Add an array of handlers under the <code>source<\/code> property and fetch data before the <code>beforeSSR<\/code> function. It does not fetch but does match the <code>menu-handler<\/code> slug, which means <code>menuHandler()<\/code> is executed. That puts the menu items into state and they become available to manipulate.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Please note that we have added a new <code>menuUrl<\/code> property here (line 15 above) which can be used as a variable at our endpoint in handlers, as well as the <code>nav.js<\/code> component. Then, changing the value of <code>menuUrl<\/code> in the <code>index.js<\/code> root component, we could display another menu.<\/p>\n\n\n\n<p>Let\u2019s get this data into our theme through state and map with <code>menu-items<\/code> to display on the site.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/nav.js\nimport { connect, styled } from \"frontity\";\nimport Link from \".\/link\";\n\n\/** Navigation Component. It renders the navigation links *\/\nconst Nav = ({ state }) => {\n  {\/* Define menu-items constants here *\/}\n  const items = state.source.get(`\/menu\/${state.theme.menuUrl}\/`).items;\n\n  return (\n  &lt;NavContainer>\n    {items.map((item) => {\n       return (\n        &lt;NavItem key={item.ID}>\n           &lt;Link link={item.url}>{item.title}&lt;\/Link>\n         &lt;\/NavItem>\n      );\n    })}\n  &lt;\/NavContainer>\n  );\n};\n\nexport default connect(Nav);\n\nconst NavContainer = styled.nav`\n  list-style: none;\n  \/\/ ...<\/code><\/pre>\n\n\n\n<p>If we change our <code>menu<\/code> slug here and in <code>index.js<\/code>, then we get a different menu. To view dynamic menu items in mobile view, we should similarly <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/header\/menu-modal.js#L6\" target=\"_blank\" rel=\"noreferrer noopener\">update <code>menu-modal.js<\/code><\/a> components as well.<\/p>\n\n\n\n<p>Additionally, the tutorial describes how to fetch nested menus as well, which you can learn from the tutorial video, <a href=\"https:\/\/youtu.be\/BMJn0RZ2I9s?t=1088\" rel=\"noopener\">starting at about 18:09<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-modifying-the-file-structure\">Modifying the file structure<\/h4>\n\n\n<p>I decided to restructure my Labre (formerly known as Mars) theme folder. Here\u2019s how it looks after the changes:<\/p>\n\n\n\n<pre rel=\"Files\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">#! modified Frontity labre-theme structure\npackages\/labre-theme\/\n|__ src\/\n  |__ index.js\n  |__ components\/\n     |__image\/\n     |__assets\/\n     |__ list\/\n     |__ footer\/\n       |__footer.js\n       |__ widget.js\n     |__ header\/\n       |__ header.js\n       |__ menu-icon.js\n       |__ menu-model.js\n       |__ nav.js\n     |__ pages\/\n       |__ index.js\n       |__ page.js\n     |__ posts\/\n       |__ index.js\n       |__ post.js\n     |__ styles\/\n     \/\/ ...<\/code><\/pre>\n\n\n\n<p>As you can see, I added separate folders for pages, styles, headers, posts, and images. Please take a note that we have to update file paths in <code>index.js<\/code> and other related components anytime we change the way files and folders are organized. Otherwise, they\u2019ll be pointing to nothing!<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-a-custom-footer-component\">Adding a custom footer component<\/h4>\n\n\n<p>You may have noticed that the original Mars Theme folder structure includes neither a footer component, nor a separate page component. Let\u2019s make those components to demonstrate how our new folder structure works.<\/p>\n\n\n\n<p>We can start with the page component. The Mars Theme generates both pages and posts with the <code>posts.js<\/code> component by default \u2014 that\u2019s because pages and posts are essentially the same except that posts have meta data (e.g. authors, date, etc.) and they can get away with it. But we can separate them for our own needs by copying the code in <code>posts.js<\/code> and pasting it into a new <code>pages.js<\/code> file in our <code>\/pages<\/code> folder.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/pages\/page.js\nimport React, { useEffect } from \"react\";\nimport { connect, styled } from \"frontity\";\nimport List from \"..\/list\";\n\nconst Page = ({ state, actions, libraries }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n  \/\/ Get the data of the post.\n  const page = state.source[data.type][data.id];\n  \/\/  ...\n  \/\/ Load the page, but only if the data is ready.\n  return data.isReady ? (\n    &lt;Container>\n      &lt;div className=\"post-title\">\n        &lt;Title dangerouslySetInnerHTML={{ __html: page.title.rendered }} \/>\n      &lt;\/div>\n\n      {\/* Render the content using the Html2React component so the HTML is processed by the processors we included in the libraries.html2react.processors array. *\/}\n      &lt;Content>\n        &lt;Html2React html={page.content.rendered} \/>\n      &lt;\/Content>\n    &lt;\/Container>\n  ) : null;\n};\n\/\/ Connect the Page component to get access to the `state` in its `props`\nexport default connect(Page);\n\n\/\/ Copy styled components from post.js except, DateWrapper\nconst Container = styled.div`\n    width: 90vw;\n    width: clamp(16rem, 93vw, 58rem);\n    margin: 0;\n    padding: 24px;\n`\n\/\/ ..<\/code><\/pre>\n\n\n\n<p>All we did here was remove the meta data from <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/post.js\" rel=\"noopener\"><code>post.js<\/code><\/a> (lines <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/post.js#L31-L34\" target=\"_blank\" rel=\"noreferrer noopener\">31-34<\/a> and <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/post.js#L55-L76\" target=\"_blank\" rel=\"noreferrer noopener\">55-76<\/a>) and the corresponding <code>styled<\/code> components. Just as we did with the <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/mars-theme\/src\/components\/list\/index.js\" rel=\"noopener\">Mars Theme <code>\/list<\/code> folder<\/a>, we should export the <code>loadable<\/code> function in both the pages and posts folders to code split the <code>&lt;List \/&gt;<\/code> component. This way, the <code>&lt;List \/&gt;<\/code> component isn\u2019t displayed if a user is on a single post.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/pages\/index.js\nimport { loadable } from \"frontity\";\n\n\/** Codesplit the list component so it's not included\n*   if the users load a post directly. *\/\nexport default loadable(() => import(\".\/page\"));<\/code><\/pre>\n\n\n\n<p>Next, we should update path url of <code>\/src\/components\/index.js<\/code> component as shown below:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/index.js\nimport { Global, css, connect, styled, Head } from \"frontity\";\nimport Switch from \"@frontity\/components\/switch\";\nimport Header from \".\/header\/header\";\nimport List from \".\/list\";\nimport Page from \".\/pages\/page\";\nimport Post from \".\/posts\/post\";\nimport Loading from \".\/loading\";\nimport Title from \".\/title\";\nimport PageError from \".\/page-error\";\n\n\/** Theme is the root React component of our theme. The one we will export\n * in roots. *\/\nconst Theme = ({ state }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n\n  return (\n    &lt;>\n      \/\/ ...\n\n      {\/* Add some global styles for the whole site *\/}\n       &lt;Global styles={globalStyles} \/>\n      {\/* Add the header of the site. *\/}\n      &lt;HeadContainer>\n        &lt;Header \/>\n      &lt;\/HeadContainer>\n      {\/* Add the main section *\/}\n      &lt;Main>\n        &lt;Switch>\n          &lt;Loading when={data.isFetching} \/>\n          &lt;List when={data.isArchive} \/>\n          &lt;Page when={data.isPage} \/> {\/* Added Page component *\/}\n          &lt;Post when={data.isPostType} \/>\n          &lt;PageError when={data.isError} \/>\n        &lt;\/Switch>\n      &lt;\/Main>\n    &lt;\/>\n  );\n};\n\nexport default connect(Theme);\n\n\/\/ styled components<\/code><\/pre>\n\n\n\n<p>Now we\u2019re importing the <code>&lt;Page \/<\/code> component and have added our <code>&lt;Main \/&gt;<\/code> styled component.<\/p>\n\n\n\n<p>Let\u2019s move on to our custom footer component. You probably know what to do by now: create a new <code>footer.js<\/code> component file and drop it into the <code>\/src\/components\/footer\/<\/code> folder. We can add some widgets to our footer that display the sitemap and some sort of \u201cPowered by\u201d blurb:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"4,9\"><code markup=\"tt\">\/\/ src\/components\/footer\/footer.js\nimport React from \"react\";\nimport { connect, styled } from \"frontity\";\nimport Widget from \".\/widget\"\n\nconst Footer = () => {\n  return (\n  &lt;>\n    &lt;Widget \/>\n    &lt;footer>\n      &lt;SiteInfo>\n        Frontity LABRE Theme 2021 | {\" \"} Proudly Powered by {\"  \"}\n        &lt;FooterLinks href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress&lt;\/FooterLinks>\n        {\"  \"} and\n        &lt;FooterLinks href=\"https:\/\/frontity.org\/\" target=\"_blank\" rel=\"noopener\"> Frontity&lt;\/FooterLinks>\n      &lt;\/SiteInfo>\n    &lt;\/footer>\n    &lt;\/>\n  );\n};\n\nexport default connect(Footer);\n\/\/ ...<\/code><\/pre>\n\n\n\n<p>This is a super simple example. Please note that I have imported a <code>&lt;Widget \/&gt;<\/code> component (line 4, highlighted above) and called the component (line 9, highlighted above). We don\u2019t actually have a <code>&lt;Widget \/&gt;<\/code> component yet, so let\u2019s make that while we\u2019re at it. That can be a <code>widget.js<\/code> file in the same directory as the footer, <code>\/src\/components\/footer\/<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"784\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-02-1024x784-1.jpg?resize=1024%2C784&#038;ssl=1\" alt=\"Screen shot of VS code editor open to a widget.js file that shows the syntax highlighted markup for a component.\" class=\"wp-image-350103\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-02-1024x784-1.jpg?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-02-1024x784-1.jpg?resize=300%2C230&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-02-1024x784-1.jpg?resize=768%2C588&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/ct-front-3-02-1024x784-1.jpg?resize=1000%2C766&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>This&nbsp;<code>widget.js<\/code>&nbsp;component was inspired by&nbsp;<a target=\"_blank\" href=\"https:\/\/aamodtgroup.com\/\" rel=\"noreferrer noopener\">Aamodt Group<\/a>&#8216;s&nbsp;<a target=\"_blank\" href=\"https:\/\/github.com\/aamodtgroup\/aamodtgroup\/blob\/main\/packages\/agtech\/src\/components\/footer\/footer.js\" rel=\"noreferrer noopener\">footer component<\/a>,&nbsp;available&nbsp;in a&nbsp;<a target=\"_blank\" href=\"https:\/\/github.com\/aamodtgroup\/aamodtgroup\" rel=\"noreferrer noopener\">GitHub repository<\/a>.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2600\" height=\"684\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=2600%2C684&#038;ssl=1\" alt=\"Four columns of links, each with a heading. The text is dark against a light gray background.\" class=\"wp-image-350104\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?w=2600&amp;ssl=1 2600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=300%2C79&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=1024%2C269&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=768%2C202&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=1536%2C404&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=2048%2C539&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580476100_ct-front-footer-widget.png?resize=1000%2C263&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The widget is hard-coded but works.<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-customizing-the-theme-header\">Customizing the theme header<\/h4>\n\n\n<p>The default <code>header.js<\/code> component in Mars Theme is very basic with a site title and site description and navigation items underneath. I wanted to refactor the header component with a site logo and title on the left and the <code>nav.js<\/code> component (top navigation) on the right.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"6,14\"><code markup=\"tt\">\/\/ src\/components\/header.js\nimport { connect, styled } from \"frontity\";\nimport Link from \".\/link\";\nimport Nav from \".\/nav\";\nimport MobileMenu from \".\/menu\";\nimport logo from \".\/images\/frontity.png\"\n\nconst Header = ({ state }) => {\n  return (\n    &lt;>\n      &lt;Container>\n        &lt;StyledLink link=\"\/\">\n         {\/* Add header logo*\/}\n          &lt;Logo src={logo} \/>\n          &lt;Title>{state.frontity.title}&lt;\/Title>\n        &lt;\/StyledLink>\n          {\/*&lt;Description>{state.frontity.description}&lt;\/Description> *\/}\n          &lt;Nav \/>\n      &lt;\/Container>\n        &lt;MobileMenu \/>\n    &lt;\/>\n  );\n};\n\/\/ Connect the Header component to get access to the `state` in its `props`\nexport default connect(Header);\n\nconst Container = styled.div`\n  width: 1000px;\n  \/\/ ...\n  `}\n{\/* Logo styled component *\/}\nconst Logo = styled.img`\n  max-width: 30px;\n  display: inline-block;\n  border-radius: 15px;\n  margin-right: 15px;\n`;\n\n\/\/ ...<\/code><\/pre>\n\n\n\n<p>My refactored <code>header.js<\/code> component imports a logo image (line 6, highlighted above) and uses in line 14. The <code>nav.js<\/code> component shown below is basically the same, only with some minor styling modifications.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2424\" height=\"270\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=2424%2C270&#038;ssl=1\" alt=\"Screenshot showing refactored site header with site logo and site title (left) and top navigation (right)\" class=\"wp-image-350106\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?w=2424&amp;ssl=1 2424w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=300%2C33&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=1024%2C114&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=768%2C86&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=1536%2C171&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=2048%2C228&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620580762853_ct-front-header.png?resize=1000%2C111&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-the-global-style-component\">Adding the <code>&lt;Global&gt;<\/code> style component<\/h4>\n\n\n<p>We have already covered the <code>&lt;Global&gt;<\/code> component and how it\u2019s used for site-wide CSS. There are only a few global styles in the default Mars Theme root component, and I wanted to add more.<\/p>\n\n\n\n<p>I did that with a separate <code>globalStyles<\/code> file at <code>\/src\/components\/styles\/globalStyles.js<\/code> \u2014 similar to <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/twentytwenty-theme\/src\/components\/styles\/global-styles.js\" rel=\"noopener\">Frontity\u2019s Twenty Twenty theme<\/a> \u2014 and added root variables, a CSS reset, and common site-wide element styles, <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/styles\/globalStyles.js\" rel=\"noopener\">found in the GitHub repo<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implementing-fluid-typography\">Implementing fluid typography<\/h4>\n\n\n<p>Even though it\u2019s not really in scope, I really wanted to use fluid typography in my custom theme as part of my overall learning journey. So, I added it to the global styles.<\/p>\n\n\n\n<p>CSS-Tricks has extensively covered <a href=\"https:\/\/css-tricks.com\/tag\/fluid-type\/\">fluid typography<\/a> and <a href=\"https:\/\/css-tricks.com\/linearly-scale-font-size-with-css-clamp-based-on-the-viewport\/\">how the<\/a> <a href=\"https:\/\/css-tricks.com\/linearly-scale-font-size-with-css-clamp-based-on-the-viewport\/\"><code>clamp()<\/code> function is used to set target font sizes<\/a>. Following those CSS-Tricks posts and <a href=\"https:\/\/piccalil.li\/quick-tip\/use-css-clamp-to-create-a-more-flexible-wrapper-utility\/\" rel=\"noopener\">this Picalilli one<\/a> as my guide, I defined two custom properties with clamped font size ranges on the <code>:root<\/code> element in the <code>globalStyles.js<\/code> component.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/styles\/globalStyles.js\n:root {\n  --wide-container: clamp(16rem, 90vw, 70rem);\n  --normal-container: clamp(16rem, 90vw, 58rem);\n}<\/code><\/pre>\n\n\n\n<p>The <code>wide-container<\/code> wrapper is used for header and footer components whereas the <code>normal-container<\/code> will be used for displaying posts and pages.<\/p>\n\n\n\n<p>I also clamped the headings under <code>elementBase<\/code> in the <code>globalStyles.js<\/code> component <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/styles\/globalStyles.js#L145-L187\" target=\"_blank\" rel=\"noreferrer noopener\">as shown in this GitHub repo<\/a>.<\/p>\n\n\n\n<p>It was a fun working with the <code>clamp()<\/code> function because it meant I could set a range of sizes without any media queries at all!<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-webfonts-to-the-theme\">Adding webfonts to the theme<\/h4>\n\n\n<p>I also wanted to use a different webfont in my theme. Importing webfonts in CSS using <code>@font-face<\/code> is covered <a href=\"https:\/\/css-tricks.com\/tag\/font-face\/\">here on CSS-Tricks<\/a>. Frontity\u2019s Twenty Twenty Theme uses it, so that\u2019s a good place to reference as well.<\/p>\n\n\n\n<p>I wanted three Google fonts:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\/source-sans-pro?subsets=latin\" rel=\"noopener\">Source Sans Pro<\/a> for the header<\/li><li><a href=\"https:\/\/fonts.google.com\/specimen\/PT+Serif?query=PT+Serif\" rel=\"noopener\">PT Serif<\/a> for the body<\/li><li><a href=\"https:\/\/fonts.google.com\/specimen\/PT+Sans+Narrow?query=PT+Sans+Narrow\" rel=\"noopener\">PT Sans Narrow<\/a> for meta data<\/li><\/ul>\n\n\n\n<p>We can use the fonts with either with a <code>&lt;link&gt;<\/code>in the HTML head or with <code>@import<\/code> in CSS. But <a href=\"https:\/\/css-tricks.com\/dont-just-copy-the-font-face-out-of-google-fonts-urls\/\">Chris covered<\/a> how to use <code>@font-face<\/code> with Google Fonts, which allows us to optimize the number of HTTP requests we make since we can download the fonts to our own server.<\/p>\n\n\n\n<p>I use the <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" rel=\"noopener\">Google webfonts helper<\/a> to host the downloaded font files. Here\u2019s what I got:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* source: google webfonts helper *\/\n\/* source-sans-pro-regular - latin *\/\n@font-face {\n  font-family: 'Source Sans Pro';\n  font-style: normal;\n  font-weight: 400;\n  src: url('..\/fonts\/source-sans-pro-v14-latin-regular.eot'); \/* IE9 Compat Modes *\/\n  src: local(''),\n    url('..\/fonts\/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\n    url('..\/fonts\/source-sans-pro-v14-latin-regular.woff2') format('woff2'), \/* Super Modern Browsers *\/\n    url('..\/fonts\/source-sans-pro-v14-latin-regular.woff') format('woff'), \/* Modern Browsers *\/\n    url('..\/fonts\/source-sans-pro-v14-latin-regular.ttf') format('truetype'), \/* Safari, Android, iOS *\/\n    url('..\/fonts\/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); \/* Legacy iOS *\/\n}<\/code><\/pre>\n\n\n\n<p>Looking at the Twenty Twenty Theme as a reference for <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/twentytwenty-theme\/src\/components\/styles\/font-faces.js\" rel=\"noopener\">how it\u2019s done there<\/a>, I created a <code>font-face.js<\/code> file and dropped it into the <code>\/src\/components\/styles<\/code> folder <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/styles\/font-face.js\" target=\"_blank\" rel=\"noreferrer noopener\">as shown in this GitHub repository<\/a>.<\/p>\n\n\n\n<p>Those fonts point to a <code>\/fonts<\/code> folder that doesn\u2019t exist. So, let\u2019s make one there and make sure all of the correct font files are in it so the fonts load properly.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-importing-globalstyles-and-face-font-components-to-the-root-theme-component\">Importing <code>globalStyles<\/code> and <code>@face-font<\/code> components to the root <code>&lt;Theme \/&gt;<\/code> component<\/h4>\n\n\n<p>Let\u2019s open our theme root component, <code>\/src\/components.index.js<\/code>, and add our <code>globalStyles.js<\/code> and <code>font-face.js<\/code> components in there. As shown below, we should import both components into <code>index.js<\/code> and call the components later.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"4,5,19,20\"><code markup=\"tt\">\/\/ src\/components\/index.js\n\n\/\/ ...\nimport FontFace from \".\/styles\/font-face\";\nimport globalStyles from \".\/styles\/globalStyles\";\n\n\/** Theme is the root React component of our theme. The one we will export\n * in roots. *\/\nconst Theme = ({ state }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n\n  return (\n    &lt;>\n    \/\/ ...\n\n    {\/* Add some global styles for the whole site, like body or a's.\n     *  Not classes here because we use CSS-in-JS. Only global HTML tags. *\/}\n      &lt;Global styles={globalStyles} \/>\n      &lt;FontFace \/>\n      {\/* Add the header of the site. *\/}\n      \/\/ ...\n\nexport default connect(Theme);\n\n {\/* delete original globalStyles css component *\/}\n\n \/\/ ...<\/code><\/pre>\n\n\n\n<p>Finally, we should remove mars-theme <code>globalStyles<\/code> component from <code>index.js<\/code>. Now our new fonts are applied throughout our project.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-styling-pages-and-posts\">Styling pages and posts<\/h4>\n\n\n<p>Our posts and pages are pretty much styled already, except for some Gutenberg block contents, like buttons, quotes, etc.<\/p>\n\n\n\n<p>To style our post entry meta data, let\u2019s add icons for the author, date, categories, and tags. <a href=\"https:\/\/twentynineteen.frontity.org\/\" rel=\"noopener\">Frontity\u2019s port of the WordPress Twenty Nineteen theme<\/a> uses SVG icons and components for <code>author.js<\/code>, <code>categories.js<\/code>, <code>posted-on.js<\/code> and <code>tags.js<\/code> components, which we can totally copy and use in our own project. I literally copied the top-level <code>entry-meta<\/code> folder and everything in it from the <a href=\"https:\/\/github.com\/imranhsayed\/frontity-twentynineteen\/tree\/master\/packages\/twentynineteen-theme\/src\/components\/entry-meta\" target=\"_blank\" rel=\"noreferrer noopener\">frontity-twentynineteen<\/a> theme and added it all to the <code>\/components\/posts\/<\/code> project folder.<\/p>\n\n\n\n<p>Next we should update our <code>src\/components\/list\/list-item.js<\/code> component so we can use the new assets:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/list\/list-item.js\n\nimport { connect, styled } from \"frontity\";\nimport Link from \"..\/link\";\nimport FeaturedMedia from \"..\/featured-media\";\n\n\/\/ import entry-meta\nimport Author from \"..\/entry-meta\/author\";\nimport PostedOn from \"..\/entry-meta\/posted-on\";\n\nconst Item = ({ state, item }) => {\n\n  return (\n    &lt;article>\n      &lt;div>\n        {\/* If the post has an author, we render a clickable author text. *\/}\n        &lt;EntryMeta>\n          &lt;Author authorId={item.author} \/> {\"|  \"}\n          &lt;PostedOn post={item} \/>\n        &lt;\/EntryMeta>\n      &lt;\/div>\n\n      &lt;Link link={item.link}>\n        &lt;Title dangerouslySetInnerHTML={{ __html: item.title.rendered }} \/>\n      &lt;\/Link>\n      \/\/ ...\n    &lt;\/article>\n  );\n};\n\n\/\/ Connect the Item to gain access to `state` as a prop\nexport default connect(Item);<\/code><\/pre>\n\n\n\n<p>The styled component for the <code>&lt;EntryMeta \/&gt;<\/code> component can be something like as <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/list\/list-item.js#L50-L63\" target=\"_blank\" rel=\"noreferrer noopener\">shown in the GitHub repository<\/a>.<\/p>\n\n\n\n<p>With these styles in place, our archive page entry meta looks good with icons displayed before entry-meta taxonomy (authors, posted-on).<\/p>\n\n\n\n<p>Here we will modify archives taxonomy page styling with more descriptive header. Let\u2019s update <code>list.js<\/code> component of our <code>\/src\/components\/list\/list.js<\/code> as shown below.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/list\/list.js\n\nimport React from \"react\";\nimport { connect, styled, decode } from \"frontity\";\nimport Item from \".\/list-item\";\nimport Pagination from \".\/pagination\";\n\nconst List = ({ state }) => {\n  \/\/ Get the data of the current list.\n  const data = state.source.get(state.router.link);\n\n  return (\n    &lt;Container className=\"entry-content\">\n      {\/* If the list is a taxonomy, we render a title. *\/}\n      {data.isAuthor ? (\n        &lt;Header>\n          Author Archives:{\" \"}\n          &lt;PageDescription>\n          {decode(state.source.author[data.id].name)}\n          &lt;\/PageDescription>\n        &lt;\/Header>\n        ) : null}\n\n        {\/* If the list is a taxonomy or category, we render a title. *\/}\n        {data.isTaxonomy || data.isCategory ? (\n          &lt;Header>\n            {data.taxonomy.charAt(0).toUpperCase() + data.taxonomy.slice(1)}{\" \"}\n            Archives:{\" \"}\n            &lt;PageDescription>\n            {decode(state.source[data.taxonomy][data.id].name)}\n            &lt;\/PageDescription>\n          &lt;\/Header>\n        ) : null}\n      \/\/ ...\n\n      &lt;Pagination \/>\n    &lt;\/Container>\n  );\n};\nexport default connect(List);\n\nconst PageDescription = styled.span`\n  font-weight: bold;\n  font-family: var(--body-family);\n    color: var(--color-text);\n`;\n\/\/ ...<\/code><\/pre>\n\n\n\n<p>In the example above, we wrapped <code>taxonomy.id data<\/code> with <code>PageDesctiption styled<\/code> component applied some styling rules.<\/p>\n\n\n\n<p>The post pagination in the default Mars Theme is very basic with almost no styling. Let\u2019s borrow from the Frontity Twenty Nineteen theme again and add the pagination component and styling from the theme by copying the <a href=\"https:\/\/github.com\/imranhsayed\/frontity-twentynineteen\/blob\/master\/packages\/twentynineteen-theme\/src\/components\/list\/pagination.js\" rel=\"noopener\"><code>pagination.js<\/code><\/a> component file in its entirety, and paste it to <code>\/src\/components\/list\/pagination.js<\/code> in our theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"480\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?resize=1200%2C480&#038;ssl=1\" alt=\"Showing two example posts in a post list, one with comments enabled, and the other with comments disabled. The post content is black against a light gray background.\" class=\"wp-image-350113\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?resize=1024%2C410&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?resize=768%2C307&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620687110276_ct-front-pagin.png?resize=1000%2C400&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>I added&nbsp;<a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/blob\/main\/packages\/labre-theme\/src\/components\/list\/pagination.js#L147-L202\" target=\"_blank\" rel=\"noreferrer noopener\">some minor CSS<\/a>&nbsp;and it&nbsp;works&nbsp;perfectly in our project.<\/figcaption><\/figure>\n\n\n\n<p>To customize the actual individual posts and pages, let\u2019s make bold header title that\u2019s centered and displays the entry meta:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/posts\/post.js\n\n\/\/ ...\n\/\/ Import entry-meta\nimport Author from \"..\/entry-meta\/author\";\nimport PostedOn from \"..\/entry-meta\/posted-on\";\nimport Categories from \"..\/entry-meta\/categories\";\nimport Tags from \"..\/entry-meta\/tags\";\n\nconst Post = ({ state, actions, libraries }) => {\n  \/\/ ...\n  \/\/ Load the post, but only if the data is ready.\n  return data.isReady ? (\n    &lt;Container className=\"main\">\n      &lt;div>\n        &lt;Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/>\n\n        {\/* Hide author and date on pages *\/}\n        {data.isPost &amp;&amp; (\n          &lt;EntryMeta>\n          &lt;Author authorId={post.author} \/>\n          &lt;PostedOn post={post} \/>\n        &lt;\/EntryMeta>\n        )}\n      &lt;\/div>\n\n      {\/* Look at the settings to see if we should include the featured image *\/}\n      {state.theme.featured.showOnPost &amp;&amp; (\n        &lt;FeaturedMedia id={post.featured_media} \/>\n      )}\n\n      {data.isAttachment ? (\n        &lt;div dangerouslySetInnerHTML={{ __html: post.description.rendered }} \/>\n      ) : (\n        &lt;Content>\n          &lt;Html2React html={post.content.rendered} \/>\n          {\/* Add footer meta-entry *\/}\n          &lt;EntryFooter>\n            &lt;Categories cats={post.categories} \/>\n            &lt;Tags tags={post.tags} \/>\n          &lt;\/EntryFooter>\n        &lt;\/Content>\n      )}\n    &lt;\/Container>\n  ) : null;\n};\n\nexport default connect(Post);\n\/\/ ...<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"453\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?resize=1200%2C453&#038;ssl=1\" alt=\"Screenshot showing header meta-entry (top) and footer meta-entry (bottom). Header has a large bold title above meta containing the author name and post date, all centered. There is a thick line between the header and content. The content is a simple paragraph containing lorem ipsum text. Dark content against a light gray background.\" class=\"wp-image-350117\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?resize=1024%2C387&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?resize=768%2C290&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620683301803_ct-front-single-post.png?resize=1000%2C378&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-gutenberg-block-styles\">Adding Gutenberg block styles<\/h4>\n\n\n<p>WordPress uses a separate stylesheet for blocks in the Block Editor. Right now, that stylesheet isn\u2019t being used but it would be great if we could get some base styles in there that we use for the various block content we add to pages and posts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"446\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?resize=1200%2C446&#038;ssl=1\" alt=\"A post with DevTools open and highlighting the markup for the button component.\" class=\"wp-image-350119\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?resize=300%2C112&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?resize=1024%2C381&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?resize=768%2C285&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620509687186_ct-front-3-002.png?resize=1000%2C372&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>That&nbsp;<code>.wp-block-buttons<\/code>&nbsp;class is declared in the WordPress blocks stylesheet that we aren\u2019t using\u2026 yet.<\/figcaption><\/figure>\n\n\n\n<p>The WordPress Block Editor uses two styling files: <code>style.css<\/code> and <code>theme.css<\/code>. Let\u2019s copy these directly from Frontity\u2019s port of the Twenty Twenty theme because that\u2019s how they implemented the WordPress styles. We can place those inside a <code><a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\/tree\/main\/packages\/labre-theme\/src\/components\/styles\/gutenberg\" target=\"_blank\" rel=\"noreferrer noopener\">\/styles\/gutenberg\/<\/a><\/code> folder.<\/p>\n\n\n\n<p class=\"is-style-explanation\">\u201cGutenberg\u201d is the codename that was given to the WordPress Block Editor when it was in development. It\u2019s sometimes still referred to that way.<\/p>\n\n\n\n<p>Let\u2019s add the above two style files to our theme root component, <code>\/src\/components\/index.js<\/code>, just like we did earlier for <code>globalStyles<\/code>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/  src\/components\/index.js\nimport gutenbergStyle from \".\/styles\/gutenberg\/style.css\";\nimport gutenbergTheme from \".\/styles\/gutenberg\/theme.css\"<\/code><\/pre>\n\n\n\n<p>Here\u2019s our updated <code>&lt;Theme \/&gt;<\/code> root component:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ src\/components\/index.js\n\n\/\/ ...\nimport FontFace from \".\/styles\/font-face\";\nimport globalStyles from \".\/styles\/globalStyles\";\n\/\/ Add Gutenberg styles\nimport gutenbergStyle from \".\/styles\/gutenberg\/style.css\";\nimport gutenbergTheme from \".\/styles\/gutenberg\/theme.css\"\n\n\/** Theme is the root React component of our theme. The one we will export\n  * in roots. *\/\nconst Theme = ({ state }) => {\n  \/\/ Get information about the current URL.\n  const data = state.source.get(state.router.link);\n\n  return (\n    &lt;>\n    \/\/ ...\n    {\/* Add some global styles for the whole site, like body or a's.\n      * Not classes here because we use CSS-in-JS. Only global HTML tags. *\/}\n      &lt;Global styles={globalStyles} \/>\n      &lt;Global styles={css(gutenbergStyle)} \/>\n      &lt;Global styles={css(gutenbergTheme)} \/>\n      &lt;FontFace \/>\n      {\/* Add the header of the site. *\/}\n      \/\/ ...\nexport default connect(Theme);\n\n {\/* Delete original globalStyles css component *\/}\n \/\/ ...<\/code><\/pre>\n\n\n\n<p>We could go about overriding styles many different ways. I went with a simple route. For example, to overriding button styles \u2014 <code>.wp-block-buttons<\/code> \u2014 in the styled-component for pages and posts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"481\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?resize=1500%2C481&#038;ssl=1\" alt=\"Screenshot showing button style customization (left panel) and styled button in blue (right)\" class=\"wp-image-350124\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?w=1500&amp;ssl=1 1500w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?resize=300%2C96&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?resize=1024%2C328&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?resize=768%2C246&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620510001490_ct-front-3-004.png?resize=1000%2C321&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We can write override any other block styles the same way. In Frontity\u2019s Twenty Nineteen theme, the entire stylesheet from the WordPress version of the theme is <a href=\"https:\/\/github.com\/imranhsayed\/frontity-twentynineteen\/blob\/master\/packages\/twentynineteen-theme\/src\/style.css\" rel=\"noopener\">added to<\/a> <a href=\"https:\/\/github.com\/imranhsayed\/frontity-twentynineteen\/blob\/master\/packages\/twentynineteen-theme\/src\/style.css\" rel=\"noopener\">the Frontity version<\/a> to replicate the exact same appearance. Frontity\u2019s Twenty Twenty port uses only a select few of the styles in the WordPress Twenty Twenty themes, <a href=\"https:\/\/github.com\/frontity\/frontity\/blob\/dev\/packages\/twentytwenty-theme\/src\/components\/post\/post.js\" rel=\"noopener\">but as inline styles<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-additional-styling-resources\">Additional styling resources<\/h4>\n\n\n<p>All the resources we covered in this section on styling are <a href=\"https:\/\/github.com\/tinjure20\/frontity-csstricks-demo\" rel=\"noopener\">available in the GitHub repository<\/a>. If you wish to expand my <code>@frontity\/labre-theme<\/code> project further, here are the resources that I gathered.<\/p>\n\n\n\n<ul><li><strong>Dark Mode:<\/strong> There are two examples in the Frontity showcase library, <a href=\"https:\/\/github.com\/goiblas\/personal-blog\/blob\/master\/packages\/goiblas-blog\/src\/index.js#L19-L33\" rel=\"noopener\">goiblas\/personal-blog<\/a> and <a href=\"https:\/\/github.com\/aamodtgroup\/aamodtgroup\" rel=\"noopener\">aamodtgroup<\/a> that are great references for dark mode functionality. There is also a <a href=\"https:\/\/frontity.org\/blog\/building-a-blog-using-frontity-and-wordpress\/#implement-dark-mode\" rel=\"noopener\">tutorial on how to implement dark mode<\/a> in the Frontity project.<\/li><li><strong>Contact Form 7<\/strong>: This handy little WordPress plugin can be integrated. <a href=\"https:\/\/blog.yudiz.com\/how-to-integrate-contact-form-7-in-frontity\/\" rel=\"noopener\">Here\u2019s a tutorial from the Frontity community<\/a> that describes how to do it.<\/li><li><strong>Comments:<\/strong> The native WordPress functionality for comments are described in <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/wp-comments\" rel=\"noopener\">this guide<\/a>.<\/li><li><strong>Infinity Scroll Hooks:<\/strong> This <a href=\"https:\/\/github.com\/frontity-demos\/frontity-examples\/tree\/master\/infinite-scroll-hooks\" rel=\"noopener\">Frontity demo project<\/a> demonstrates how to use the Infinite Scroll Hooks available in the <code>@frontity\/hooks<\/code> package. Here is a <a href=\"https:\/\/www.youtube.com\/watch?v=30E3lG3-onU\" rel=\"noopener\">YouTube video<\/a> that covers it.<\/li><li><strong>Yoast SEO:<\/strong> This is a super popular WordPress plugin and I\u2019m sure many of you would want to use it in Frontity as well. Follow <a href=\"https:\/\/api.frontity.org\/frontity-packages\/features-packages\/yoast\" rel=\"noopener\">this <code>@frontity\/package<\/code> documentation<\/a> which automatically gets and renders all of the tags exposed in the REST API by the plugin.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-6-resources-and-credit\">Section 6: Resources and credit<\/h3>\n\n\n<p>There are ample resources to learn and customize your Frontity project. While preparing this post, I have referred to the following resources extensively. Please refer to original posts for more detailed information.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-frontity-documentation-and-articles\">Frontity documentation and articles<\/h4>\n\n\n<ul><li><a href=\"https:\/\/tutorial.frontity.org\/\" rel=\"noopener\">Step-by-step tutorial<\/a> (Frontity): This is the perfect place to start if you\u2019re new to Frontity, or even if you\u2019ve previously used Frontity and want to level up.<\/li><li><a href=\"https:\/\/docs.frontity.org\/\" rel=\"noopener\">Conceptial guides<\/a> (Frontity): These guides helps solve some of the common challenges that come up when working with dynamic server-side rendering in React apps connected to WordPress.<\/li><li><a href=\"https:\/\/api.frontity.org\/\" rel=\"noopener\">Frontity API reference<\/a> (Frontity). This contains detailed information about Frontity CLI, packages, plugins and themes. Once you\u2019ve mastered the basics of working with Frontity, this is where you\u2019re likely to spend most of your time when working on projects.\u201d<\/li><li><a href=\"https:\/\/github.com\/frontity-demos\/frontity-examples\" rel=\"noopener\">Frontity example repo<\/a> (Frontity): This is a collection of Frontity projects that demonstrate how Frontity is used in the wild.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-other-articles-and-tutorials\">Other articles and tutorials<\/h4>\n\n\n<ul><li><a href=\"https:\/\/frontity.org\/blog\/building-a-blog-using-frontity-and-wordpress\/\" rel=\"noopener\">Building a blog using Frontity and WordPress<\/a> (Jes\u00fas Olazagoitia)<\/li><li><a href=\"https:\/\/frontity.org\/blog\/how-to-create-a-react-theme-in-30-minutes\/\" rel=\"noopener\">How to Create a React WordPress Theme in 30 Minutes<\/a> (Reyes Martinez)<\/li><li><a href=\"https:\/\/blog.logrocket.com\/getting-started-with-frontity\/\" rel=\"noopener\">Getting started with Frontity<\/a> (Dylan Tientcheu)<\/li><li><a href=\"https:\/\/frontity.org\/blog\/connecting-gutenberg-and-frontity\/\" rel=\"noopener\">Connecting Gutenberg and Frontity<\/a> (Mario Santos, Frontity product manager) This post is based on Mario\u2019s talk at the 2020 JavaScript for WordPress Conference and has an accompanying video.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-frontity-case-studies\">Frontity case studies<\/h4>\n\n\n<ul><li><a href=\"https:\/\/frontity.org\/blog\/diariomotor-case-study\/\" rel=\"noopener\">Moving to Frontity: Diariomotor Case Study<\/a> (Reyes Martinez): Learn how Frontity helped drive the evolution of Diariomotor, reducing development time and putting them on the path to better performance.<\/li><li><a href=\"https:\/\/frontity.org\/blog\/case-study-migrating-aleteia-to-frontity\/\" rel=\"noopener\">Migrating Aleteia to Frontity<\/a> (Reyes Martinez). Aleteia is the leading website for Catholic news. Frontity allowed them to move to a modern front-end stack in just a couple of months.<\/li><li><a href=\"https:\/\/frontity.org\/blog\/introducing-awsm-f1-theme-for-frontity\/\" rel=\"noopener\">Introducing AWSM F1 Theme for Frontity<\/a> (Venuraj Varma). Awsm Innovations rebuilt their website with Frontity to boost web performance and deliver a great user experience.<\/li><li><a href=\"https:\/\/frontity.org\/blog\/case-study-gudog\/\" rel=\"noopener\">Case Study: Growing Gudog\u2019s blog by 88% with Frontity<\/a> (Reyes Martinez): Frontity helped Gudog increased their organic traffic by 88% and significantly improved their SEO results.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-frontity-talks-and-videos\">Frontity talks and videos<\/h4>\n\n\n<ul><li><a href=\"https:\/\/frontity.org\/blog\/fetching-menus-from-wordpress\/\" rel=\"noopener\">How to Fetch the WordPress Menus in Frontity<\/a> (Michael Burridge). In this video, Michael explains how to dynamically fetch WordPress menu-items using the WordPress WP-REST-API V2 Menus plugin.<\/li><li><a href=\"https:\/\/www.youtube.com\/watch?v=whsYQ9fb64k\" rel=\"noopener\">How To Use Frontity To Create A Headless WordPress Theme With React<\/a> (YouTube)<\/li><li><a href=\"https:\/\/frontity.org\/blog\/learn-frontity-with-our-new-step-by-step-tutorial\/\" rel=\"noopener\">Tutorial-hello-frontity tutorial Workshop<\/a>. This is a learning project included in the step-by-step tutorial available at <a href=\"https:\/\/tutorial.frontity.org\" rel=\"noopener\">tutorial.frontity.org<\/a>.<\/li><li><a href=\"https:\/\/youtu.be\/5EIqBfD_LTY\" rel=\"noopener\">Connecting Gutenberg and Frontity: A Case Study<\/a> (Mario Santos). In this talk video, Frontity product manager Mario explains how the official <a href=\"https:\/\/github.com\/frontity\/frontity.org\" rel=\"noopener\">Frontity website<\/a> was rebuilt with both the WordPress Block Editor and Frontity, while highlighting all the challenges and lessons learned along the way.<\/li><li><a href=\"https:\/\/www.youtube.com\/channel\/UCh6s-Cs5MgnVtvsCxrIGJDw\" rel=\"noopener\">Frontity YouTube channel<\/a><\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-frontity-community\">Frontity community<\/h4>\n\n\n<p>Frontity has a vibrant and engaging <a href=\"https:\/\/community.frontity.org\/\" rel=\"noopener\">community forum<\/a> for asking questions or getting help regarding your Frontity project.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wrapping-up-and-personal-thoughts\">Wrapping up and personal thoughts<\/h3>\n\n\n<p>If you can\u2019t already tell from this post or the others I\u2019ve written, I have a huge passion for headless WordPress sites. As I wrote in a <a href=\"https:\/\/css-tricks.com\/creating-headless-wordpress-site-with-frontity\/\">previous article<\/a>, I came across Frontity through <a href=\"https:\/\/css-tricks.com\/frontity-is-react-for-wordpress\/\">when Chris posted this article<\/a>. I have been experimenting with it for over six months, choosing to take a deep drive into Frontity and the building blocks used in its default Mars Theme. I must admit that it&#8217;s a fascinating software framework and I\u2019ve had an enjoyable learning experience. I may even use this sort of setup for my own personal site!<\/p>\n\n\n\n<p>Here are a few key takeaways from my experience working with Frontity so far:<\/p>\n\n\n\n<ul><li><strong>It\u2019s beginner-friendly and low maintenance:<\/strong> One of the things that impressed me most with Frontity is how relatively easy it is to jump into, even as a beginner. It installs with a couple of commands and takes care of all the setup and configuration for connecting to WordPress via the REST API\u2014something I would have struggled with if left to my own devices.<\/li><li><strong>It works with experimental block themes<\/strong>. In my very limited testing, Frontity&#8217;s framework works as expected with experimental block themes, just as it does with classic WordPress themes, like Twenty Twenty. I tested with the <a href=\"https:\/\/wordpress.org\/themes\/quadrat\/\" rel=\"noopener\">Quadrat theme<\/a> that supports the experimental stuff the Gutenberg team is working on.<\/li><li><strong>Hosting is good, but maybe too expensive<\/strong>: As Chris <a href=\"https:\/\/css-tricks.com\/frontity-is-react-for-wordpress\/\">wrote<\/a>, Frontity is \u201ca perfect match for <a href=\"https:\/\/vercel.com\/\" rel=\"noopener\">Vercel<\/a>.\u201d However, the current <a href=\"https:\/\/css-tricks.com\/wordpress-and-jamstack\/#pricing\">Jamstack pricing<\/a> model that includes Vercel is <a href=\"https:\/\/zellwk.com\/blog\/netlify-vercel-digital-ocean\/\" rel=\"noopener\">unattractive<\/a> for many ordinary WordPress users.<\/li><li><strong>Frontity\u2019s documentation is good, but could be better:<\/strong> The Frontity team recently reorganized Frontity documentation into <a href=\"https:\/\/tutorial.frontity.org\/\" rel=\"noopener\">tutorials<\/a>, <a href=\"https:\/\/docs.frontity.org\/\" rel=\"noopener\">guides<\/a> and an <a href=\"https:\/\/api.frontity.org\/\" rel=\"noopener\">API reference<\/a>. However, in my opinion it\u2019s still confusing for those just getting into the framework.<\/li><\/ul>\n\n\n\n<p>Because I enjoyed this project so much, I am currently doing a theme project from scratch. Even in WordPress, I learned best by getting my hands dirty building WordPress themes from scratch.<\/p>\n\n\n\n<p>While I am still doing my Gatsby and Frontity side projects, I have not lost my sight from the ongoing <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\" rel=\"noopener\">WordPress block editor<\/a> and <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/\" rel=\"noopener\">block-based theme<\/a> development. At the time of writing, there are already <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" rel=\"noopener\">sixteen block-based themes<\/a> in the WordPress theme directory. I have just started exploring and understanding <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\" rel=\"noopener\">experimental block themes<\/a>, which might be another interesting learning project.<\/p>\n\n\n\n<p>After this project, my thoughts about Gatsby, Frontity and the concept of headless sites are still evolving. That\u2019s only because it\u2019s tough to make a fair comparison of when a lot of the tooling is actively in development and changing all the time. There are even <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\" rel=\"noopener\">experimental themes<\/a>, that are much lighter and <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/create-block-theme\/#required-files-and-file-structure\" target=\"_blank\" rel=\"noreferrer noopener\">different structural markups<\/a> than the current PHP-based classic themes, which might be a subject for yet another time.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Please share your experience and thoughts if you have been using Frontity in your projects. As always, I enjoy reading any comments and feedback!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Frontity is a framework for creating de-coupled (or &#8220;headless&#8221;) WordPress sites. In this article, we dive into the process of spinning up such a site, with a detailed overview of the building blocks provided by Frontity and its flagship theme, Mars.<\/p>\n","protected":false},"author":275938,"featured_media":350148,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Ganesh Dahal has been sharing his personal journey with headless WordPress over several articles. This one's a super deep dive into the Frontity framework and its Mars Theme.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18969,920,557,18919,264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/frontity-wordpress.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":346702,"url":"https:\/\/css-tricks.com\/creating-headless-wordpress-site-with-frontity\/","url_meta":{"origin":350070,"position":0},"title":"Creating a Headless WordPress Site With Frontity","date":"August 20, 2021","format":false,"excerpt":"Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you could think of it like Next.js for WordPress. And while the demand for headless WordPress sites may be a niche market at the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620244127345_ct_front-1-01.png.jpeg?fit=1200%2C605&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316375,"url":"https:\/\/css-tricks.com\/frontity-is-react-for-wordpress\/","url_meta":{"origin":350070,"position":1},"title":"Frontity is React for WordPress","date":"July 9, 2020","format":false,"excerpt":"Some developers just prefer working in React. I don't blame them really, because I like React too. Maybe that's what they learned first. I've been using it long enough there is just some comfort to it. But mostly it is the strong component model that I like. There is just\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-06-at-4.23.27-PM.png?fit=1200%2C725&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342248,"url":"https:\/\/css-tricks.com\/just-how-niche-is-headless-wordpress\/","url_meta":{"origin":350070,"position":2},"title":"Just How Niche is Headless WordPress?","date":"June 15, 2021","format":false,"excerpt":"I wonder where headless WordPress will land. And by \"headless\" I mean only using the WordPress admin and building out the user-facing site through the WordPress REST API rather than the traditional WordPress theme structure. Is it... big? The future of WordPress? Or relatively niche? Where's the demand? Certainly, there\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/wordpress-logo-sketch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353308,"url":"https:\/\/css-tricks.com\/how-to-build-a-nearly-headless-wordpress-website\/","url_meta":{"origin":350070,"position":3},"title":"How to Build a Nearly Headless WordPress Website","date":"October 18, 2021","format":false,"excerpt":"I believe that a traditional WordPress theme should be able to work as effectively as a static site or a headless web app. The overwhelming majority of WordPress websites are built with a good ol' fashioned WordPress theme. Most of them even have good caching layers, and dependency optimizations that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/wordpress-logo-sketch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271098,"url":"https:\/\/css-tricks.com\/the-ultimate-guide-to-headless-cms\/","url_meta":{"origin":350070,"position":4},"title":"The Ultimate Guide to Headless CMS","date":"May 17, 2018","format":false,"excerpt":"The World Has Changed\u2014So Must the CMS Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices\u2014the age of headless technology is coming. Headless CMS is the next generation in content management for brands that want to stay ahead\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/book-mockup-1_t.png?fit=1200%2C768&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265511,"url":"https:\/\/css-tricks.com\/ultimate-guide-headless-cms\/","url_meta":{"origin":350070,"position":5},"title":"The Ultimate Guide to Headless CMS","date":"January 18, 2018","format":false,"excerpt":"The World Has Changed\u2014So Must the CMS Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices\u2014the age of headless technology is coming. Headless CMS is the next generation in content management for brands that want to stay ahead\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/book-mockup-1_t.png?fit=1200%2C768&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350070"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/275938"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350070"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350070\/revisions"}],"predecessor-version":[{"id":351671,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350070\/revisions\/351671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/350148"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=350070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}