3

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.

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
    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
    Feb 17, 2016 at 15:43
  • look at my answer below ;)
    – dingo_d
    Feb 18, 2016 at 7:36

2 Answers 2

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.

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.

7
  • 1
    Hi man, thanks a whole lot, I got the first part working. I haven't done the second part yet (header_style_X.php) as I got to do some urgent "real life" stuff. As I get back tomorrow, I'll do the rest, and mark your answer as the right one for my need. But huge thanks again.
    – Tryna Code
    Feb 18, 2016 at 10:43
  • No problem, happy to help
    – dingo_d
    Feb 18, 2016 at 11:38
  • It works like a charm. Thanks again for your help. I guess I can use the same code to have a bunch of 404 page templates now. :)
    – Tryna Code
    Feb 19, 2016 at 6:53
  • Sure, you can use it for anything you like (customizer). For color change, radio buttons etc. I've made a list of custom controls that you can check out here. Feel free to +1 and accept the answer if it helped :)
    – dingo_d
    Feb 19, 2016 at 6:56
  • well I did, but didn't pick up for some reasons ?
    – Tryna Code
    Feb 19, 2016 at 6:57
0

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.

7
  • not that using option tree is a smart thing, but at least you could have linked to it ;) Feb 17, 2016 at 15:36
  • @THE Sufi : Thanks for your help. If I understand correctly, the given code goes in functions.php, but how do I make the header setting in option tree panel. ( I got it installed in theme mode). @Mark Kaplun : Thanks for your answer as well, but why exactly is Option Tree a bad idea ?
    – Tryna Code
    Feb 17, 2016 at 15:49
  • @TrynaCode, most frameworks of this kind do not really add much value to things that you can write in 10 lines of code, and they become a limitation and liability as time passes by as you need to not only understand your code but also to understand the internal of the framework. If you just looking to do something quick then maybe it is ok to use such a thing, but if you want to create a theme that you will maintain a long time, I think it is better to understand the relevant WP APIs sooner then later. Feb 17, 2016 at 16:02
  • @MarkKaplun, Fair enough. I'm more than keen on going the full WP route. Would you have some clues on how to achieve this with the said route ?
    – Tryna Code
    Feb 17, 2016 at 16:12
  • @TrynaCode, codex.wordpress.org/Function_Reference/get_theme_mod is key to storing theme settings in the DB and the customizer is the main way to introduce GUI for the settings Feb 17, 2016 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.