customizer-google-fonts.php

<?php
/**
 * This file adds customizer settings to the Genesis Starter theme.
 *
 * Requires WP SCSS
 *
 * @package      Genesis Starter
 * @link         https://seothemes.net/genesis-starter
 * @author       Seo Themes
 * @copyright    Copyright © 2017 Seo Themes
 * @license      GPL-2.0+
 */

// Ensure WP SCSS plugin is active
if ( !class_exists( 'Wp_Scss' )) {
	return;
}

// Always recompile in the customizer
if ( is_customize_preview() && !defined('WP_SCSS_ALWAYS_RECOMPILE')) {
	define('WP_SCSS_ALWAYS_RECOMPILE', true);
}

// Update the default paths to match theme
$starter_wpscss_options = get_option('wpscss_options');

if( $starter_wpscss_options['scss_dir'] !== '/sass/' || $starter_wpscss_options['css_dir'] !== '/' ) {

	// Alter the options array appropriately
	$starter_wpscss_options['scss_dir'] = '/sass/';
	$starter_wpscss_options['css_dir'] = '/';

	// Update entire array
	update_option('wpscss_options', $starter_wpscss_options);
}

// Set the default font family
$starter_default_font_family = 'Roboto';

// Create array of default font settings
$starter_default_fonts = array(

	'font-body'			  => $starter_default_font_family,
	'font-heading'		  => $starter_default_font_family,
	'font-size-body'	  => '15',
	'font-size-heading'	  => '20',
	'font-weight-body'	  => '300',
	'font-weight-heading' => '500',
	'line-height-body'	  => '1.618',
	'line-height-heading' => '1.382',

);

/**
 * Google Fonts 
 *
 * This will be updated to use the Google Fonts API in a future version. E.g:
 * $url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR_API_KEY';
 * `$json = json_decode( file_get_contents( $url ), true );`
 * 
 */

// Temporary Google Fonts file
$json = json_decode( file_get_contents( get_stylesheet_directory() . '/lib/google-fonts.json' ), true );

// Create an array of font families with their variants
foreach ($json['items'] as $font) {

	//$starter_default_fonts[$font['family']] = $font['variants'];
	$starter_font_families[$font['family']] = $font['family'];	
	$starter_font_variants[$font['family']] = $font['variants'];
}

/** 
 * Update SCSS variables
 *
 * Store SCSS variables in an array that is passed to the `wp_scss_variables`
 * filter. If any customizations have been made then the theme_mod will be 
 * used to override it's corresponding default variable.
 * 
 */
function wp_scss_set_variables(){
    
    // Get the defaults
    global $starter_default_fonts;

    // Create array of color variables
    $variables = array();

    // Create array of font variables
    foreach( $starter_default_fonts as $key => $value ) {

    	// Add px to value if variable is font-size
    	if ( $key == 'font-size-body' || $key == 'font-size-heading' ) {
    		$variables[$key] = get_theme_mod( $key, $value ) . 'px';
    	} else {
    		$variables[$key] = get_theme_mod( $key, $value );
    	}

    }
	return $variables;
    
}
add_filter('wp_scss_variables', 'wp_scss_set_variables'); 

// Register settings and controls with the Customizer.
add_action( 'customize_register', 'starter_customizer_register' );
function starter_customizer_register() {

	// Global variables required
	global $wp_customize;
	global $starter_default_fonts;
	global $starter_default_font_family;
	global $starter_font_families;
	global $starter_font_variants;
	global $font_family_variants;

	/**
	 * Customizer Font Settings
	 *
	 * Add a new Customizer section named Typography for all of the custom 
	 * typography settings. There are 4 setting types in total, each has 
	 * 2 settings, one for the body and one for headings:
	 *
	 * - Font Family
	 * - Font Size
	 * - Font Weight
	 * - Line Height
	 */
	$wp_customize->add_section( 'typography' , array(
	    'title'      => __( 'Typography', 'genesis-starter' ),
	    'description' => 'Please refresh the page after selecting a font family to update the available font weights.',
	    'priority'   => 20,
	) );

	// Counter
	$i = 1;

	foreach($starter_default_fonts as $key => $value) {

		// Capitalize words and replace characters in key
		$label = ucwords( str_replace( array( '_', '-' ), array( ' ', ' ' ), $key ) );

		// Add settings
		$wp_customize->add_setting( $key , array(
		    'default' => $value,
		) );

		// Add controls
		if( $i <= 2 ) {

			// Font family
			$wp_customize->add_control( 
				new WP_Customize_Control( 
				$wp_customize, 
				$key, 
				array(
					'label'      => $label,
					'section'    => 'typography',
					'settings'   => $key,
					'type'       => 'select',
					'choices'    => $starter_font_families,
				) ) 
			);

		} elseif( $i <= 4 ) {

			// Font size
			$wp_customize->add_control( 
				new WP_Customize_Control( 
				$wp_customize, 
				$key, 
				array(
					'label'    	  => $label,
					'description' => sprintf( 'Default font size is %spx', $value ),
					'section'  	  => 'typography',
					'settings' 	  => $key,
					'type'     	  => 'number',
					'input_attrs' => array(
				        'min'   => 0,
				        'max'   => 100,
				        'step'  => 1,
				    ),
				) ) 
			);

		} elseif( $i <= 6 ) {

			// Font weight
			$font_family = get_theme_mod( str_replace('-weight', '', $key), $starter_default_font_family );

			// Get font family variants in array
			$starter_font_family_variants = [];

			foreach ($starter_font_variants[$font_family] as $keys => $value) {
				$starter_font_family_variants[$value] = $value;
			}

			$wp_customize->add_control( 
				new WP_Customize_Control( 
				$wp_customize, 
				$key, 
				array(
					'label'    => $label,
					'section'  => 'typography',
					'settings' => $key,
					'type'     => 'select',
					'choices'  => $starter_font_family_variants,
				) )
				
			);			

		} else {

			// Line height
			$wp_customize->add_control( 
				new WP_Customize_Control( 
				$wp_customize, 
				$key, 
				array(
					'label'       => $label,
					'description' => sprintf( 'Default line height is %s', $value ),
					'section'     => 'typography',
					'settings'    => $key,
					'type'     	  => 'number',
					'input_attrs' => array(
				        'min'   => 0,
				        'max'   => 10,
				        'step'  => .01,
				    ),
				) ) 
			);
		}

		$i++;
	}

}