How to Create Gutenberg Sidebars using only PHP

In my previous tutorial we talked about creating Gutenberg plugin sidebars and now I decided to make it a part of my plugin, so you can create sidebars easily with a couple lines of PHP code

/1 comment

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:

We added a simple Gutenberg sidebar with a couple controls with pure PHP

Let me explain each line of this code.

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

Gutenberg Text Control
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

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

select

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

radio

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

checkbox

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

toggle

Toggle control in WordPress Gutenberg
array(
	'id' => 'toggle_field',
	'label' => 'Toggle field',
	'type' => 'toggle',
	'post_type' => 'post',
),

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:

How to add multiple panels to a Gutenberg sidebar

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:

Multiple sidebars in Gutenberg

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

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with Gutenberg?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 1

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy