0

I am trying to use the customiser to set the background image of each 'post-block' to be that of any image I choose to upload. Here is my code so far.

function jhwdblog_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'post_box_image_section' , array(
            'title'      => __( 'Post Box Background', 'jhwdblog' ),
            'description' => 'Upload a logo to replace the post box background image',
            'priority'   => 30,
    ));

    $wp_customize->add_setting( 'post_box_image');

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'post_box_image', array(
            'label'      => __( 'Post Box Image', 'jhwdblog' ),
            'section'    => 'post_box_image_section',
            'settings'   => 'post_box_image',
    )));
}
add_action( 'customize_register', 'jhwdblog_customize_register' );

and in my page i'm trying to add it to the style inline like so

<div class="post-block" style="background-image:url('<?php echo esc_url(get_theme_mod( 'post-box-image' )); ?> ');">

However all i get when i check the inspector is background-image: url((unknown)). What am i missing here?

2 Answers 2

0

Figured it out: Firstly there is a spelling mistake in that i'm using 'post-box-image' instead of 'post_box_image'...

Secondly it's better to do it this way in functions.php:

function jhwd_blog_theme_customize_css()
{
?>
    <style type="text/css">
        .post-block { 
            background-image:url('<?php echo get_theme_mod( 'post_box_image' );?>'); 
            background-color: <?php echo get_theme_mod( 'post_box_color' );?>;
        }
        .post-block>h1, .post-boxes {
            background-color: <?php echo get_theme_mod( 'post_boxes_items_color' );?>;
        }
    </style>
<?php
}
add_action( 'wp_head', 'jhwd_blog_theme_customize_css');
0

You have a small typo in that your get_theme_mod() call. You are using post-box-image when it should be post_box_image. So like this:

<div class="post-block" style="background-image:url('<?php echo esc_url( get_theme_mod( 'post_box_image' ) ); ?>');">

Also, when you define your setting you should specify a sanitize_callback like this:

$wp_customize->add_setting( 'post_box_image', array(
    'sanitize_callback' => function( $value ) {
        if ( ! empty( $value ) ) {
            $value = esc_url_raw( $value );
            if ( empty( $value ) ) {
                return new WP_Error( 'invalid_image' );
            }
        }
        return $value;
    },
) );

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.