Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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.

enter image description here

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>";
    }
}
share|improve this answer
    
Thank you for such a detailed answer. Not quite what I needed to to do but it certainly points me in the right direction. –  Jacob Rambo Sep 10 '12 at 1:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.