Frontity Examples
Table of Contents
Introduction
This repository is a monorepo consisting of a number of different projects.
Each project in the monorepo is intended to demonstrate how to achieve a particular task using Frontity.
For example, some projects demonstrate using external resources or libraries with Frontity, such as demo-frontity-bootstrap which shows how to use Bootstrap with Frontity, or demo-frontity-antd which shows how to use the Ant Design component library with Frontity, and demo-using-google-fonts which shows how to use Google fonts in a Frontity project.
In those cases the intention is not just to show how to use those specific libraries, but principles that you can use with any similar library. So, for example, if you want to use Tailwind or Bulma as your CSS framework instead of Bootstrap you can still refer to the Bootstrap demo to determine the basic principles of adding similar libraries.
Likewise with the Google fonts example. The principles demonstrated there can be applied to other font libraries or even to local font files included as assets in your project.
Other examples show, not how to use external resources, but how to use some of the features built into Frontity, how to use the packages included with Frontity, or how to fetch and work with the data available in the WordPress REST API.
Usage
Each example is tightly focussed on demonstrating one particular thing. To that end most of the examples use @frontity/mars-theme as the base and only the code needed to achieve the particular task being demonstrated is added to the theme.
This way the examples are not diluted by attempting to show multiple things in a single demo so you can focus in on just the code you need to replicate the task in your own project.
In addition each project has a corresponding live example running in CodeSandbox. The README file for each project provides a link to the CodeSandbox demo running that project so you can see the featured functionality in action. This also gives you the opportunity to study and deconstruct the code and hack on it in order to fully understand it or even extend it and make it your own.
If you have any questions about any of these projects feel free to reach out to us in the Frontity community forum. If you would like a demo of something that you're trying to do with Frontity that we haven't already covered here then you can also suggest it there.
Most of the demos in this monorepo have been produced in response to questions that are frequently asked in the community forum.
The projects
| Project | Description | CodeSandbox |
|---|---|---|
| Contact Form in Footer | This project demonstrates how to put a contact form (or any other content fetched from the WP REST API) in the footer of each page on the site. |  |
| Custom Post Types | In Frontity we can use Custom Post Types (CPT) that have been defined in our Wordpress installation. In order to have access to them we must first configure them in our Frontity project. This demo shows you how. | |
| Using a class-based component | This demo shows how to use a class-based React component in a Frontity project, instead of the more usual function-based components. | |
| Frontity + AntD | This project is a demo to show how to use AntD components in a Frontity Project. It also shows how to load Styles for any CSS library in a Frontity Project. | |
| Frontity + Bootstrap | This project demonstrates how to use Bootstrap components in a Frontity Project. The principles shown here can be applied to any other CSS framework such as Tailwind or Bulma. | |
| Frontity + Scripts Header | This project demonstrates how to include scripts in the header. | |
| Importing Google Fonts into Frontity | This project demonstrates how to use Google Fonts (or fonts from any source, including locally hosted fonts) in a Frontity project using the webfontloader library. |
|
| Fetching a menu from WordPress | This project is a demo to show how to fetch a menu from the WordPress REST API and use it in a Frontity project, thereby allowing content creators/editors to dynamically make changes to the menu structure from within the WordPress admin. | |
| Head Tags | This project demonstrates the use of the @frontity/head-tags package. This package automatically fetches the data exposed by the REST API Head Tags plugin and adds the tags to the <head> section of the HTML document. |
|
| Widget Posts per Category | This project is a demo to show how to create a Homepage with "widgets" showing posts per category. | |
| Processors | This project demonstrates the use of processors in Frontity. A processor parses the HTML content and replaces a defined element with a React component. In this demo we replace the blockquote element. |
|
wp-comments |
This project is a demo to show how to use the wp-comments package to add WordPress comments to your Frontity project |
|
intersection-observer-hooks |
This project is a demo to show how to use the Interesection Observer Hook useInView available in the @frontity/hooks package |
|
infinite-scroll-hooks |
This project is a demo to show how to use the Infinite Scroll Hooks available in the @frontity/hooks package |
|