Troy Templeman Troy Templeman - 6 months ago 34
PHP Question

WordPress Customizer CSS for Background Image

I'm using the code below to add some CSS to the head of the page with settings from the WordPress Customizer:

public static function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">
<?php self::generate_css('#site-title a', 'color', 'header_textcolor', '#'); ?>
<?php self::generate_css('body', 'background-color', 'background_color', '#'); ?>
<?php self::generate_css('a', 'color', 'link_textcolor'); ?>
<?php self::generate_css('#wrapper-1', 'background-color', 'section_1_background_color'); ?>
<?php self::generate_css('#wrapper-1', 'background-image', 'section_1_background_image'); ?>
</style>
<!--/Customizer CSS-->
<?php
}


Everything works fine except the background-image because it outputs:

#wrapper-1 { background-image:filename.jpg; }


instead of:

#wrapper-1 { background-image: url("filename.jpg"); }


Does anyone know the proper way to modify the line of php below to include url(" ") around the image?

<?php self::generate_css('#wrapper-1', 'background-image', 'section_1_background_image'); ?>

Answer

Referencing https://codex.wordpress.org/Theme_Customization_API#Sample_Theme_Customization_Class ...

Expand the theme customization class with a generate_css function like this:

/**
 * This will generate a line of CSS for use in header output. If the setting
 * ($mod_name) has no defined value, the CSS will not be output.
 * 
 * @uses get_theme_mod()
 * @param string $selector CSS selector
 * @param string $style The name of the CSS *property* to modify
 * @param string $mod_name The name of the 'theme_mod' option to fetch
 * @param string $prefix Optional. Anything that needs to be output before the CSS property
 * @param string $postfix Optional. Anything that needs to be output after the CSS property
 * @param bool $echo Optional. Whether to print directly to the page (default: true).
 * @return string Returns a single line of CSS with selectors and a property.
 * @since MyTheme 1.0
 */
public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
  $return = '';
  $mod = get_theme_mod($mod_name);


  // fix the issue here:
  if ($style=='background-image' && !empty($mod)) {
    $mod = 'url("'.$mod.'")';
  }


  if ( ! empty( $mod ) ) {
     $return = sprintf('%s { %s:%s; }',
        $selector,
        $style,
        $prefix.$mod.$postfix
     );
     if ( $echo ) {
        echo $return;
     }
  }
  return $return;
}