Frontity is the easiest way to create lightning-fast websites using WordPress and React. This free and open-source framework combines the best of both worlds with a great developer experience in mind. But even with all the advanced features, it will occasionally be necessary to add functionality to the WordPress backend.
Frontity packages and plugins
Frontity projects are built around the idea of packages that encapsulate logic that can be reused across projects. Frontity packages are available via npm and they can be installed as dependencies of your Frontity project. They may be considered as the equivalent of WordPress plugins.
By default, there is no support for most of the WordPress plugins on Frontity. As Frontity relies on WordPress REST API, only those plugins which add/rewrite content to the REST API can be used in Frontity. So here is the list of WordPress plugins with full support on Frontity now.
1. REST API – Head Tags
This plugin adds all the tags in the head section of a website to WordPress REST API responses. It is perfect if you are using WordPress for a headless set-up and would like to add the meta tags generated by your WordPress SEO plugin to the WordPress REST API output.
This plugin is compatible and works out of the box with WordPress SEO plugins like Yoast SEO and All in One SEO Pack. If you are using Frontity, you just have to install the @frontity/head-tags package and it will work automatically.
2. Frontity Yoast Package
@frontity/yoast package is designed to automatically get and render all the tags exposed in the REST API by the Yoast SEO plugin for WordPress. It works with Yoast SEO version 14.0 or later. If you have an earlier version of the Yoast SEO plugin, then you should use the @frontity/head-tags package instead. You will also need the REST API Head Tags plugin.
3. Frontity Embedded Mode
Frontity Embedded Mode is not a plugin in the strictest sense, because it enables the Embedded Mode implementation of Frontity in a WordPress installation and replaces the active WordPress theme with the Frontity installation. Embedded Mode is one of the two main modes of implementation in Frontity (the other being Decoupled Mode). In the Embedded Mode, the primary domain points to the WordPress site, and the Frontity site can be on another domain – including the default URL provided by a free hosting service such as Vercel.
Frontity therefore effectively becomes the WordPress sites’ theme here. It works by substituting its own template.php in place of any call made to the WordPress template hierarchy.
4. WP Job Openings Frontity Package
WP Job Openings plugin is a simple yet powerful plugin for setting up a job listing page for a website from Awsm Innovations (the very same team behind other Frontity projects like Awsm Innovations, Forbes Africa and AWSM F1 Starter Theme).
This package enables the support for the WP Job Openings plugin in the Frontity framework including the support for the application form. All the default fields and the fields supported by WP Job Openings Pro are supported in the job application form. It also offers a simple way to define the custom route (or page) where the Job listing needs to be shown.
5. Frontity Contact Form 7
This plugin is helpful for those who want to create forms in their projects. Since it is built with React and Frontity, it is blazing fast. It is developed by the Aamodt Group and can be used for multiple pages.
You just need to create a page in your WordPress website that contains a Contact Form 7 shortcode or Gutenberg block and install the package. Then visit that page in Frontity and the package will automatically render all the CF7 forms that are present.
6. Frontity Gravity Forms
This frontity package was released recently by Kasper Aamodt. It supports the standard input and text area fields, and also single select and date fields. Just like Frontity CF 7, this too is sure to impress you in the speed department and can be used on multiple pages.
The package doesn’t need any settings. You should be able to see the form on any page or post that contains one.
7. Elementor
Getting Elementor content to appear as desired in a Frontity project is a bit clunkier but definitely doable. Elementor is an immensely popular page-builder plugin, so it’s worth going over the steps needed to get Element content to render properly in a Frontity project.
You have to copy Elementor’s CSS files over to your Frontity project and import them into the main <Theme> component in your theme’s index.js file.
Bonus Tips
There are some features in WordPress that we take for granted but are not currently available in Frontity. To tide over the situation, there are packages to help you out.
1. Comments
There is no default comment system in Frontity. To overcome this drawback, you can use the Comments package that adds integration for WordPress native comments.
This package doesn’t have any configuration. It can simply be added in the frontity.settings.js to the packages array.
2. Website Analytics & SEO
At present, there are 3 Analytics packages to use Google Analytics, Google Tag Manager and Comscore Analytics with Frontity. On the SEO side, as we mentioned above, head-tags and Yoast packages can get automatically all the data from WordPress SEO plugins and render it (along with the content) in the final HTML.
3. Advertising Management
Google Ad Manager package and Smart Adserver package (Smart Adserver is an ad serving network and they provide an API for displaying the ads) can help you to manage your advertising needs.
So these are the WordPress plugins compatible with Frontity now. We are sure that many are on the way and we will be updating this article accordingly. Please do subscribe to our newsletter to make sure you don’t miss any of the updates.
Frontity Framework is not under active development anymore.