Add a customizer section (color picker)
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:
- We create a function and set it when to run by using the
customize_register
WordPress hook. - 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: