1

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 Blog Post

Example of new Customizer section:

enter image description here

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

3

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' ); 
}
  • Excellent. Thank you for the help. I just changed first get_theme_mod( 'bio_image' ) to get_theme_mod ( 'hbps_blog_overlay_logo' ) before echoing it out and that seemed to do the trick. Thanks again. – Mr.Brown Jun 18 '18 at 21:24
  • @Mr.Brown Ahhh, sorry for that. It's pretty late in here ;) – Krzysiek Dróżdż Jun 18 '18 at 21:57
  • No worries, I got the gist of what you were doing there. Thanks again for the help. – Mr.Brown Jun 18 '18 at 22:25
  • 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. – Mr.Brown Jun 18 '18 at 23:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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