Twenty Sixteen child theme with enhanced customizer options

Setting up the theme customizer / Getting ready for Kirki

The typography and color options are implemented using the Kirki toolkit. Installed as a plugin, Kirki is a toolkit that allows developers to extend the capabilities of the WordPress theme customizer and thereby improve the user experience. This child theme utilizes that power of Kirki, but also has a fallback option for those who choose not to install the plugin. If the plugin/toolkit is not installed or is not activated, most of the customizer options will still be available – though not as elegantly or thoroughly as with Kirki installed. Making this happen took a bit of work as it required making one version of the customizer for when Kirki is active and one version for when it’s not. First, I removed the existing Colors section (which I would be rebuilding) and the header image section (which always struck me as somewhat useless) by adding the following to my child theme’s functions.php:

//___Customizer Deletions___//
function remove_customizer_settings( $wp_customize ){
	$wp_customize->remove_section('colors');
	$wp_customize->remove_section('header_image');
	}
	add_action( 'customize_register', 'remove_customizer_settings', 20 );

I added the following to the child theme functions.php to check for Kirki and use the appropriate customizer code:

//___Customizer Additions - Kirki toolkit with fallback to WP___//
// ensure is_plugin_active() exists (not on frontend)
if( !function_exists('is_plugin_active') ) {
	include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
	}
if ( is_plugin_active( 'kirki/kirki.php' ) ) {
	require get_stylesheet_directory() . '/inc/kirki-customizer.php';
} else {
	require get_stylesheet_directory() . '/inc/customizer.php';
	require get_stylesheet_directory() . '/inc/styles.php';
	require_once get_stylesheet_directory() . '/inc/include-kirki.php';
	require get_stylesheet_directory() . '/inc/kirki-fallback.php';
}

• customizer.php is the non-Kirki customizer – what’s loaded if the Kirki toolkit is not active. Why not just build Kirki into the theme and have it permanently active? Because utilizing Kirki as a plugin and not incorporating it directly into the theme allows users to get bug fixes more quickly and more easily.
• include-kirki.php is is a helper file which is used to recommend the installation of Kirki and when the user visits the customizer, if they don’t have Kirki installed they will see a button prompting them to install it.
• kirki-fallbck.php is a wrapper class for Kirki: If the Kirki plugin is active, then all CSS & Google fonts will be handled by the plugin. If the plugin is not active it acts as a fallback, ensuring that all CSS & fonts still work. It does not handle the customizer options, simply the frontend CSS.

In order to make sure that user styles will continue to work even if they uninstall the Kirki plugin, I included a class-my-theme-kirki file which I modified and renamed vanangeles-kirki.php as per the Kirki helpers instructions. Here’s a look at the main Customize menu – without Kirki active, on the left and with Kirki active, on the right:

In both cases I’ve changed the order of the customizer panels to that which makes a little more sense to me, and I changed the title of the first panel for a little more clarity. Here are the changes I made to start off my customizer.php (non-Kirki):

function va_customize_header_register( $wp_customize ) {
	$wp_customize->get_section( 'title_tagline' )->title            = __('Site branding (Titles and tagline)', 'vanangeles');
	$wp_customize->get_section( 'title_tagline' )->priority         = '5'; // Changes the order of the panel or section
	$wp_customize->get_panel( 'menus' )->priority                   = '10';
	$wp_customize->get_section( 'static_front_page' )->priority     = '15';
	$wp_customize->get_section( 'background_image' )->priority      = '37';
	$wp_customize->remove_control( 'header_textcolor' );
	}
	add_action( 'customize_register', 'va_customize_header_register' );

And this code for the Kirki-active version, kirki-customizer.php:

//___Customized Header Element Alignment Options___//
function va_customize_header_register( $wp_customize ) {
	$wp_customize->get_section( 'title_tagline' )->title            = __('Site branding (Titles and tagline)', 'vanangeles');
	$wp_customize->get_section( 'title_tagline' )->priority         = '5';
	$wp_customize->get_panel( 'menus' )->priority                   = '10';
	$wp_customize->get_section( 'static_front_page' )->title     	= __('Front Page and Posts', 'vanangeles');
	$wp_customize->get_section( 'static_front_page' )->priority     = '10';
	$wp_customize->get_section( 'background_image' )->priority      = '37';
	$wp_customize->remove_control( 'header_textcolor' );
	}
	add_action( 'customize_register', 'va_customize_header_register' );

They’re pretty much the same, but in the Kirki version I renamed “Static Front Page” to “Front Page and Posts” because I planned on including an option for the blog layout (sidebar position) in my theme customizer. The lines referring to priority are needed to re-order the sections within the panels; lower numbered sections appear first in the customizer panels. As I said, I made changes based on what makes sense to me, but the same method can be used to make changes to the customizer in your own child theme.

Author: Galen

Combining a lifelong passion for photography with an ever growing fascination with the properties of light, Galen specializes in portrait, fashion, and fine art photography with the goal of producing dynamic, quality images through focused effort and attention to detail. View all posts by Galen