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) and sections.
• 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.

Related

• Download the plugin
• How to Create Gutenberg Sidebars with React

# Gutenberg

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter