F2 Plugin

F2 is a WordPress plugin for fields and forms.

The repo for F2 is public and available at https://github.com/saberwp/f2.

Main JS Controller

Object f2 {} serves as the main F2 execution runtime process. File located at /src/main.js.


Expects element #f2app to be present. Exits early if this element is not found.

JSON App Definition

The app is defined by a JSON definition which is parsed and available via the global var "f2app". Do not confuse this with the DOM element which bears the same name. This defines all aspects of the application. The first sanity check done is to ensure there is at least 1 application model. All apps are expected to have 1 or more models, and if the models array is empty or missing the app init will exit early.

Setup App Screens

f2.screensInit() is called to do the initial screen setup. This involves adding a screen for each defined model plus the default screens dashboard and docs. At this point the screens are just defined in an array and have not been rendered.

f2.screensMake() loops over the defined screens array and creates the DOM element for each screen. The screens are set to hidden initially.

Functional Tests

F2 install test

Does the F2 plugin install without errors?

Does the activation routine run and create a default core app with a single form and one field that is functional with entry storage?

File Reference


Plugin main and only CSS output file shipped in distributions of the plugin.


Controller for the select field types.


Draft file, not currently used.


Schema PHP class.


Storage PHP class.


Standard Tailwind CSS input file used during the Tailwind CLI build process.


Primary JS controller.


Registers the app custom post type.


Default single app template. Contains mixed HTML/PHP.


A Git Ignore file to prevent version controlling node modules and other assets used in the build process.


A draft documentation file that is created during development.


Main plugin initiation file.