Skip to main content

Hooks

WP-Next supports Hooks as part of the features provided by WP-Node. These hooks work in a similar way to WordPress Hooks.

For background details on hooks in WP-Node, see the WP-Node Hooks Documentation.

In WP-Next Admin, there are two categories of hooks: frontend and backend.

Frontend Hooks​

Frontend hooks allow you to extend and interact with the UI layer of WP-Next Admin.
Examples include:

  • Adding or customizing Themes
  • Modifying Sidebar Menus

Backend Hooks​

Backend hooks allow you to control behavior and processes that happen on the server side.
Examples include:

  • Validating and storing uploaded media files
  • Defining external login providers
  • Customizing email subjects and bodies for password reset requests, then sending them via sendMail

Registering Hooks​

When the Admin Dashboard is initialized, it creates a _wp directory that contains the hooks folder structure:

_wp
├── config
│   ├── index.d.ts
│   └── wp.json
├── hooks
│   ├── client
│   │   └── index.tsx
│   └── server
│       ├── admin-media.hook.ts
│       ├── index.ts
│       ├── nextauth-providers.hook.ts
│       └── notifications.hook.ts
└── settings.ts

You should place your hooks in either:

  • hooks/client/index.tsx → for frontend hooks
  • hooks/server/index.ts → for backend hooks

Example: Registering Backend Hooks​

import { getDefaultAdminHooks } from "@rnaga/wp-next-admin/server/utils";

import { AdminMediaHook } from "./admin-media.hook";
import { NextAuthProvidersHook } from "./nextauth-providers.hook";
import { NotificationsHook } from "./notifications.hook";

export const hooks = [
  ...getDefaultAdminHooks(),
  AdminMediaHook,
  NextAuthProvidersHook,
  NotificationsHook,
];

Importing Hooks​

When building your app, WP-Next leverages a custom webpack configuration to set up resolve.alias. This allows you to use simplified import paths for hooks and other files within the _wp directory, making your code cleaner and easier to maintain.

import { hooks } from "_wp/hooks/server";