Troy Templeman Troy Templeman - 1 month ago 9
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'); ?>
<!--/Customizer CSS-->

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'); ?>


Referencing ...

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; }',
     if ( $echo ) {
        echo $return;
  return $return;