Justin Tadlock

Uncluttering the post editing screen in WordPress

One of my growing WordPress-related hobbies is disabling features of the platform. WordPress has a ton of great features in the admin, but for my personal blog and some client sites, the UI gets too messy sometimes.

This week, I’ve been reconfiguring a lot stuff on the backend of this site. One of the things I done was disable quite a few meta boxes to make a cleaner post editing screen. Sure, I could simply click the “Screen Options” tab and hide the meta boxes. However, I have no need for these meta boxes at all. I just wanted them gone.

In light of a WPTavern discussion and the reconfiguring I’ve been doing, I wanted to share a tutorial with you. This tutorial will walk you through the simple steps of disabling meta boxes for the post editing screen. Some possible uses for this functionality are:

  • Uncluttering your personal site’s editing screen.
  • Disabling stuff for clients that they’ll never need.
  • Replacing a meta box with a custom meta box you’ve created.
  • Removing meta boxes added by custom post types from plugins.

There are several methods for disabling some of the meta boxes, but for the purposes of this tutorial, we’ll stick with a single method.

The remove_meta_box() function

Before removing any meta boxes, you need to learn how the remove_meta_box() function works. It’s a function for (you guessed it), removing meta boxes.

remove_meta_box( $id, $page, $context );

Each of the three parameters are required to disable a meta box.

  • $id - The ID used to register the meta box.
  • $page - The page the meta box is displayed on. For posts, this is the name of the post type (e.g., post, page).
  • $context - The area of the screen the meta box is displayed on. For posts, the three possibilities are normal, advanced, and side.

If you wanted to remove the “comments” meta box from the post editor, the use of this function would look like the following:

remove_meta_box( 'commentsdiv', 'post', 'normal' );

How to remove meta boxes

From this point forward, your code will go either in your theme’s functions.php file or a custom plugin file.

Let’s look at the code from the previous section where we created the code to remove the comments meta box. To put this to use, we need to create a new function and execute it on the add_meta_boxes action hook.

add_action( 'add_meta_boxes', 'my_remove_post_meta_boxes' );

function my_remove_post_meta_boxes() {

    remove_meta_box( 'commentsdiv', 'post', 'normal' );

    /* Additional calls to remove_meta_box() go here. */
}

All you need to do is drop any calls to the remove_meta_box() function inside your custom my_remove_post_meta_boxes() function.

I would’ve recommended the admin_menu hook to remove meta boxes, which is what many developers seem to use and is the example hook provided in the WordPress Codex. However, not all meta boxes can be removed when using this hook. The featured image meta box is one such meta box.

What meta boxes you can remove

Now that you know how to remove meta boxes, you might be interested in removing something other than the comments meta box as I’ve used in this tutorial. The following is a list the meta boxes you can remove from the post (or any custom post type) editing screen.

  • submitdiv - The “Publish” box that allows you to set several things.
  • commentsdiv - Displays comments made on the post.
  • trackbacksdiv - Displays an input box for sending trackbacks.
  • commentstatusdiv - Allows you to enable/disable comments and pings for the post.
  • revisionsdiv - Displays post revision links.
  • authordiv - Displays a select box to choose a post author.
  • postexcerpt - Creates a textarea for writing a custom excerpt.
  • formatdiv - Allows the user to select a post format.
  • pageparentdiv - The “Attributes” box for choosing a page parent and template.
  • postimagediv - Displays the featured image box.
  • slugdiv - Displays an additional post slug box.
  • tagsdiv-post_tag - Displays the post tags meta box for selecting tags.
  • categorydiv - Displays the categories meta box for selecting categories.
  • tagsdiv-{$taxonomy} - Lets you choose terms for a non-hierarchical taxonomy (use the taxonomy name).
  • {$taxonomy}div - Allows you to set terms for a hierarchical taxonomy (use the taxonomy name).

Example removing all meta boxes

Since removing each meta box will be slightly different because of the $context parameter discussed earlier, I’ve decided to create the code to remove all meta boxes on the post editing screen. You can copy the following code and pick and choose which parts you need.

Also, this is just for the post post type. If you want to try it out with other post types, change post to the name of your preferred post type in the call to remove_meta_box().

add_action( 'add_meta_boxes', 'my_remove_post_meta_boxes' );

function my_remove_post_meta_boxes() {

    /* Publish meta box. */
    remove_meta_box( 'submitdiv', 'post', 'normal' );

    /* Comments meta box. */
    remove_meta_box( 'commentsdiv', 'post', 'normal' );

    /* Revisions meta box. */
    remove_meta_box( 'revisionsdiv', 'post', 'normal' );

    /* Author meta box. */
    remove_meta_box( 'authordiv', 'post', 'normal' );

    /* Slug meta box. */
    remove_meta_box( 'slugdiv', 'post', 'normal' );

    /* Post tags meta box. */
    remove_meta_box( 'tagsdiv-post_tag', 'post', 'side' );

    /* Category meta box. */
    remove_meta_box( 'categorydiv', 'post', 'side' );

    /* Excerpt meta box. */
    remove_meta_box( 'postexcerpt', 'post', 'normal' );

    /* Post format meta box. */
    remove_meta_box( 'formatdiv', 'post', 'normal' );

    /* Trackbacks meta box. */
    remove_meta_box( 'trackbacksdiv', 'post', 'normal' );

    /* Custom fields meta box. */
    remove_meta_box( 'postcustom', 'post', 'normal' );

    /* Comment status meta box. */
    remove_meta_box( 'commentstatusdiv', 'post', 'normal' );

    /* Featured image meta box. */
    remove_meta_box( 'postimagediv', 'post', 'side' );

    /* Page attributes meta box. */
    remove_meta_box( 'pageparentdiv', 'page', 'side' );
}

I hope you find this tutorial useful in your projects. Let me know if you do anything interesting with it.