How to add your own customizer option in free GeneratePress theme

WordPress has a great feature called WordPress Customizer API. By which the theme developer can fine-tune their website, such as background color, theme layout, and so on.

In my previous tutorial, you have seen how to create a child theme for GeneratePress. So, in this tutorial, I will show you how to add your own customizer option to that child theme.

How to add your own customizer option in free GeneratePress theme

Why you need customizer custom controls in child theme?

Since we are working on a free GeneratePress theme, there are many premium features missing. For example, footer credit text.

You can always go for GeneratePress premium, but if you have a tight budget, this is how you can add the necessary features through customizer custom controls in your child theme.

How to add customizer custom controls?

We will first create a panel called “GP Child Theme Settings” using the WordPress Customizer API. Then I’ll create a section in it called Footer.

How to create customizer panel?

Customizer add panel

To create a panel follows the code below.

$wp_customize->add_panel( 'gp_child_theme_options', 
	array(
		'priority'       => 10,
		'title'            => __( 'GP Child Theme Settings', 'generatepresschild' ),
		'description'      => __( 'Generatepress Child Theme modification', 'generatepresschild' ),
		'capability'	=> 'edit_theme_options',
	) 
);

In the above example, we have passed some parameters to the add_panel() method. The first one is gp_child_theme_options that the unique id of our panel. The second parameter is an array related to the panel.

priorityIt helps to set the position of our panel in the customizer window
titleTitle of our panel i.e. GP Child Theme Settings
descriptionShort description of our panel.
capabilityAllows access to Administration Screens options

How to add customizer section inside a panel?

Add section inside a panel

Now we need to add a section. For example Footer. To add a section inside a panel, follow the steps below.

// Theme Options section
$wp_customize->add_section( 'gp_child_footer', 
	array(
		'priority'       => 100,
		'title'            => __( 'Footer', 'generatepresschild' ),
		'description'      => __( 'Modification related to footer section', 'generatepresschild' ),
		'capability'	=> 'edit_theme_options',
		'panel' => 'gp_child_theme_options',
	) 
);

The add_section() has same parameter like add_panel(). But in the second parameter that is an array, we have to pass the panel id where we want to show the section. In this case, the panel id is “gp_child_theme_options”.

How to add a control?

Add a control inside section

To add a control inside our footer section, we need to add a setting first.

$wp_customize->add_setting( 'footer_credit_text', 
	array(
		'default'           => __( 'All rights reserved ', 'generatepresschild' ),
		//'sanitize_callback' => 'sanitize_text_field',
		'transport'         => 'refresh',
	)
);

In add_setting() method, we have passed a unique setting id i.e. ‘footer_credit_text’. You can use any id here. We can set the default value of that control from here. As we are changing the footer credit text, so it will be ‘All rights reserved.

The sanitize_callback option helps to sanitize the user input. We are not going to use it here. The last option is to transport. It will refresh the page and show the result whenever we are going to change the control’s value.

Here we will change the footer credit text. So we will add a textarea here.

$wp_customize->add_control( 'footer_credit_text', 
	array(
		'priority'    => 10,
		'type'        => 'textarea',
		'section'     => 'gp_child_footer',
		'description' => 'Text put here will be outputted in the footer. You can also use <b>%copy%</b>, <b>%current_year%,</b> <b>%blog_name%,</b> <b>%blog_url%</b>',
		'label'       => 'Copyright text',
	) 
);

As we want textarea, we have to set the type as textarea. You can use different control supported by customize. In which section we will add the control, we have to give that ID in the section option. The other fields are self-explanatory.

But wait, I know you are copying and pasting the code into functions.php. But there are some problems or there is no panel or section show inside the customizer.

We need to register our panels, controls, and sections by using customize_register action. So here is the full code.

/********************************
*
*		Gp child Cuztomization
*
*********************************/

function gpchild_customize_register( $wp_customize ) {

	// Theme Options Panel
	$wp_customize->add_panel( 'gp_child_theme_options', 
		array(
			'priority'       => 10,
			'title'            => __( 'GP Child Theme Settings', 'generatepresschild' ),
			'description'      => __( 'Generatepress Child Theme modification', 'generatepresschild' ),
			'capability'	=> 'edit_theme_options',
		) 
	);

	// Theme Options section
	$wp_customize->add_section( 'gp_child_footer', 
		array(
			'priority'       => 100,
			'title'            => __( 'Footer', 'generatepresschild' ),
			'description'      => __( 'Modification related to footer section', 'generatepresschild' ),
			'capability'	=> 'edit_theme_options',
			'panel' => 'gp_child_theme_options',
		) 
	);

	$wp_customize->add_setting( 'footer_credit_text', 
		array(
			'default'           => __( 'All rights reserved ', 'generatepresschild' ),
			//'sanitize_callback' => 'sanitize_text_field',
			'transport'         => 'refresh',
		)
	);

	$wp_customize->add_control( 'footer_credit_text', 
		array(
			'priority'    => 10,
			'type'        => 'textarea',
			'section'     => 'gp_child_footer',
			'description' => 'Text put here will be outputted in the footer. You can also use <b>%copy%</b>, <b>%current_year%,</b> <b>%blog_name%,</b> <b>%blog_url%</b>',
			'label'       => 'Copyright text',
		) 
	);

}
add_action( 'customize_register', 'gpchild_customize_register' );

In my next tutorial, I will show you how to change footer credit text in a free GeneratePress theme using the customizer.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment