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') ) {

    $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(
            'name'      => 'Option #1',
            'desc'      => 'This is the description for the first option.',
            'id'        => '_my_option_1',
            'std'       => 'default value for option #1',
            'type'      => 'text'
            'name'      => 'Option #2',
            'desc'      => 'This is the description for the second option.',
            'id'        => '_my_option_2',
            'std'       => 'default value for option #2',
            'type'      => 'textarea'
            '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 );
Note: I named the function containing all of this, my_meta_box(). Instead of “my” at the start, use something specific to you or your brand. Every function you create should always, always be prefixed with something specific that you consistently use with all your functions. If there are ever two functions named the same, among all of WordPress, your plugins, and your theme, you’ll get a fatal error and your website will break. This is a common WordPress best practice.
Note: You’ll notice that I prefixed all of the option ID’s above with _my_. The first underscore makes it so the the metadata value doesn’t show up in WordPress’s default “Custom Fields” meta box. And the following my_ part is always a good practice to make sure your ID doesn’t interfere with metadata of default WordPress or other plugins you’re using. Instead of “my” use something specific to you or your brand.