Skip To Main Content

How to Create a Plugin

In its very basic form, a Faust Plugin is a JavaScript class with an apply method. This apply method has a parameter called hooks, which is passed from @wordpress/hooks. Here is an implementation in TypeScript:

// MyPlugin.tsx

import { FaustHooks, FaustPlugin } from '@faustwp/core';

export class MyPlugin implements FaustPlugin {
  apply(hooks: FaustHooks) {}
}
Code language: JavaScript (javascript)

The hooks parameter is an object which contains the functions addFilter and addActionamongst others. You can then use these functions to call the respective actions and filters to tap into Faust:

// MyPlugin.tsx

import { FaustHooks, FaustPlugin } from '@faustwp/core';

export class MyPlugin implements FaustPlugin {
  apply(hooks: FaustHooks) {
    const { addAction, addFilter } = hooks;

    addFilter(
      'possibleTemplatesList',
      'my-namespace',
      (possibleTemplates, context) => {
        // Filter logic goes here.
      },
    );
  }
}
Code language: JavaScript (javascript)

NOTE:
experimentalPlugins is being deprecated and replaced with plugins in the faust.config.js file. Please update your configuration accordingly.

You or the end user can then implement the plugin by adding it to the plugins property in the App’s faust.config.js file:

// faust.config.js

import { setConfig } from '@faustwp/core';
import templates from './wp-templates';
import possibleTypes from './possibleTypes.json';
import { MyPlugin } from './MyPlugin.tsx';

/**
 * @type {import('@faustwp/core').FaustConfig}
 **/
export default setConfig({
  templates,
  plugins: [new MyPlugin()],
  possibleTypes,
});
Code language: JavaScript (javascript)