Meta Boxes: Creating a Custom Meta Box

In using a theme as extendable as Jump Start or any of the other Theme Blvd framework themes, there may come a point where you want to collect data from the user editing pages and posts, beyond WordPress’s basic custom field system. This can be great for enhancing your client’s editing experience for customization you’re making for their specific site.

Using the Theme_Blvd_Meta_Box() class, you can pretty easily create a custom meta box for your edit post screens, for any post type you want. This is great because you can utilize the basic options system already set up in the framework. Also, you don’t have to worry about saving the options and sanitization, as this is all taken care of in the class.

Below is the full code used for the above screenshot. It should get you started, from your child theme functions.php or custom plugin you’re creating. See this article for more information on general options formatting.

/**
 * Create custom meta box for pages and posts.
 */
function my_meta_box() {

    if ( ! class_exists('Theme_Blvd_Meta_Box') ) {
        return;
    }

    $args = array(
        'title' 	=> 'My Meta Box',           // title to show for entire meta box
        'page'		=> array('page', 'post'),   // array of post types
        'context' 	=> 'normal',                // normal, advanced, or side
        'priority'	=> 'high'                   // high, core, default, or low
    );

    $options = array(
        array(
            'name'      => 'Option #1',
            'desc'      => 'This is the description for the first option.',
            'id'        => '_my_option_1',
            'std'       => 'default value for option #1',
            'type'      => 'text'
        ),
        array(
            'name'      => 'Option #2',
            'desc'      => 'This is the description for the second option.',
            'id'        => '_my_option_2',
            'std'       => 'default value for option #2',
            'type'      => 'textarea'
        ),
        array(
            'name'      => 'Option #3',
            'desc'      => 'This is the description for the third option.',
            'id'        => '_my_option_3',
            'std'       => 'default value for option #3',
            'type'      => 'select',
            'options'   => array(
                'thing_1' => 'Thing 1',
                'thing_2' => 'Thing 2',
                'thing_3' => 'Thing 3',
                'thing_4' => 'Thing 4'
            )
        )
    );

    $meta_box = new Theme_Blvd_Meta_Box( 'my_meta_box', $args, $options );

}
add_action('after_setup_theme', 'my_meta_box');

And now the options of your meta box are being saved to the standard metadata system of WordPress based on the ID’s you setup. So, you’d simply use get_post_meta(), on the frontend of your website, as you would with any custom field or metadata value.

$val = get_post_meta( get_the_ID(), '_my_option_1', true );