Adding metaboxes to post types

WordPress allows additional information to be input along with the posts. These additional information is entered through metaboxes. Metaboxes can be either simple textbox, listbox, or upload button or any other form element. For example a property description needs a contact details to be entered for each property listed. Creation of metaboxes has the following steps.

Create the custom post type

Custom post type can be set up using the register_post_type() function. This can be setup in your custom plugin file or in your functions.php in your custom theme. Following example shows how to setup a custom post type called Property

 

function searchin_property_posttype() {
    register_post_type('property', array(
        'lables' => array(
            'name' => 'Properties',
            'singular_name' => 'property',
        ),
        'supports' => array('title', 'editor', 'thumbnail'),
        'public' => true,
        'rewrite' => array('slug' => 'property'),
        'register_meta_box_cb' => 'searchin_property_metaboxes',
    ));
}

add_action('init', 'searchin_property_posttype');

The above code registers a new post type called “Property” into the WordPress. The line to display metaboxes for custom post type is register_meta_box_cb. This callback function will call the ‘searchin_property_metaboxes’ to create metaboxes. You can also use add_meta_boxes action hook to register metaboxes too. This can be done in two ways. You can use this action hook for a specific post type by ‘add_meta_boxes-{post-type}’ action hook. Following are the ways to register meta boxes for an existing post type.

//Action hook to register metaboxes for specific post type property
add_action('add_meta_boxes_property', 'searchin_property_metaboxes');

//Action hook to register metaboxes for post types
add_action('add_meta_boxes','searchin_property_metaboxes');

 Create metaboxes

The following code in callback function will register individual metaboxes for our custom post type.

//Registers individual meta boxes for custom post type

function searchin_property_metaboxes($post) {
    add_meta_box('property-contact', 'Contact', 'searchin_property_contact_meta', 'property', 'side', 'default');
    add_meta_box('property-price', 'Price', 'searchin_property_price_meta', 'property', 'normal', 'default');
}

Individual meta boxes are registered with add_meta_box() function. It takes following parameters

• $id – The class id of the html element that displays metabox
• $title – The title for metabox in the post edit screen.
• $callback – Callback function to display metabox input element.
• $screen – The type of writing screen where custom metabox should be created. For custom post types, just write the custom post type slug.
• $context – The context in which the meta boxes are displayed. It could be either in side or normal or advanced
• $priority – The priority in which the meta box is shown. It could be high, default or low.
• $callback_args – Any arguments that can be passed to callback function.

Generate HTML for the registered meta box.

The HTML for the registered metabox can be created using the callback function. The callback function will output the metabox HTML. Following code will define how to create HTML for registered metabox.

function searchin_property_contact_meta() {
    global $post;

    //Nonce to verify the data
    echo '<input type="hidden" '
    . 'name="property_meta_noncename" '
    . 'id="property_meta_noncename" '
    . 'value = "' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';

    //Get the contact data if it is already written
    $contact = get_post_meta($post->ID, '_contact', true);

    //Output the field

    echo '<input type = "text" name="_contact" value="' .
    $contact . '" class = "property-contact" ';
}

This will display metabox when you are editing or creating a new post in your editing screen.

Saving the custom data in meta boxes

We need to use the action save_post to define a callback function which saves our custom data. The following example shows how to save data in custom metabox.

// Action hook to save the post meta data
add_action('save_post', 'searchin_save_property_meta', 1, 2);

function searchin_save_property_meta($post_id, $post) {

    //Verify it came from proper authorization. 
    if (!wp_verify_nonce($_POST['property_meta_noncename'], plugin_basename(__FILE__))) {
        return $post->ID;
    }

    //Check if the current user can edit the post
    if (!current_user_can('edit_post', $post->ID)) {
        return $post->ID;
    }

    //Add values to custom fields
    $property_meta['_contact'] = $_POST['_contact'];

    //Add values to custom fields
    foreach ($property_meta as $key => $value) {
        if ($post->post_type == "revision")
            return;
        $value = implode(',', (array) $value);

        if (get_post_meta($post->ID, $key, FALSE)) {
            update_post_meta($post->ID, $key, $value);
        } else {
            add_post_meta($post->ID, $key, $value);
        }
        if (!$value) {
            delete_post_meta($post->ID, $key);
        }
    }
}

 

Display the metabox information in the template.

To display the metadata stored using metabox , we need to retrieve it using the post data. Later it can be displayed in the template. Following is a example to display metadata in a template file.

<?php echo get_post_meta($post->ID, "_contact", true); ?>

Metaboxes allow WordPress to be a CMS that can handle different kinds of data. Metaboxes really extend the functionality of WordPress to handle complex data. If you want to deal with lots of data, then the use of metaboxes is highly encouraged.