How to Create Gutenberg Sidebars using only PHP
If you read my previous tutorial about creating a plugin sidebar in Gutenberg, you will find out that it is not that easy. Even if you figured everything out, each time when you create a new sidebar or even a new field, it will take a lot of your time and effort.
Please look at the next example – isn’t it much easier to create sidebar settings that way?
Example of Creating a Sidebar with PHP
All you have to do is to copy the following code into your theme functions.php
file or in your custom plugin.
$options = array( // Sidebar 1 array( 'id' => 'misha-test', 'name' => 'Misha Test', 'icon' => 'admin-appearance', 'sections' => array( array( 'name' => 'Section 1', 'opened' => true, 'fields' => array( array( 'id' => 'mishafield_1', 'label' => 'Text field', ), array( 'id' => 'mishafield_2', 'type' => 'toggle', 'label' => 'Toggle field', ), ), ), ), ), // here could be Sidebar 2 etc ); new trueGutenbergSidebars( $options );
First of all let look what this code creates when you add it to your site:

Let me explain each line of this code.
- As you can see, we are using a PHP class
trueGutenbergSidebars
which is the part of my plugin, so you have to install it on your website first, trueGutenbergSidebars
accepts a variable$options
which is an array of sidebars, we will try to add multiple sidebars in this part of the documentation,- Each sidebar accepts three parameters:
id
(unique slug – only letters, numbers and hyphens),name
(anything),icon
(at this moment it supports only Dashicons) andsections
. - Field parameters are described below.
Supported Field Types
Below I described all the supported fields and all the parameters they accept at this moment. Want another field type here? Let me know in comments.
text

array( 'id' => 'text_field', 'label' => 'Text field', //'type' => 'text', 'post_type' => 'post' // for what post type to display, by default – for all ),
Parameter type
is not necessary here, because its default value is text
anyway.
textarea

array( 'id' => 'textarea_field', 'label' => 'Textarea field', 'type' => 'textarea', 'post_type' => 'post', 'rows' => 5, ),
select

array( 'id' => 'select_field', 'label' => 'Select field', 'type' => 'select', 'post_type' => 'post', 'options' => array( 'value_1' => 'Option 1', 'value_2' => 'Option 2' ), ),
radio

array( 'id' => 'radio_field', 'label' => 'Radio field', 'type' => 'radio', 'post_type' => 'post', 'options' => array( 'value_1' => 'Option 1', 'value_2' => 'Option 2' ), ),
checkbox

array( 'id' => 'checkbox_field', 'label' => 'Checkbox field', 'type' => 'checkbox', 'post_type' => 'post', ),
toggle

array( 'id' => 'toggle_field', 'label' => 'Toggle field', 'type' => 'toggle', 'post_type' => 'post', ),
How to Create Multiple Panels?
As you can see from the previous part of the tutorial, I created a separate panel (section) for each field type. Here is what I got:

Here is the complete code I used to create it:
$options = array( array( 'id' => 'misha-test', 'name' => 'Misha Test', 'icon' => 'admin-appearance', 'sections' => array( // Panel 1 array( 'name' => 'SEO settings', 'opened' => true, 'fields' => array( // Field 1 – TextControl array( 'id' => 'seo_title', 'label' => 'SEO title', ), // Field 1 – TextareaControl array( 'id' => 'seo_description', 'label' => 'SEO description', 'type' => 'textarea', 'rows' => 3, ), // Field 3 – ToggleControl array( 'id' => 'robots', 'label' => 'Add robots meta tag', 'type' => 'toggle', ), ), ), // Panel 1 end // Panel 2 array( 'name' => 'Panel 2', 'fields' => array( // Field 1 – TextareaControl array( 'id' => 'textarea_field', 'label' => 'Textarea field', 'type' => 'textarea', 'rows' => 5, ), // Field 2 – SelectControl array( 'id' => 'select_field', 'label' => 'Select field', 'type' => 'select', 'options' => array( 'value_1' => 'Option 1', 'value_2' => 'Option 2' ), ), // Field 3 – RadioControl array( 'id' => 'radio_field', 'label' => 'Radio field', 'type' => 'radio', 'options' => array( 'value_1' => 'Option 1', 'value_2' => 'Option 2' ), ), // Field 4 – CheckboxControl array( 'id' => 'checkbox_field', 'label' => 'Checkbox field', 'type' => 'checkbox', ), ), ), // Panel 2 end ), ), ); new trueGutenbergSidebars( $options );
One more thing I want to mention here – please make a look at opened
parameter on line 11, this parameter allows to define which panels should be initially opened.
In conclusion each section (panel) accepts three parameters – name
, opened
and post_type
.
Multiple Sidebars
The long story short, here is what is possible with my plugin:

So you can create as much sidebars as you want.
$options = array( // Sidebar 1 array( ), // Sidebar 2 array( ), // ... ); new trueGutenbergSidebars( $options );
Allow or Disallow Certain Sidebars / Sections / Fields by Post Type
From the previous part of this documentation you already know, that every field has its own post_type
parameter, and I want to tell you more – every section and every sidebar accept post_type
parameter too.
Comments — 4
Some cool fields to add would be a taxonomy select, both select and multi-select, a post select field, and it would be awesome if an input can be changed to “number” format and it gets saved to the database as an integer.
Last but not least; maybe a way to remove the “unpin from toolbar” star from specific sidebars? I have had a few users so far that accidentally clicked it.
Plus one on the post select field
Misha, I’m going to use your plugin specifically for this functionality!
I wonder why almost nobody (ACF, Metabox.io, Carbon Fields, etc. or even new players like Block Lab) saw the need for those panels when they are real replacement for meta boxes to store post meta data nowadays.
I’m only missing repeaters and nesting (field groups).
That’s a good question 🙃
Field groups will be supported in my plugin soon.
Comments are closed.