WordPress: How to move the excerpt meta box above the editor

Moving the WordPress excerpt meta box

Adding and removing new meta boxes is pretty easy in WordPress thanks to the numerous native functions. The same functions can even be used to change the position of native meta boxes, moving them up, down and into the sidebar as you please. However an often googled request is how to move the excerpt meta box above the content wysiwyg editor. A lot of themes use it to summarise the post content and some even as a subheading in the actual post, so it just seems to make more sense in the page flow having it after the title.

Surprisingly despite the numerous questions asked on Stack Overflow and the WordPress forums almost no one seems to come up with an adequate solution. The most common hack is to output a form using the ‘edit_form_after_title’ action, a method that sort of works but lacks proper WordPress meta box styling and is frankly a bit nasty.

Moving the excerpt meta

If you want to skip the explanation just copy and paste the following code to your theme’s functions.php.

/**
 * Removes the regular excerpt box. We're not getting rid
 * of it, we're just moving it above the wysiwyg editor
 *
 * @return null
 */
function oz_remove_normal_excerpt() {
	remove_meta_box( 'postexcerpt' , 'post' , 'normal' );
}
add_action( 'admin_menu' , 'oz_remove_normal_excerpt' );

/**
 * Add the excerpt meta box back in with a custom screen location
 *
 * @param  string $post_type
 * @return null
 */
function oz_add_excerpt_meta_box( $post_type ) {
	if ( in_array( $post_type, array( 'post', 'page' ) ) ) {
		add_meta_box(
			'oz_postexcerpt',
			__( 'Excerpt', 'thetab-theme' ),
			'post_excerpt_meta_box',
			$post_type,
			'after_title',
			'high'
		);
	}
}
add_action( 'add_meta_boxes', 'oz_add_excerpt_meta_box' );

/**
 * You can't actually add meta boxes after the title by default in WP so
 * we're being cheeky. We've registered our own meta box position
 * `after_title` onto which we've regiestered our new meta boxes and
 * are now calling them in the `edit_form_after_title` hook which is run
 * after the post tile box is displayed.
 *
 * @return null
 */
function oz_run_after_title_meta_boxes() {
	global $post, $wp_meta_boxes;
	# Output the `below_title` meta boxes:
	do_meta_boxes( get_current_screen(), 'after_title', $post );
}
add_action( 'edit_form_after_title', 'oz_run_after_title_meta_boxes' );

 

How does it work

Essentially it’s three steps, remove the existing postexcerpt, re-register postexcerpt with our own custom meta location, output the meta box at the new location.

1. De-register the existing postexcerpt.

/**
 * Removes the regular excerpt box. We're not getting rid
 * of it, we're just moving it above the wysiwyg editor
 *
 * @return null
 */
function oz_remove_normal_excerpt() {
	remove_meta_box( 'postexcerpt' , 'post' , 'normal' );
}
add_action( 'admin_menu' , 'oz_remove_normal_excerpt' );

 

2. Add the postexcerpt box back in but using a custom meta box location, (not normal, advanced or side)

/**
 * Add the excerpt meta box back in with a custom screen location
 *
 * @param  string $post_type
 * @return null
 */
function oz_add_excerpt_meta_box( $post_type ) {
	if ( in_array( $post_type, array( 'post', 'page' ) ) ) {
		add_meta_box(
			'oz_postexcerpt',
			__( 'Excerpt', 'thetab-theme' ),
			'post_excerpt_meta_box',
			$post_type,
			'after_title',
			'high'
		);
	}
}
add_action( 'add_meta_boxes', 'oz_add_excerpt_meta_box' );

3. Using the `edit_form_after_title` action run the do_meta_boxes() function calling our custom location, `after_title`.

/**
 * You can't actually add meta boxes after the title by default in WP so
 * we're being cheeky. We've registered our own meta box position
 * `after_title` onto which we've registered our new meta boxes and
 * are now calling them in the `edit_form_after_title` hook which is run
 * after the post tile box is displayed.
 *
 * @return null
 */
function oz_run_after_title_meta_boxes() {
	global $post, $wp_meta_boxes;
	# Output the `below_title` meta boxes:
	do_meta_boxes( get_current_screen(), 'after_title', $post );
}
add_action( 'edit_form_after_title', 'oz_run_after_title_meta_boxes' );

And that’s it! Your excerpt should now be sitting pretty under the title box. Any comments let me know below.