Let’s see how we can create extra customization options in the WordPress Customizer for the GeneratePress theme. I am going to be creating a Comments section inside the existing Colors section of the theme to be able to choose a base color that will affect the comment heading bottom border, the custom icon color that I have created for the reply link and also the hover color of that link.

It’s always a good idea to be working with a child theme. Here is what I have so far with the custom styling included:

We are going to utilize the customizer.php found inside the GeneratePress theme’s inc folder. Inside there and around line 228, there is some code responsible for inserting the background color setting inside the Color section of the Customizer:

$wp_customize->add_section(
	'body_section',
	array(
		'title' => $wp_customize->get_panel( 'generate_colors_panel' ) ? __( 'Body', 'generatepress' ) : __( 'Colors', 'generatepress' ),
		'capability' => 'edit_theme_options',
		'priority' => 30,
		'panel' => $wp_customize->get_panel( 'generate_colors_panel' ) ? 'generate_colors_panel' : false,
	)
);

$wp_customize->add_setting(
	'generate_settings[background_color]',
	array(
		'default' => $defaults['background_color'],
		'type' => 'option',
		'sanitize_callback' => 'generate_sanitize_hex_color',
		'transport' => 'postMessage',
	)
);

$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize,
		'generate_settings[background_color]',
		array(
			'label' => __( 'Background Color', 'generatepress' ),
			'section' => 'body_section',
			'settings' => 'generate_settings[background_color]',
		)
	)
);

With a few modifications, I came up with the following which should be added inside the functions.php file:

// Customizer settings for comment base color
function gp_customize_comment_color( $wp_customize ) {

    $wp_customize->add_section(
        'gp_comment_section',
        array(
            'title' => $wp_customize->get_panel( 'generate_colors_panel' ) ? __( 'Comments', 'generatepress' ) : __( 'Colors', 'generatepress' ),
            'priority' => 80,
            'panel' => $wp_customize->get_panel( 'generate_colors_panel' ) ? 'generate_colors_panel' : false,
        )
    );
    
    $wp_customize->add_setting(
        'gp_comment_color',
        array(
            'default' => '#ff4b4b',
            'sanitize_callback' => 'generate_sanitize_hex_color',
            'transport' => 'refresh',
        )
    );


    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'gp_comment_color',
            array(
                'label' => __( 'Base Color', 'generatepress' ),
                'section' => 'gp_comment_section',
                'settings' => 'gp_comment_color',
            )
        )
    );

}

add_action('customize_register', 'gp_customize_comment_color');

//Output Customize CSS
function gp_customize_css() { ?>

    <style type="text/css">

        .comments-title::before,
        .comment-reply-title::before {
            background-color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

        .comment-content .reply a::after,
        .comment-content .reply a:hover {
            color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

Essential what we are doing here is two things:

1. We create a function and set it when to run by using the customize_register WordPress hook.
2. We create a function to output our Customizer styling to the head of the page and only to selected CSS classes that we define.

To create a section inside the already existing Color section that will house our options, we use the add_section method:

$wp_customize->add_section(
    'gp_comment_section',
    array(
        'title' => $wp_customize->get_panel( 'generate_colors_panel' ) ? __( 'Comments', 'generatepress' ) : __( 'Colors', 'generatepress' ),
        'priority' => 80,
        'panel' => $wp_customize->get_panel( 'generate_colors_panel' ) ? 'generate_colors_panel' : false,
    )
);

To create settings that will be saved in our database, we use the add_setting method:

$wp_customize->add_setting(
    'gp_comment_color',
    array(
        'default' => '#ff4b4b',
        'sanitize_callback' => 'generate_sanitize_hex_color',
        'transport' => 'refresh',
    )
);

To create a control form element where the user actually interacts to make a choice, in our case to select a color, we use the add_control method:

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'gp_comment_color',
        array(
            'label' => __( 'Base Color', 'generatepress' ),
            'section' => 'gp_comment_section',
            'settings' => 'gp_comment_color',
        )
    )
);

Finally, we link our CSS selectors to our color picker value by creating a function and outputting it on the head of our page.

function gp_customize_css() { ?>

    <style type="text/css">

        .comments-title::before,
        .comment-reply-title::before {
            background-color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

        .comment-content .reply a::after,
        .comment-content .reply a:hover {
            color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

Here is how the Customizer for the Colors should look like now with the Comments section added below the Content section:

Need help on customizing GeneratePress or GenerateBlocks?

Get in Touch

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

Please leave this field empty

First name

E-mail *

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!

Thanks for subscribing! Please, check your inbox or spam folder to confirm your subscription.