So first you need customizer options. You can put this in customizer.php
and include that file in your functions.php
or you can just put it in functions.php
directly.
add_action('customize_register', 'mytheme_customize_register');
function mytheme_customize_register( $wp_customize ) {
/**
------------------------------------------------------------
SECTION: Header
------------------------------------------------------------
**/
$wp_customize->add_section('section_header', array(
'title' => esc_html__('Header', 'mytheme'),
'description' => esc_attr__( 'Choose one of three different Header Styles', 'mytheme' ),
'priority' => 1,
));
/**
Header Styles
**/
$wp_customize->add_setting( 'header_styles', array(
'default' => '',
));
$wp_customize->add_control( 'header_styles', array(
'label' => esc_html__( 'Header Styles', 'mytheme' ),
'section' => 'section_header',
'type' => 'select',
'choices' => array(
'style_1' => esc_html__('Header 1', 'mytheme'),
'style_2' => esc_html__('Header 2', 'mytheme'),
'style_3' => esc_html__('Header 3', 'mytheme'),
),
));
}
This will give you a dropdown settings in your customizer.
With that you can, wherever your header element tag <header>
is located, add any styling or even include separate file if you want.
Say that your header is in a file called header_style_1.php
located in a partials
folder, and it’s included in the header.php
file as
get_template_part('partials/header_style_1);
You can add files header_style_2.php
and header_style_3.php
and in your header.php
just add:
$header_style = get_theme_mod('header_styles', 'style_1');
get_template_part('partials/header_'.$header_layout);
This will fetch any of that templates you created for your header.
Hope this helps.