Using standard backend elements in Plugin

1 Views

I’m currently writing a plugin for a company. I created a custom backend page where the admin can change settings used by the plugin.

Currently it looks very messy because there is just too much information on one single site. To clean it a little bit up, I’d like to separate it in sections.

Read More

It would be ideal if I could just use the same elements that WordPress uses, for example :

enter image description here

It would be great if the whole collapsing / extending functionality would come automatically with it too. Unfortunately I found no resources how to do that.

Is it possible to integrate these elements? How to do that?

Post Views: 1

Related posts

1 comment

  1. 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

Comments are closed.