How to add more Header Styles to Mai Lifestyle Pro

[alchemizt]

I just wanted to share this. If you want to add more Header Styles to the Customizer in Mai Lifestyle Pro child theme, you can do it like this.

Create two new files mai-customizations.php and custom.js and include them in your functions.php file like this:

// 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';

In mai-customizations.php add the following code:

<?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>
    .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; 
   		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' ),
			),
		)
	);

}

In custom.js add the following code:

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: .01,
				},
			} :
			[]
		});
		customScroll.start();

	}

});

This will add two new Header Styles to the customizer.

[AnitaC]

Just as a tip: If you use the code being provided above, be sure to make a backup of your theme files.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts