How to have a Meta Box appear before the Visual Editor

I am working on a new theme where I have defined a Custom Post Type.  This is my first time working with Custom Post Types and I must say they are pretty slick.  I wish they had existed back when I first started working on my Swim Team plugin!  I have far too much invested in my Swim Team plugin so I’ll stick with the custom database tables but for this new project, CPTs are working great.

Once I got my CPT defined and basically working, I wanted to add some custom fields to it using a Meta Box.  There are numerous articles that outline how to do it, I referenced this one quite a bit and found it very helpful.  In my instance, the Meta Box that holds all of the custom fields I want to collect is more important that the Visual Editor is so I wanted it to appear higher on the screen.

After poking through the Codex and number of Google searches, it appears that doing what I want to do isn’t native WordPress functionality.  I did however find this post which outlines an idea for moving the Meta Box so it appears on top of the Visual Editor.  Awesome.  Exactly what I was looking for. Except the code fragment didn’t work.  After looking at it, I decided the idea was sound but the implementation wasn’t correct or at least wasn’t correct in my application.

I tweaked the Javascript to make sure the document was ready before rearranging the Meta Box and Visual Editor and got the result I was looking for.  Here is the code I am using in my functions.php file.

/**
 * Set up a footer hook to rearrange the post editing screen
 * for the 'CPT' custom post type.  The meta box which has all
 * of the custom fields in it will appear before the Visual Editor.
 * This is accomplished using a simple jQuery script once the
 * document is loaded.
 */
function CPT_admin_footer_hook()
{
    global $post ;

    if (get_post_type($post) == 'CPT')
    {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#normal-sortables').insertBefore('#postdivrich') ;
    }) ;
</script>

<?php
    }
}

/**  Hook into the Admin Footer */
add_action('admin_footer','CPT_admin_footer_hook');

One thought on “How to have a Meta Box appear before the Visual Editor

Leave a Reply to a friend Cancel reply