Block metabox – No expanding, no moving around

I would like to make metaboxes as fixed elements, removing the expand function and the drag-and-drop function.

Any ideas?

Related posts

Leave a Reply

3 comments

  1. Deregistering the postbox script seemed a little bit drastic and as mentioned the “Edit” button for the permalink slug does not work as expected anymore.

    I actually came up another method which uses filters from WordPress and the functionality of the jQuery UI sortable plugin allowing to cancel the sort when it is issued from specific element(s) through the cancel option.

    Context

    WordPress 3.4.2 uses jQuery UI 1.8.20. Here’s the initialization code that is used in postbox.js (I’ve stripped down the not relevant options):

    a(".meta-box-sortables").sortable({
        ...
        connectWith: ".meta-box-sortables",
        items: ".postbox",
        handle: ".hndle",
        ...
    });
    

    So the plugin creates a sortable list for elements .postbox. The sort is issued with the child element .hndle.

    Solution

    1. Adding classes to the .postbox elements

      WordPress provides a filter hook to customize the css classes added to the postboxes:

      postbox_classes_{page}_{id}
      

      {page} is the page the metabox is displayed on
      {id}is the metabox id

      So if I have a metabox with id “_movie_details_metabox” applied for a custom post type called “movie_type”, you can do this:

      function metabox_not_sortable($classes) {
          $classes[] = 'not-sortable';
          return $classes;
      }
      add_filter('postbox_classes_movie_type__movie_details_metabox', 'metabox_not_sortable');
      

    2. Alter jquery ui sortable instance

      Then you can insert a footer script in the admin area to alter the sortable instance to cancel the sort event if it is issued through the .hndle element from a postbox with the added css class not-sortable:

        <?php
        add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
        function my_admin_print_footer_scripts()
        {
            ?><script type="text/javascript">/* <![CDATA[ */
                jQuery(function($)
                {
                    $(".meta-box-sortables")
                        // define the cancel option of sortable to ignore sortable element
                        // for boxes with '.not-sortable' css class
                        .sortable('option', 'cancel', '.not-sortable .hndle, :input, button')
                        // and then refresh the instance
                        .sortable('refresh');
                });
            /* ]]> */</script><?php
        }
    

    Postboxes with the css class .not-sortable cannot be sorted anymore, the other ones still can.

  2. deregister the ‘postbox’ script. Place the following in your theme’s functions.php or in a plugin file.

    function dereg() {
      wp_deregister_script('postbox');
    }
    add_action('admin_init','dereg');
    

    I did a very cursory test and it does stop the dragging and the folding, and I don’t notice anything broken.

    The little folding arrow still show up but that is CSS not Javascript. If it bothers you you can kill it with:

    function acss() {
    echo '<style type="text/css">.postbox:hover .handlediv,
    .stuffbox:hover .handlediv {display: none;
    }</script>';
    }
    add_action('admin_head','acss');
    
  3. To answer half of the question, this is how you remove folding in your custom post type:

    php for including css for post.php edit page

    function enqueue_your_custom_adminstuff(){
        wp_enqueue_style('mycustomstyle', plugins_url('/css/mycustomstyle.css', __FILE__),array(),filemtime(plugin_dir_path( __FILE__ )."/css/mycustomstyle.css")); 
        /* Note: I use filemtime to prevent caching the old style version */   
    }
    add_action('admin_enqueue_scripts', 'enqueue_your_custom_adminstuff');
    

    mycustomstyle.css

    .post-type-yourcustomposttypeslug .postbox.closed .handlediv .toggle-indicator:before{
        content: "f142"!important; /* the arrow */
    }
    .post-type-yourcustomposttypeslug .postbox.closed .inside{
        display:block;
    }