How To Make Meta Box Appear Above Editor In WordPress

This should be a relatively simple task to achieve in most scenarios, there are circumstances where it is not. This guide will show you what you need to do to make custom meta boxes appear above the default WordPress editor in the admin area.

When you are adding a new meta box to the post editor in admin, setting the context to advanced will give it priority over the other meta boxes, making it show up at the top. The code below will show you how to do this.

add_meta_box('test', __('test'), 'test', 'post', 'advanced');

The problem you may sometimes encounter is that using the advanced argument does nothing to alter the order in which the boxes appear. There is a simple change you can make if you want this meta field to appear above the main wordpress editor. The code below will force wordpress to push out the advanced meta boxes early. This will mean they will appear at the very top of the new post and edit post form.

add_action('edit_form_after_title', function() {
    global $post, $wp_meta_boxes;
    do_meta_boxes(get_current_screen(), 'advanced', $post);
    unset($wp_meta_boxes[get_post_type($post)]['advanced']);
});

Related Articles

Related Questions

Feeling Trapped as a Front-End Developer Forced into DevOps

Hey everyone! I've been a front-end developer for 11 years, and while I've been doing a bit of full-stack work, I've recently been pushed...

How Can Beginners Start Earning Money with Programming?

Hey everyone! I've recently jumped into the world of programming, and it's quite a shift from my previous field. I've always been interested in...

Why Can’t My Parents’ Old LCD TVs Play Movies from USB?

I'm trying to get some movies into a USB drive to share with my parents, but they have older LCD TVs that aren't smart...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Erase Gemini Nano Banana Watermark

Below is a simple content eraser tool. It works very similar to the content aware fill tool that is used in Photoshop. You can...

Keep Your Screen Awake Tool

This simple online stay awake tool prevents your computer screen from going to sleep while you have this page open. It runs entirely in your...

Neural Network Simulation Tool

The Neural Network Visual Builder is an interactive, client-side tool designed to demystify deep learning. It allows users to drag-and-drop neural network layers to...

Ray Trace Simulator – Interactive Optical Ray Tracing Tool

This ray trace simulator lets you visualise how light rays move through an optical system in real time. You can trace beams as they...

Interactive CPU Architecture Simulator

This is an Interactive CPU Architecture Simulator that provides a hands-on, visual learning experience for understanding how a processor executes code. It models a...

AI Image Upscaler

Our AI Image Upscaler allows you to upload any image and instantly increase its resolution using advanced upscaling models. Choose between 2x, 3x or...

Latest Posts

Latest Questions