You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/pages/docs/how-to/customize-the-toolbar/index.mdx
+6-8Lines changed: 6 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,9 @@ export const metadata = {
4
4
"Learn how to customize the Faust.js Toolbar using the toolbarNodes filter. We'll walk you through the process of enabling the experimental toolbar feature, adding authentication, and creating a custom plugin to extend the Toolbar with new menu items and submenus.",
5
5
};
6
6
7
-
This guide covers how to customize your site’s Toolbar utilizing the `toolbarNodes` filter.
7
+
This guide covers how to customize your site's Toolbar utilizing the `toolbarNodes` filter.
8
8
9
-
## Steps
10
-
11
-
### 0. Prerequisites
9
+
## 0. Prerequisites
12
10
13
11
Ensure that you have completed the steps in the following pages before proceeding.
14
12
@@ -29,7 +27,7 @@ The Faust Toolbar shares mostly the the same HTML as the WordPress core Toolbar.
29
27
import"@faustwp/core/dist/css/toolbar.css";
30
28
```
31
29
32
-
Add `experimentalToolbar: true` to your project’s `faust.config.js`.
30
+
Add `experimentalToolbar: true` to your project's `faust.config.js`.
33
31
34
32
```js title="faust.config.js"
35
33
import { setConfig } from"@faustwp/core";
@@ -43,14 +41,14 @@ export default setConfig({
43
41
});
44
42
```
45
43
46
-
### Step 2. Login to your WP Admin
44
+
## 2. Login to your WP Admin
47
45
48
46
The Toolbar was designed to only load for the authenticated user.
49
47
50
48
> [!IMPORTANT]
51
49
> A WordPress user will be automatically authenticated with your site when previewing a post. This approach can be used as a quick way to view the Toolbar for development purposes.
52
50
53
-
### Step 3. Create The Plugin
51
+
## 3. Create The Plugin
54
52
55
53
Create a new file in your Faust project: `plugins/CustomPlugin.tsx`.
56
54
@@ -145,7 +143,7 @@ export function CustomNodeWithSubmenu() {
0 commit comments