My theme is a very small one page theme which really doesn't need all the scripts, so I've created a few options to remove wp_head() and wp_footer() so the user can choose if they want to enable or disable those.

However, my site does use the custom_background() feature which is placed in the wp_head() so when they disable wp_head(), they will also remove the background.

Is there a way to place the custom_background() code outside the wp_head()?

  • 1
    Many themes/plugins work on footer and header how you will maintain the compatibility of your theme with WP and plugins ?
    – Sumit
    Jun 2, 2016 at 18:02
  • @Sumit Well, it's a choice for the user. If they don't want to use plugins and want a faster site, they can remove the wp_head() function. If they do want to use plugins and all that, they can keep wp_head().
    – J. Doe
    Jun 2, 2016 at 18:26

2 Answers 2


custom_background() places the CSS to wp_head() as you mentioned so to get those CSS as if you don't have wp_head() in your header, these tweaks from the core files would help:

function wpse_228588_background_image_css() {
    $background_styles = '';
    if ( $bgcolor = get_background_color() )
        $background_styles .= 'background-color: #' . $bgcolor . ';';

    $background_image_thumb = get_background_image();
    if ( $background_image_thumb ) {
        $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );

        // Background-image URL must be single quote, see below.
        $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');'
            . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';'
            . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
    return $background_styles; // CSS


<style type="text/css" media="all">body{<?php echo wpse_228588_background_image_css(); ?>}</style>

Yes, this is possible. You can access the custom background image directly with get_background_image(), like this:

echo '<style>body.custom-background {background-image: url(' . get_background_image() . ');} </style>';

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.