Theme option : having the ability to select among several predefined headers

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.

enter image description here

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.

Leave a Comment