0

I've registered a Customizer section called "Other Logos" and have used the WP_Customize_Image_Control() object to upload images that show up in the Customizer. I'm customizing Twentyseventeen in a child-theme.

When I try to use get_theme_mod() or get_option(), to return an src for the img tag, I am not getting a result I understand.

A var_dump() of a test variable seems to show get_theme_mod() OR get_option() returning an array Object instead of a string. The object contains the correct image src URL that I'm looking to input in my theme files but I'm not sure how to get at it at this point.

From my functions.php

function nscoctwentyseventeen_customize_register( $wp_customize ) {

    $wp_customize->add_section(
            'nscoctwentyseventeen_other_logos',
            array(
                    'title'       => __( 'Other Logos', 'nscoctwentyseventeen' ), //2nd arg matches child theme name
                    'capability'  => 'edit_theme_options',
                    'priority' => 6,
                    'description' => __('Add other logos here', 'nscoctwentyseventeen'), //2nd arg matches child theme name
            )
        );
    $wp_customize->add_setting('nscoctwentyseventeen_punchout_logo[image_upload_test]', array(
            'default'           => 'image.jpg',
            'capability'        => 'edit_theme_options',
            'type'           => 'option',
    ));
    $wp_customize->add_setting('nscoctwentyseventeen_stamp_logo[image_upload_test]', array(
            'default'           => 'image.jpg',
            'capability'        => 'edit_theme_options',
            'type'           => 'option',
    ));
    $wp_customize->add_setting('nscoctwentyseventeen_color_logo[image_upload_test]', array(
            'default'           => 'image.jpg',
            'capability'        => 'edit_theme_options',
            'type'           => 'option',
    ));

    // Add a control to upload the punchout logo
    $wp_customize->add_control(
            new WP_Customize_Image_Control(
                    $wp_customize,
                    'nscoctwentyseventeen_punchout_logo',
                    array(
                            'width'      => 250,
                            'height'     => 250,
                            'flex-width' => true,
                            'selector' => '.punchout_logo',
                            'label' => __('Upload Punchout Logo', 'nscoctwentyseventeen'),
                            'section' => 'nscoctwentyseventeen_other_logos',
                            'settings' => 'nscoctwentyseventeen_punchout_logo[image_upload_test]',

                    )
                    )
            );

    // Add a control to upload the stamp logo
    $wp_customize->add_control(
            new WP_Customize_Image_Control(
                    $wp_customize,
                    'nscoctwentyseventeen_stamp_logo',
                    array(
                            'width'      => 250,
                            'height'     => 250,
                            'flex-width' => true,
                            'selector' => '.stamp_logo',
                            'label' => __('Upload Stamp Logo', 'nscoctwentyseventeen'),
                            'section' => 'nscoctwentyseventeen_other_logos',
                            'settings' => 'nscoctwentyseventeen_stamp_logo[image_upload_test]',
                    )
                    )
            );

    // Add a control to upload the punchout logo
    $wp_customize->add_control(
            new WP_Customize_Image_Control(

                    $wp_customize,
                    'nscoctwentyseventeen_color_logo',
                    array(
                            'width'      => 250,
                            'height'     => 250,
                            'flex-width' => true,
                            'selector' => '.color_logo',
                            'label' => __('Upload Color Logo', 'nscoctwentyseventeen'),
                            'section' => 'nscoctwentyseventeen_other_logos',
                            'settings' => 'nscoctwentyseventeen_color_logo[image_upload_test]',
                    )
                    )
            );

}
add_action( 'customize_register', 'nscoctwentyseventeen_customize_register' );

In the theme file footer.php:

<div class="widget-column custom-branding">
        <?php
        $colorlogoURL = get_option( 'nscoctwentyseventeen_color_logo' );
        echo var_dump($colorlogoURL); 
        ?>

            <img src="<?php echo $colorlogoURL?>">
        </div>

This results in the following output.

From var_dump():

array(1) { ["image_upload_test"]=> string(78) "https://www.example.com/wp-content/uploads/2018/02/myimage.png" }

In html:

<img src="&lt;br /&gt;&#10;&lt;b&gt;Notice&lt;/b&gt;:  Undefined offset: 1 in &lt;b&gt;/home/user/public_html/example/wp1/wp-content/themes/nscoctwentyseventeen/template-parts/footer/footer-widgets.php&lt;/b&gt; on line &lt;b&gt;25&lt;/b&gt;&lt;br /&gt;&#10;">

I've used esc_url() on the variable without any change. I've tried 'type' => "theme_mod", in lieu of 'type' => "option".

There is something here that is incredibly simple that I must be missing, and a ton of searching the codex, and forum I'm at a loss to figure out this particular problem.

I'm using Wordpress 4.9.6, with PHP 7.1

0

2 Answers 2

0

Short answer:

Pasting in your code, setting the images. I was able to get the string with

<img src="<?php echo $colorlogoURL['image_upload_test'] ?>">

Long answer:

Having an array on each unique setting (nscoctwentyseventeen_*_logo[image_upload_test]) doesn't make sense to me for this simple use. The functionality for it exists in core, so there's obviously a reason for it, however I'm not sure why it's in your code, and I think that caused a lot of your confusion. I believe for longevity, and this use, it's best to make each logo its own setting, without arrays.

Cleaning the code and shortening the namespace makes it a little easier to read. edit_theme_options is the default capability so it can be removed. and since all three logos are the exact same (except the name), you can shorten the code, and prevent repeating, by making a loop:

add_action( 'customize_register', function ( $wp_customize ) {
    $wp_customize->add_section(
        'nscocts_other_logos',
        [
            'title' => __( 'Other Logos', 'nscoctwentyseventeen' ),
            'priority' => 6,
            'description' => __('Add other logos here', 'nscoctwentyseventeen'),
        ]
    );
    foreach (['Punchout','Stamp','Color'] as $name) {
        $wp_customize->add_setting("nscocts_{$name}_logo", [ 'type' => 'theme_mod' ]);
        $wp_customize->add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                "nscocts_{$name}_logo",
                [
                    'width' => 250,
                    'height' => 250,
                    'flex-width' => true,
                    'selector' => ".{$name}_logo",
                    'label' => __("Upload {$name} Logo", 'nscoctwentyseventeen'),
                    'section' => 'nscocts_other_logos',
                    'settings' => "nscocts_{$name}_logo",
                ]
            )
        );
    }
});

Then in your theme to retrieve, you could do

echo get_theme_mod( "nscocts_Punchout_logo" );
echo get_theme_mod( "nscocts_Stamp_logo" );
echo get_theme_mod( "nscocts_Color_logo" );

Note that WP_Customize_Image_Control stores the string src path of the image. I've personally have only had issues with it - so I instead use WP_Customize_Media_Control to store the select item as an ID ( then use wp_get_attachment_image_src() to retrieve the src of the image).

Hope that helps.

0

I think here is likely the problem:

$colorlogoURL = get_option( 'nscoctwentyseventeen_color_logo' );

That will return an array, so you want to return $colorlogoURL[0] for the first effect.

Looking at the setting [image_upload_test]. It’s wrtten into an array.

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.