Background personalizado en temas para WordPress

Hace ya mucho que WordPress añadió los fondos personalizados (custom backgrounds) como una característica que puede adoptar cualquier tema. Los temas que soportan el custom background permiten al usuario elegir un color de fondo y una imagen para su web. WordPress automáticamente imprime el CSS adecuado. Por ejemplo:

<style type="text/css" id="custom-background-css">
    body.custom-background {
        background-color: #f6f6f6;
    }
</style>

Si te das cuenta, el estilo anterior se aplica a la etiqueta <body> con clase .custom-background. El tema que quiera hacer uso de los backgrounds personalizados debe, por tanto, hacer uso de la función body_class() además de add_theme_support. Vayamos por partes.

add_theme_support( 'custom-background' );

Lo primero que tienes que hacer para añadir fondos personalizables a tu tema es poner este pequeño código en el archivo functions.php del tema:

add_action( 'after_setup_theme', 'cyb_theme_setup' );
function cyb_theme_setup() {
    add_theme_support( 'custom-background' );
}

Ya tendrás todas las opciones para el background en el panel de customización:

Background personalizado WP Customizer — Background personalizado en el WP ustomizer

Y ahora, si quieres, puedes registrar valores por defecto:

//Custom background
$defaults = array(
            'default-color'          => 'efefef',
            'default-image'          => get_template_directory_uri().'/images/background.jpg',
            'default-repeat'         => 'no-repeat',
            'default-position-x'     => 'center',
            'default-attachment'     => 'sroll',
            'wp-head-callback'       => '_custom_background_cb',
            'admin-head-callback'    => '',
            'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

No te olvides body_class()

Como mencioné al principio, el CSS generado es aplicado al <body> con clase .custom-background. Esta clase es añadida automáticamente por WordPress siempre que hagas uso de la función body_class(). La etiqueta <body> de tu tema debería pintar tal que así:

<body <?php body_class(); ?>>

Disfruta de la personalizando. 😉