Custom theme customizer options don't seem to show on homepage

Question

I am quite new to php and I'm creating a section in theme customiser (in a custom WP theme) to change the top banner image. All appears to work well - the options show in the customizer, I can select and upload images, and save the changes. All changes show in the theme customizer window. But when refreshing the main page, all I see is what is in index.php outside of the php tags that are supposed to retrieve the images / text etc. Below is the code in the theme-customizer.php file (I've exluded the sections showing code for adding text as if I can get the image to show the rest should follow):

    add_action('customize_register', 'k1_customize_register');
function k1_customize_register($wp_customize) {

    // Top Banner Image
    $wp_customize->add_section('k1_banner', array(
        'title' => __('K1 Top Banner', 'k1-framework'),
        'description' => __('Allows you to upload a banner image to display underneath the main navigation.', 'k1-framework'),
        'priority' => 36
    ));

 // Add setting for checkbox for banner image display
    $wp_customize->add_setting('k1_custom_settings[display_k1_banner]', array(
        'default' => 0,
        'type' => 'option'
    ));

    // Add control for checkbox for banner image display
    $wp_customize->add_control('k1_custom_settings[display_k1_banner]', array(
        'label' => __('Display the Top Banner Image?', 'k1-framework'),
        'section' => 'k1_banner',
        'settings' => 'k1_custom_settings[display_k1_banner]',
        'type' => 'checkbox'
    ));


    // Add setting for top banner image
    $wp_customize->add_setting('k1_banner', array(
        'default' => 'http://lorempixel.com/1200/300',
        'type' => 'theme_mod',
        'active_callback' => 'is_front_page',
        'sanitize_callback' => 'esc_url_raw'
    ));

    // Add control for top banner image
    $wp_customize->add_control('k1_banner', array(
        'label' => __('Upload the Top Banner Image', 'k1-framework'),
        'section' => 'k1_banner'


    ));

    // Add setting for banner heading
    $wp_customize->add_setting('k1_banner_heading', array(
        'default' => 'What can K1 do for you?',
        'type' => 'theme_mod',
        'sanitize_callback' => 'sanitize_text_field'
    ));

    // Add control for banner heading
    $wp_customize->add_control('k1_banner_heading', array(
        'label' => __('Banner heading text', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    // Add setting for banner description
    $wp_customize->add_setting('k1_banner_desc', array(
        'default' => 'Lorem ipsum dolor sit amet',
        'type' => 'theme_mod',
        'sanitize_callback' => 'sanitize_text_field'
    ));

    // Add control for banner description
    $wp_customize->add_control('k1_banner_desc', array(
        'label' => __('Banner description text', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    // Add setting for banner link
    $wp_customize->add_setting('k1_banner_link', array(
        'default' => '#',
        'type' => 'theme_mod',
        'sanitize_callback' => 'esc_url_raw'
    ));

    // Add control for banner link
    $wp_customize->add_control('k1_banner_link', array(
        'label' => __('Banner read more link', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    //adding setting for banner link text area
    $wp_customize->add_setting('k1_banner_link_text', array(
        'default'  => 'More',
        'sanitize_callback' => 'sanitize_text_field'
     ));
    $wp_customize->add_control('k1_banner_link_text', array(
        'label'   => 'Read more link text here',
        'section' => 'k1_banner',
        'type'    => 'text',
    ));

}

And here is the code in index.php:

And in index.php where the php code is called:

    <div class="row">

        <div class="col-lg-12 top-banner">


<?php if($options['display_k1_banner'] != '') : ?>  

            <div class="top-banner-inner">


            <img src="<?php echo get_theme_mod( 'k1_banner' ); ?>" alt="Banner image" />


                <h1><?php echo get_theme_mod( 'k1_banner_heading' ); ?></h1>
                    <p><?php echo get_theme_mod( 'k1_banner_desc' ); ?></p>
                    <a class="button" href="<?php echo get_theme_mod( 'k1_banner_link' ); ?>"><em><?php echo get_theme_mod( 'k1_banner_link_text' ); ?></em></a>


            </div> <!-- end top-banner-inner -->
             <?php endif; ?> 




        </div> <!-- end top-banner -->

    </div> <!-- end row -->

The original html where the banner was to be is:

<!-- TOP BANNER -->

<div class="container">

        <div class="row">

            <div class="col-lg-12 top-banner">

                <div class="top-banner-inner">

                <img src="http://lorempixel.com/1200/300" alt="Banner image" />
                    <h1>Heading text</h1>
                        <p>Lorem ipsum dolor sit amet</p>
                        <a class="button" href=""><em>More</em></a>



                </div> <!-- end top-banner-inner -->


            </div> <!-- end top-banner -->

        </div> <!-- end row -->

    </div> <!-- end container -->

If anyone has any ideas on how to get this to work I would really appreciate it.

Answer 1

After changing the initial code (using theme_mod instead of options primarily - see edited q above), I have found a work-around solution to the issue. What was happening was that the default values were not being saved or registered. By setting the default values directly in index.php, all the theme customizer options now show up on the main page.

Below is the new code from index.php:

<div class="col-lg-12 top-banner">


<?php if($options['display_k1_banner'] != '') : ?>  

            <div class="top-banner-inner">


            <img src="<?php echo get_theme_mod( 'k1_banner', 'http://lorempixel.com/1200/300' ); ?>" alt="Banner image" />


                <h1><?php echo get_theme_mod( 'k1_banner_heading', 'What can K1 do for you?' ); ?></h1>
                    <p><?php echo get_theme_mod( 'k1_banner_desc', 'Lorem ipsum dolor sit amet' ); ?></p>
                    <a class="button" href="<?php echo get_theme_mod( 'k1_banner_link', '#' ); ?>"><em><?php echo get_theme_mod( 'k1_banner_link_text', 'More' ); ?></em></a>


            </div> <!-- end top-banner-inner -->
             <?php endif; ?> 




        </div> <!-- end top-banner -->

Answer 2

I tested your code in my environment, and it seems that the customizer code itself (the first block) works fine. The problem is just with the placement of the second block. You probably just have it in a place that is not visible (like I did at first).

To help you with the placement, more info is needed on where exactly the banner should / should not be shown.

EDIT:

The most natural place to start with is to add the content to the bottom of the theme header.php . Then, the banner will appear always on the top of the page.