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

Misha Rudrastyh

I develop websites since 2008, so it is total of 14 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me

Follow me on Twitter