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

admin管理员组

文章数量:1287078

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 : .

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.

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.

• theme-options
• headers
• theme-customizer

Share Improve this question asked Feb 17, 2016 at 12:32 Tryna CodeTryna Code 5511 gold badge11 silver badge55 bronze badges 3

• Add customizer settings for headers, and then with get_theme_mod() you can see what option is selected from customizer. based on that you can add your custom headers (create separate .php files for each header). – dingo_d Commented Feb 17, 2016 at 14:33
• Thanks for your reply. I hope it's not too much to ask, but where and how should I use get_theme_mod ? – Tryna Code Commented Feb 17, 2016 at 15:43
• look at my answer below ;) – dingo_d Commented Feb 18, 2016 at 7:36

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： Theme optionhaving the ability to select among several predefined headers