Meta-box above WordPress editor

Sometimes it makes sense to have a meta box below the title box, but above the text editor. For example when you want a subtitle below the title. Or when the layout of your website has a picture between the title and the content. This was my case for a website I'm building for someone. It took me some googling to find out how to do this for WordPress 4.0 and above...
Thanks Stackexchange.com I found it.

The solution

It's actually very simple. Let's create a metabox first. I pressume you know how to do this. If you don't, there are many tutorials out there, that's how I learned it.
Lets start with the meta box I created for pages:

1 2 3 4 56 7 8 9 1011 12 
function meta_box_picture() {     add_meta_box(     'page-picture-meta-box',      // ID attribute of metabox     'Pagina afbeelding',          // Title of metabox visible to user    'picture_meta_box_callback',  // Function that prints box in wp-admin     'page',                       // Show box for posts, pages, custom, etc.     'up',                         // Where on the page to show the box, change to something other then normal, advanced or side     'high'                        // Priority of box in display order   );} add_action( 'add_meta_boxes', 'meta_box_picture' );

The important part is line 8. This is where you specify where the meta box would render on post.php. You would choose between Normal, Advanced or Side. In this case we make up our own type. I choose Up, seems to make sense for me 🙂

Now WordPress doesn't know where to place a metabox of the type 'up', so let's inform WordPress what to do.

14 15 16 17 1819 20 
function my_upper_meta_box() {     global $post, $wp_meta_boxes;                         // Get the globals   do_meta_boxes( get_current_screen(), 'up', $post );   // Output the "up" meta boxes  } add_action( 'edit_form_after_title', 'my_upper_meta_box' );

After this the meta box of the type 'up' will appear between the title and the TinyMCE editor. And that's all!

The end result

The end result

Ofcourse you still need to write the code of the content and saving action of the meta box, but if you don't know how to do this it's easy to find using google. Maybe one day I'll write my own tutorial about it 😉

 

  • I apologize for my poor English. I should have paid more attention in school...
    If there are any huge mistakes please inform me
  • I've never studied C, Javascript or PHP. Everything I know is learned via youtube and google.
    I realize my code is often unnecessarily long, but I prefer writing it this way so I can still understand myself later on. If there are other mistakes please let me know.