WordPress Customizer CSS for Background Image

Question

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

do you have a custom Theme Customization class that includes the generate_css function? it looks like that by default only includes a sprintf call to form the css meaning that it will have to be expanded to include the url() syntax if the style is a "-image" style. — WEBjuju
– WEBjuju, Commented Nov 23, 2016 at 21:07

WEBjuju · Accepted Answer · 2016-11-23 21:09:20Z

2

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;
}

answered Nov 23, 2016 at 21:09

WEBjuju

6,6814 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WEBjuju Over a year ago

that's great news! you should submit a bug fix to whatever repo this code exists in - you should take the credit, too ;)

Troy Templeman Over a year ago

I got the code from the page you referenced and added background images to it, but at least if anyone else runs into the same problem they should be able to easily find this post ;)

Collectives™ on Stack Overflow

WordPress Customizer CSS for Background Image

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related