Remove default WordPress styling from metaboxes on edit post pages?

3 Views

Is there a way to prevent WordPress from automatically wrapping every metabox in the postbox class? Or at least add my own outer div so I can make custom changes via css? Thanks!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Here is an answer how to modify the css classes of metaboxes. I would not remove the postbox class, because it is needed to open and close the metabox. But you can attach your own css class to style the metabox and the following html elements.

    But you have to modify every single metabox, there is no general hook for all metaboxes. Use the global $wp_meta_boxes to find out which metaboxes are available on the current screen.

    add_action( 'wp_dashboard_setup', 'close_all_meta_boxes', 999 );

function close_all_meta_boxes() {

    global $wp_meta_boxes;

    $screen = get_current_screen();
    $page = $screen->id;

    if ( isset( $wp_meta_boxes[$page] ) ) {

        foreach ( $wp_meta_boxes[$page] as $parts ) {

            if ( is_array( $parts ) ) {

                foreach ( $parts as $part ) {

                    if ( is_array( $part ) ) {

                        foreach ( $part as $id => $metabox ) {

                            add_filter( "postbox_classes_{$page}_{$id}", 'modify_meta_box_css' );

                        }

                    }
                }

            }

        }
    }

}

function modify_meta_box_css( $classes ) {

    if ( is_array( $classes ) ) {
        array_push( $classes, 'closed' );
    }

    return $classes;

}

    This code will add the closed class to all metaboxes on the dashboard, so all metaboxes will be displayed minified.

  2. Add your necessary classes with the postbox_classes_{$page}_{$id} filter. For example…

    function add_class($classes) {
  $classes[] = 'awesome-new-class-that-I-could-not-live-without';
  return $classes;
}
add_filter('postbox_classes_post_submitdiv','add_class');

    That will add your class to the “Submit” meta box– the one with the “Publish” header– on the “Post” edit page. You can get those values by looking at the source of the page. The {$page} part is revealed in a bit of Javascript near the top. Look for pagenow. The {$id} is the metabox <div>‘s id attribute.