🍱Packages

API reference of Frontity and its packages.

Frontity projects are built around the idea of packages that encapsulate logic that can be reused across projects. Frontity packages may be considered as the equivalent of WordPress plugins. They're the ingredients of the final Frontity project.

How to use Frontity packages

Frontity packages are available via npm and they can be installed as dependencies of your Frontity project (as with any other Node project).

Frontity needs to know the packages we're going to use in the project and how we want to use them. We can set this in the frontity.settings.js file, where we can define and configure the packages (by using Namespaces) for the Frontity project.

We're going to focus on the use of Frontity packages at a Frontity project level, but the same applies if you're creating a custom Frontity package. You can see more info about how to create your custom package here.

Official Frontity Packages

The official Frontity packages are those created and maintained by the Frontity Team.

These packages encapsulate the logic to apply the main features needed in a WordPress + React stack project managed by Frontity.

A Frontity project is basically the sum of the Core package plus a selection of Features packages. You can also use Collections packages to help speed up the development of your Frontity project.

The full list of packages includes others created by the community, such as these themes and these features packages. However, only the official frontity packages that have a public API are fully documented here.

💙 Core package

This package is the core of the Frontity framework and provides the main utilities of the framework.

• frontity

🎨 Themes packages

These packages contain the React project used to render the final output (both in client and server side).

• @frontity/mars-theme
• @frontity/twentytwenty-theme

⚡️ Features packages

Source package

This package is in charge of getting data from WordPress and make it accesible from React components.

• @frontity/wp-source

Router package

This package is in charge of managing (React) routes in a Frontity project.

• @frontity/tiny-router

Render package

This package is in charge of converting HTML to React.

• @frontity/html2react

SEO packages

These packages are designed to get automatically all the data from WordPress SEO plugins and render it (along with the content) in the final HTML.

• @frontity/head-tags
• @frontity/yoast

Ads packages

These packages allow you to insert ads in your Frontity projects from services such as Google Ad Manager.

• @frontity/google-ad-manager
• @frontity/smart-adserver

Analytics packages

A set of official Analytics Frontity packages that you can use to easily add analytics services to your project.

• @frontity/google-analytics
• @frontity/google-tag-manager-analytics
• @frontity/comscore-analytics

Comments packages

This package adds support for WordPress' native comments.

• @frontity/wp-comments

📚 Collections packages

These packages are collections of useful components or hooks that you can use in your Frontity project.

• @frontity/components
• @frontity/hooks