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)

You or the end user can then implement the plugin by adding it to the experimentalPlugins 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,
  experimentalPlugins: [new MyPlugin()],
  possibleTypes,
});
Code language: JavaScript (javascript)