I am developing a theme and I wanted to add some extra content to the built in background options page. I know how to use the settings API to create new theme options and settings but I can’t seem to figure out where it’s actually calling to the background page. I have searched through wp-includes/theme.php
and still not much there except to calls to the background functions and nothing that actually renders the page.
Could this not be done with an action?
The page content for custom backgrounds is created in wp-admin/custom-background.php
. There is no action available where the fields are printed.
To add new fields we have to print JavaScript into the page footer. The action is 'admin_footer-appearance_page_custom-background'
.
To save those field values we have to hook into 'load-appearance_page_custom-background'
.
The following example adds a new option for background-origin
– useful if you have set a border around body
in your stylesheet.

add_action(
'load-appearance_page_custom-background',
array ( 'T5_Background_Origin', 'get_instance' )
);
/**
* Add a new row to the background options table for 'background-origin'.
*
* @author Thomas Scholz http://toscho.de
* @version 2012.09.10
*/
class T5_Background_Origin
{
/**
* Main instance.
* @type object|NULL
*/
protected static $instance = NULL;
/**
* The name for the option. Will be saved as theme option.
*
* @link http://www.w3.org/TR/css3-background/#the-background-origin
* @type string
*/
protected $option = 'background_origin';
/**
* Label on the left side of our new option.
*
* @type string
*/
protected $table_header="Background Origin";
/**
* Return an instance.
*
* @wp-hook load-appearance_page_custom-background
* @return object
*/
public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Save our option and register the form.
*
* @wp-hook load-appearance_page_custom-background
*/
public function __construct()
{
add_action(
'admin_footer-appearance_page_custom-background',
array ( $this, 'form' )
);
if ( empty ( $_POST[ $this->option ] ) )
{
return;
}
check_admin_referer( $this->option, "_t5nonce-$this->option" );
set_theme_mod( $this->option, $_POST[ $this->option ] );
}
/**
* Create the form elements.
*
* @wp-hook admin_footer-appearance_page_custom-background
* @return void
*/
public function form()
{
$nonce = wp_nonce_field(
$this->option,
"_t5nonce-$this->option",
TRUE, // check referer
FALSE // do not echo
);
$html = $nonce . $this->get_radio_fields();
$this->print_script( $html );
}
/**
* Create the jQuery function that inserts our form fields.
*
* @param string $html Radio buttons
* @return void
*/
protected function print_script( $html )
{
$row = "'<tr><th>$this->table_header</th><td>$html</td></tr>'";
?>
<script>jQuery( function <?php echo $this->option; ?>($) {
$('.form-table:last').append(<?php echo $row; ?>);
});</script>
<?php
}
/**
* Helper for form(). Create radio input fields
*
* @return string
*/
protected function get_radio_fields()
{
$value = get_theme_mod( $this->option, 'padding-box' );
$radios = array ( 'padding-box', 'border-box', 'content-box' );
$html = "<p>";
foreach ( $radios as $radio )
{
$html .= sprintf(
' <input type="radio" name="%1$s" value="%2$s" id="%3$s"%4$s>'
. ' <label for="%3$s">%2$s</label> ',
$this->option,
$radio,
"$this->option-$radio",
// returns ' as value delimiters and has to be escaped
addslashes( checked( $value, $radio, FALSE ) )
);
}
return "$html</p>";
}
}