Using standard backend elements in Plugin

by

There are a few options you can take to organise your plugin screen in the “WordPress” style. I’ve included some resources below which cover the use of page tabs, Ui elements and so forth.

But to emulate the style and functionality of WordPress’ own expanding boxes, use the following markup in your plugin page:

<div class="wrap">
    <div id="poststuff">
        <div id="postbox-container" class="postbox-container">
            <div class="meta-box-sortables ui-sortable" id="normal-sortables">
                <div class="postbox " id="test1">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 1</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>

                <div class="postbox " id="test2">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 2</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

You’ll also need to enqueue some scripts, one from wordpress, one custom. Be sure change plugin-page-suffix to the actual suffix of your plugin page, this ensures we only override postboxes on your plugin page and not all of the pages in wp-admin. Add this to your plugin controller:

function wpseo_129955_admin_scripts($suffix) {
    if($suffix == 'plugin-page-suffix'){
        wp_enqueue_script( 'postbox' );
        wp_enqueue_script( 'postbox-edit', 'path-to-file/postbox-edit.js', array('jquery', 'postbox') );
    }
}
add_action( 'admin_enqueue_scripts', 'wpseo_129955_admin_scripts' );

Then inside of postbox-edit.js, include the following:

jQuery(document).on('ready', function($){
    postboxes.save_state = function(){
        return;
    };
    postboxes.save_order = function(){
        return;
    };
    postboxes.add_postbox_toggles();
});

Within the above script we are simply firing wordpress’ own code to handle it’s native collapsible boxes. I also override two methods in the postboxes object to prevent the code spamming ajax requests relating to whether the boces are toggled or if they’re positions have been moved.

Tested on a local install using WP 3.8

Any questions, just ask.

Resources

Leave a Comment