Advertisement
Tips

Modifying Custom Background Feature for Any HTML Element You Want

by

In the recent new WordPress version, WordPress has added some new features such as Custom Background, Custom Header, etc, you can see this in action in the Twenty Eleven theme. The Custom Background will add a CSS snippet that effects the <body> element's background, what if you only want this feature to effect another element you specify? Maybe the <header>, <content>, or <footer> elements or another HTML tag.


Find Out Something

In this tutorial, I use Twenty Eleven (in WordPress version 3.4) as a demonstration. Below is a function that handles the Custom Background feature for this theme, I found it in functions.php file:

add_theme_support(
	'custom-background',
	array(
		// Let WordPress know what our default background color is.
		// This is dependent on our current color scheme.
		'default-color' => $default_background_color,
	)
);

And it was declared in the theme.php file under the wp-includes directory:

	function add_theme_support( $feature ) {
		global $_wp_theme_features;

		if ( func_num_args() == 1 ) {
			$args = true;
		}
		else {
			$args = array_slice( func_get_args(), 1 );
		}

		switch ( $feature ) {
			// This function is so long, I only show stuff we need
			case 'custom-background' :
				if ( ! is_array( $args ) )
					$args = array( 0 => array() );

				$defaults = array(
					'default-image' => '',
					'default-color' => '',
					'wp-head-callback' => '_custom_background_cb',
					'admin-head-callback' => '',
					'admin-preview-callback' => '',
				);

				$jit = isset( $args[0]['__jit'] );
				unset( $args[0]['__jit'] );

				// Merge in data from previous add_theme_support() calls. The first value registered wins.
				if ( isset( $_wp_theme_features['custom-background'] ) ) {
					$args[0] = wp_parse_args( $_wp_theme_features['custom-background'][0], $args[0] );
				}

				if ( $jit ) {
					$args[0] = wp_parse_args( $args[0], $defaults );
				}

				if ( defined( 'BACKGROUND_COLOR' ) ) {
					$args[0]['default-color'] = BACKGROUND_COLOR;
				}
				elseif ( isset( $args[0]['default-color'] ) || $jit ) {
					define( 'BACKGROUND_COLOR', $args[0]['default-color'] );
				}

				if ( defined( 'BACKGROUND_IMAGE' ) ) {
					$args[0]['default-image'] = BACKGROUND_IMAGE;
				}
				elseif ( isset( $args[0]['default-image'] ) || $jit ) {
					define( 'BACKGROUND_IMAGE', $args[0]['default-image'] );
				}

				break;
		}
	}

We can see the add_theme_support is used without passing the value of wp-head-callback parameter (except for default-color) that means the default callback function will be called. In this case, that is _custom_background_cb. It was also defined in theme.php file:

function _custom_background_cb() {
	$background = get_background_image();
	$color = get_background_color();
	if ( ! $background && ! $color )
		return;

	$style = $color ? "background-color: #$color;" : '';

	if ( $background ) {
		$image = " background-image: url('$background');";

		$repeat = get_theme_mod( 'background_repeat', 'repeat' );
		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
			$repeat = 'repeat';
		$repeat = " background-repeat: $repeat;";

		$position = get_theme_mod( 'background_position_x', 'left' );
		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
			$position = 'left';
		$position = " background-position: top $position;";

		$attachment = get_theme_mod( 'background_attachment', 'scroll' );
		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
			$attachment = 'scroll';
		$attachment = " background-attachment: $attachment;";

		$style .= $image . $repeat . $position . $attachment;
	}
?>
<style type="text/css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}

Notice anything? Yes, the CSS snippet we need in the end of function.


What We Need to Do

In your functions.php file, you add following code:

function change_custom_background_cb() {
	$background = get_background_image();
	$color = get_background_color();

	if ( ! $background && ! $color )
		return;

	$style = $color ? "background-color: #$color;" : '';

	if ( $background ) {
		$image = " background-image: url('$background');";

		$repeat = get_theme_mod( 'background_repeat', 'repeat' );

		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
			$repeat = 'repeat';

		$repeat = " background-repeat: $repeat;";

		$position = get_theme_mod( 'background_position_x', 'left' );

		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
			$position = 'left';

		$position = " background-position: top $position;";

		$attachment = get_theme_mod( 'background_attachment', 'scroll' );

		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
			$attachment = 'scroll';

		$attachment = " background-attachment: $attachment;";

		$style .= $image . $repeat . $position . $attachment;
	}
?>
<style type="text/css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}
if ( is_wp_version( '3.4' ) ) {
	add_theme_support( 'custom-background', array( 'wp-head-callback', 'change_custom_background_cb' ) );
}
else {
	add_custom_background('change_custom_background_cb');
}

All you need is to replace body.custom-background with the CSS selector you need. The Custom Background feature will only change the background of the element that you define, not the whole site. These snippets also work with old WordPress versions (3.0 or earlier). All done!

We're basically mimicking the built-in functionality, but tweaking it to suit our own needs.

That's it! Hope you like that quick tip, I would appreciate any comments.

Update: This tutorial has been updated to fix the mistakes mentioned in the comments below. If you notice any other errors, please let us know!

Related Posts
  • Code
    Tips
    New wp-config Tweaks You Probably Don't Know8 new wp config tweaks you probably didnt know about 400
    The wp-config.php file: One of the most loved WordPress feature for some, one of the worst nightmares for others. There are countless tips and tricks in a plethora of articles, and you can't get enough of them; however, this article is aiming to be different. In this article, we're going to get familiar with eight new wp-config tricks that are less known than functionality such as turning off post revisions, increasing the memory limit, or other similar features.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Code
    Theme Development
    A Guide to the WordPress Theme Customizer: A Methodology for Sections, Settings, and Controls – Part 2Theme customizer 400
    In the last article, we defined a simple methodology for everything that's required to establish a new Section, Settings, and Controls within the Theme Customizer. In this article, we're going to continue with doing more of the same; however, we're going to be adding new settings and controls into the existing section, but we're going to be looking at a variety of different options such as radio buttons, select boxes, and input boxes. So with that said, let's continue.Read More…
  • Code
    Plugins
    How to Create a WordPress Avatar Management Plugin from Scratch: Getting StartedPreview
    Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more. Easily. Enhance your WordPress website by letting your users choose between using Gravatar or a self-hosted avatar image right from their profile screen. Improved workflow, on-demand image generation and custom user permissions under a native interface. Say hello to the Avatar Manager plugin.Read More…