get_theme_mod is returning a number rather than my image file

This is my first time attempting at implementing a custom panel into the customizer so bare with me please... In short, I am child-theming my site and want to make a basic modification to the parent theme for my blog posts. The way it works now is when you hover over a blog post, there is a font awesome icon which shows up in the middle of the overlay... what I plan to do is replace the font awesome icon with my custom uploaded image that Im scripting for the customizer.

I have successfully added the section to the customizer and it allows me to upload my logo, but when I attempt to output the uploaded image into the theme with:

?php echo get_theme_mod( 'hbps_blog_overlay_logo' ); ?

...it just displays a number - Im not even sure what the number is in reference to yet?

This is my complete markup in my child theme's functions.php:

// Register Hotbox Customizer Options
function hbps_customize_register( $wp_customize ) {

    $wp_customize-add_panel( 'hbps_custom_panel',
        array(
            'title' = __( 'Extra Options' ),
            'description' = esc_html__( 'Additional options for the Flexia theme.' ), 
            'priority' = 90, 
        )
    );

    $wp_customize-add_section( 'hbps_blog_section',
        array(
            'title' = __( 'Blog Extras' ),
            'description' = esc_html__( 'Additional options for the blog section.' ),
            'panel' = 'hbps_custom_panel', 
            'priority' = 160, 
        )
    );

    $wp_customize-add_setting( 'hbps_blog_overlay_logo',
        array(
            'default' = '',
            'transport' = 'refresh',
            'sanitize_callback' = 'absint',
        )
    );

    $wp_customize-add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'hbps_blog_overlay_logo',
        array(
            'label' = __( 'Post Overlay Logo' ),
            'description' = esc_html__( 'Upload a custom logo for the masonry layout that will appear when hovering over a blog post. - Recommended Size: 60x60 px' ),
            'section' = 'hbps_blog_section',
            'width' = 60,
            'height' = 60,
            'button_labels' = array( 
                'select' = __( 'Select Logo' ),
                'change' = __( 'Change Logo' ),
                'default' = __( 'Default' ),
                'remove' = __( 'Remove' ),
                'placeholder' = __( 'No logo selected' ),
                'frame_title' = __( 'Select Logo' ),
                'frame_button' = __( 'Choose Logo' ),
            )
        )
    ) );

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

Example of blog post in "hover state":

Example of new Customizer section:

Extra Question:

Not sure if theres a way around this, but the code Im attempting to amend is contained within a plugin, not the parent theme unfortunately. The dev that made the theme offered the pro version by adding the plugin which aggregately adds the extra features... is there any way to do this from my child theme? I cant seem to find a way that doesnt involve directly editing the plugins code which Id prefer not doing.

Thank you for your help, Shaun

Topic theme-customizer get-theme-mod child-theme Wordpress

Category Web


get_theme_mod is not returning the HTML code for an image and it's not returning URL of that image. So what is that number? It's the ID of selected attachment.

This way you can decide how to use the selected value. So how to display the image?

If you want to print the image, you can do this:

if ( get_theme_mod( 'hbps_blog_overlay_logo' ) > 0 ) { 
    echo wp_get_attachment_image( get_theme_mod( 'hbps_blog_overlay_logo' ), 'full' ); 
}

And to display only the URL of that file:

if ( get_theme_mod( 'hbps_blog_overlay_logo' ) > 0 ) { 
    echo wp_get_attachment_image_url( get_theme_mod( 'hbps_blog_overlay_logo' ), 'full' ); 
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.