Twenty Sixteen child theme with enhanced customizer options

I started with Twenty Sixteen and embarked on my latest child theme project. Along the way discovered a lot of great things that can be done with a child theme given a bit of research and some creative effort.

Hiding the Twenty Sixteen border

Claire Brotherton over at A Bright Clear Web put together a Twenty Sixteen child theme earlier this year which includes some code to hide the border. I think it’s a worthwhile feature, and I incorporated the idea into my own child theme. Just like before, I started by adding the setting and control, this time to the existing background_image section:

	// add setting for border toggle
	$wp_customize->add_setting( 'border_display', array( 
		'section' => 'background_image', 		
		'default' => 0, // unchecked
		'sanitize_callback' => 'sanitize_checkbox'
	) );
	// add checkbox control for border toggle
	$wp_customize->add_control( 'border_display', array(
		'label'     => __( 'Hide border', 'vanangeles' ),
		'description' => 'Note that when the border is hidden, any background set will no longer appear.',
		'section'   => 'background_image',
		'priority'  => 5,
		'type'      => 'checkbox',
		'sanitize_callback' => 'sanitize_checkbox'
	) );	

Now the styles can be applied. Since neither of them is a native customizer control, in order to apply the styles for the border display and for the header alignment (see Site Branding), I created a function to check whether or not the border is to be displayed and whether the header elements alignment is inline or centered. If the border is hidden, the style is applied; otherwise, the default style (visible) is used. Similarly, if the the header elements are to be centered, the style is applied; otherwise, the default inline style is used:

function va_dynamic_styles($custom) {

	$custom = '';

	$custom .= "<style type=\"text/css\">" . "\n";
	//__Remove menu border__//
	if ( get_theme_mod( 'border_display' ) == 1 ) {
		$custom .= "body:not(.custom-background-image):before," . "\n" . "body:not(.custom-background-image):after { height: 0px;}"."\n";
		$custom .= ".site-footer .site-title:after { content: \"\"; }"."\n";
		$custom .= "#footwrapper { border: none;}"."\n";
		$custom .= "@media screen and (min-width: 44.375em) {" . "\n" . "     .site { margin: 0px;}" . "\n" . "}"."\n";

	//__Menu style__//
	$menu_style = get_theme_mod('menu_style','inline');
	if ($menu_style == 'centered') {
		$custom .= ".site-header { padding: 0;}"."\n";
		$custom .= ".site-branding { width: 100%; text-align: center; margin-bottom: 0;}"."\n";
		$custom .= ".site-description { margin-top: 0; padding-top: 0;}"."\n";
		$custom .= "#site-header-menu { margin: 0 auto; margin-top: 30px; margin-top: 1.875rem;}"."\n";
		$custom .= "#menu-toggle { margin: 0 auto; margin-top: 10px; margin-top: 0.625rem; margin-bottom: 10px;  margin-bottom: 0.625rem}"."\n";
		$custom .= "</style>" . "\n";

	echo $custom;
	add_action( 'wp_head', 'va_dynamic_styles' );

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.

Leave a Reply

Your email address will not be published. Required fields are marked *