Adding image sections to wordpress customizer

[Amber]

I've looked high and low for a tutorial about this but can't seem to find it. I was hoping someone else might have come across this and figured it out.

I'm not very good at making my own functions or if/else statements but I'm pretty good and maneuvering around someone else's code.

I'm trying to add 2 image uploaders in a new panel I've created for the wordpress customizer for my top utility bar (along with a bunch of text boxes I've added with the help of a tutorial from Neil - https://wpbeaches.com/adding-text-block-via-customizer-wordpress). I know Neil has another great tutorial about background images for the Altitude theme but I think that may be too much code for a simple social media icon I'm trying to put up?

I've found another tutorial somewhere about getting the image uploader attached to a section and adding the control for it, however I'm not quite sure how to grab the "basic wordpress" snippet and make it a proper add_action function for genesis as I've done with my text boxes.

This is the tutorial I followed to add some image uploaders to my panel - https://kwight.ca/2012/12/02/adding-a-logo-uploader-to-your-wordpress-site-with-the-theme-customizer

This it the output code I need to add to a genesis function:

<?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>

Currently it's just coming up as a plain text url on the site.

Does anyone know how I might hook this into my genesis_before_header?

http://supercleancarwash.ca/staging

[Brad Dalton]

Like this: https://gist.github.com/braddalton/f35ed35748c738414554bd11c31f5603

---

Tutorials for StudioPress Themes.

[Amber]

Thanks for the function braddalton! I'm almost there!

This is my whole thing now.

    $wp_customize->add_section( 'utility_bar_left' , array(
        'title'    => __('Utility Bar Left','genesischild'),
        'panel'    => 'utility_bar',
        'priority' => 10
    ) );

    $wp_customize->add_setting( 'utility_bar_image' );

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'utility_bar_image', array(
    'label'    => __( 'Social Icon', 'genesischild' ),
    'section'  => 'utility_bar_left',
    'settings' => 'utility_bar_image',
	) ) );

and then the function:

add_action( 'genesis_before_header', 'utility_bar_image_function' );

function utility_bar_image_function() {
if ( get_theme_mod( 'utility_bar_image' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; 
}

It's now showing like an image is supposed to be there but just the border of where an image is supposed to be and the alt text. There must be something wrong with my control?
I appreciate your time. 🙂

[Amber]

Would anyone know why it wouldn't be uploading as it should be? It's now in the right spot but the image itself isn't uploading to that spot.

[Brad Dalton]

Image for what?

---

Tutorials for StudioPress Themes.

[Amber]

I had entered in your function in my functions.php file and it looks great however it doesn't display the image I'm uploading. I was hoping you (or any one else) might be able to help me see why it isn't quite yet fully working?

It's currently looking like this (the "Super Clean Car Wash" bordered alt text in the very top white bar to the left)

And this is what I'm trying to upload

This is my whole thing now.

    $wp_customize->add_section( 'utility_bar_left' , array(
        'title'    => __('Utility Bar Left','genesischild'),
        'panel'    => 'utility_bar',
        'priority' => 10
    ) );

    $wp_customize->add_setting( 'utility_bar_image' );

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'utility_bar_image', array(
    'label'    => __( 'Social Icon', 'genesischild' ),
    'section'  => 'utility_bar_left',
    'settings' => 'utility_bar_image',
	) ) );

and then the function:

add_action( 'genesis_before_header', 'utility_bar_image_function' );

function utility_bar_image_function() {
if ( get_theme_mod( 'utility_bar_image' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; 
}

Do you know why the image wouldn't be uploading?

[Amber]

Actually! I just got it working. I forgot to update the below code to my properly named setting/control

<img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>

Is there a way to have these not link to to home page but a url?

[Author]

Posts