How to Move a Meta Box in WordPress

Have you ever needed to programmatically move a meta box in the WordPress editor screen? Maybe you’ve needed to change its priority or position? I know I have, many times.

Recently, I needed to move a meta box to the top of the editor screen, just under the main editor (in ‘classic editor’ mode) and all the usual suspects had no answers. So here’s my solution, which I think is pretty robust.

Using the ‘edit_form_after_title’ hook

This hook is the perfect just-in-time point to jump in and update the $wp_meta_boxes global variable. I’m using it in conjunction with $current_screen to ascertain the current admin screen, then I’m looking through the ‘high’ meta boxes and removing the one I’m looking for. Why? Because it can then be prepended to the array, forcing it to be the first of the ‘high’ meta boxes.

Here’s the code to move a meta box titled ‘PriceList’ to the top

NB: the action hook, edit_form_after_title, has one parameter; the WP_Post object, but it’s not needed in this instance.

/**
 * Move the 'pricelist' meta box to top of the 'high' area of the editor screen
 */
add_action('edit_form_after_title', function () {
    global $current_screen, $wp_meta_boxes;

    // only do stuff if this is the editor screen for the post type 'project' and it has meta boxes
    if ($current_screen->id === 'project' && isset($wp_meta_boxes['project'])) {

        // loop though 'high' meta boxes
        foreach ($wp_meta_boxes['project']['normal']['high'] as $key => $high_box) {

            // do stuff if the meta box with the title 'PriceList' is found
            if ($high_box['title'] === 'PriceList') {
                // grab the meta box
                $meta_box = [$key => $high_box];

                // remove it from the array of 'high' meta boxes
                unset($wp_meta_boxes['project']['normal']['high'][$key]);

                // add it to the start of the array
                $wp_meta_boxes['project']['normal']['high'] = $meta_box + $wp_meta_boxes['project']['normal']['high'];
            }
        }
    }
}, 100);

As can be seen from the code above, the target meta box will now be the first one in the array, as required.

Are there other ways to move meta boxes?

As with most things in life the answer’s yes! You could manually move them by dragging them to the desired position, but this is a per-user setting, so not ideal if you want to set the default layout for all users. You could use <a href="https://developer.wordpress.org/reference/functions/do_meta_boxes/" target="_blank" rel="noopener noreferrer">do_meta_boxes()</a> and <a href="https://developer.wordpress.org/reference/functions/remove_meta_box/" target="_blank" rel="noopener noreferrer">remove_meta_box()</a> to remove the target meta box, then add it back where required, using <a href="https://developer.wordpress.org/reference/functions/add_meta_box/" target="_blank" rel="noopener noreferrer">add_meta_box()</a> You can even use custom hooks provided by plugins, where they’re available, which is what I used to move the Yoast meta box to the bottom of the screen.

Need help with technical WordPress challenges?

If you’d like help with WordPress please get in touch and we can discuss your particular challenge.