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

Question

I'm in the process of creating my first theme, and I'm using Quark as a starter theme.

I would like the theme to have various options, one being header selection. (let's say 5 different headers - when selected, the header will show site wide.)

I also would like to implement various headers whose code are available on codepen, but what I'm struggling with is giving users the ability to select their header of choice.

Let' say I want to implement this menu first : http://codepen.io/WhiteWolfWizard/pen/CJLeu.

I've read the Codex for get header function, and I also saw this :

<?php
if ( is_home() ) :
    get_header( 'home' );
elseif ( is_404() ) :
    get_header( '404' );
else :
    get_header();
endif;
?>

It's not suitable to what I'm trying to do, since it shows a header on a per-page basis.

So I was wondering : where the code for the different headers should be, and how can I give the users the ability to select the headers ? (either with option tree, Customizer API, or a better solution if you have any)

Thanks

PS : I'm a beginner at this.

Answer 1

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.

Answer 2

With Option Tree, you can use it like this way:

Lets say you will provide 5 different header designs. Create 5 header files:

1. header.php
2. header-two.php
3. header-three.php
4. header-four.php
5. header-five.php

Now you can check it like:

if (ot_get_option('your_header_selection_key') == 'one'){
    get_header();
} elseif (ot_get_option('your_header_selection_key') == 'two'){
    get_header('two');
} elseif (ot_get_option('your_header_selection_key') == 'three'){
    get_header('three');
} elseif (ot_get_option('your_header_selection_key') == 'four'){
    get_header('four');
} elseif (ot_get_option('your_header_selection_key') == 'five'){
    get_header('five');
}

You can wrap these code in a function inside functions.php and call from page templates, instead writing them on every template file.

This is just an idea. You can use Customizer API with this same idea, if you do not use Option Tree.