Add new Header Styles to Mai Lifestyle Pro theme

README.md

This will create two new Header Styles in the customizer for the Mai Lifestyle Pro child theme for Genesis Framework.

First create the directores lib and js. Add mai-customizations.php to lib. Add custom.js to js. Add the following lines to your functions.php file:

// Enqueue Custom JS script add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' ); function enqueue_custom_script() { wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0' ); }

// Add Mai Customizations require_once get_stylesheet_directory() . '/lib/mai-customizations.php';

custom.js

document.addEventListener( 'DOMContentLoaded', function() {

	var	body               = document.querySelector( 'body' ),
		header             = document.querySelector( '.site-header' ),
        hasFadeHeader    = body.classList.contains( 'has-fade-header' ),
        hasTransparentHeader    = body.classList.contains( 'has-transparent-header' )

	// Make sure we have a header.
	if ( header ) {

		var customScroll = basicScroll.create({
			elem: document.querySelector( '#header-trigger' ),
			from: 'top-top',
			to: 'bottom-top',
			props: hasFadeHeader ? {
				'--header-opacity': {
					from: '1',
					to: '0.25',
				},
			} : hasTransparentHeader ? {
				'--header-background': {
					from: '1',
					to: '0.1',
				},
			} :
			[],
			outside: (instance, percentage, props) => {
				console.log(props);
			}
		});
		customScroll.start();

	}

});

functions.php

<?php

// Enqueue Custom JS script
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );
function enqueue_custom_script() {
    wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),  '1.0.0' );
}


// Add Mai Customizations
require_once get_stylesheet_directory() . '/lib/mai-customizations.php';

mai-customizations.php

<?php 

add_action( 'wp_head', 'mai_header_fade_css' );
function mai_header_fade_css() {

	// Bail if in the Dasbhoard.
	if ( is_admin() ) {
		return;
	}

	/**
	 * Fade onScroll.
	 */
	echo "<style>

	:root {
		--header-background: 1;
	}

    .site-header { 
    	opacity: var(--header-opacity);
    	transition: opacity .8s ease-in-out;
   		-moz-transition: opacity .8s ease-in-out;
   		-webkit-transition: opacity .8s ease-in-out; 
    }

    .site-header {
    	background-color: rgba(255,255,255,var(--header-background)); 
    }

    header:hover { opacity: 1; }

	</style>";
}



/**
 * Add body class to enabled specific settings.
 *
 * @since   Unknown.
 *
 * @param   array  $classes  The body classes.
 *
 * @return  array  $classes  The modified classes.
 */

add_filter( 'body_class', 'mai_do_settings_custom_body_classes' );
function mai_do_settings_custom_body_classes( $classes ) {

	// Header style.
	$header_style = genesis_get_option( 'header_style' );
	if ( $header_style && ! is_page_template( 'landing.php' ) ) {
		switch ( $header_style ) {
			case 'sticky_fade':
				$classes[] = 'has-sticky-header';
				$classes[] = 'has-fade-header';
			break;
			case 'sticky_transparent':
				$classes[] = 'has-sticky-header';
				$classes[] = 'has-transparent-header';
			break;
		}
	}

	return $classes;

}




/**
 * Add custom options to the customizer menu..
 */
add_action( 'customize_register', 'custom_mai_register_customizer_header_footer_settings',33 );
function custom_mai_register_customizer_header_footer_settings( $wp_customize ) {


	/* ************ *
	 * Mai Settings *
	 * ************ */


	$section        = 'mai_header_footer';
	$settings_field = 'genesis-settings';

	// Header style.

	$wp_customize->add_control(
		'header_style',
		array(
			'label'    => __( 'Header style', 'mai-theme-engine' ),
			'section'  => $section,
			'settings' => _mai_customizer_get_field_name( $settings_field, 'header_style' ),
			'type'     => 'select',
			'priority' => 1,
			'choices'  => array(
				'standard'      => __( 'Standard Header' ),
				'sticky'        => __( 'Sticky Header' ),
				'reveal'        => __( 'Reveal Header' ),
				'sticky_shrink' => __( 'Sticky/Shrink Header' ),
				'reveal_shrink' => __( 'Reveal/Shrink Header' ),
				'sticky_fade' => __( 'Sticky/Fade Header' ),
				'sticky_transparent' => __( 'Sticky/Transparent Header' ),
			),
		)
	);

}