Meta Box 4.1.9 Released

Yesterday the new version 4.1.9 of the Meta Box plugin was released. This version includes some interesting changes that I think I should write a post about it.

ⓒ Image credit

New Features

There're 2 big new features in this version: a helper function to retrieve meta value and basic Javascript validation.

Helper Function to retrieve meta value

In previous versions of Meta Box, we have to use get_post_meta to retrieve meta value. The problem is using get_post_meta is not ideal for getting value of complicated fields like file and image. The returned information is lack, only file/image IDs are returned. You need to write custom code to get file/image URL, title, etc.

So, I decided to write a helper function which makes the job much easier. The function looks like this:

rwmb_meta( $key, $args = array(), $post_id = null );

Arguments

• $key is the meta key, i.e. field ID when you registered meta box.
• $args is an array of arguments, or a string in format param=value1&param2=value2. Currently the function supports only 2 arguments:
  • type: field type. It's not neccessary for simple field like text, textarea, select, but for fields with multiple values (such as file, image, checkbox_list) you must identify this argument, or you'll get only the first value.
  • size: image size, used for image only. If not present, the thumbnail size will be used.
• $post_id is the post ID. If not present, current post ID is used.

Returned value

For fields that have single value (text, radio, checkbox, etc.) the function acts exactly like get_post_meta( $post_id, $key, true ). It returns the value of the field.

For fields that have multiple values (checkbox_list) the function acts exactly like get_post_meta( $post_id, $key, false ). It returns an array of values of the field.

For file field, the function returns an array of files, each file has the following infomation:

array(
    'name'  => 'intro.txt',
    'path'  => '/var/www/wp-content/uploads/intro.txt',
    'url'   => 'http://example.com/wp-content/uploads/intro.txt',
    'title' => 'Introduction',
);

Note: Don't forget to specify type=file in $args.

For image field, the function returns an array of images, each image has the following information:

array(
    'name'        => 'logo-150x80.png',
    'path'        => '/var/www/wp-content/uploads/logo-150x80.png',
    'url'         => 'http://example.com/wp-content/uploads/logo-150x80.png',
    'width'       => 150,
    'height'      => 80,
    'full_url'    => 'http://example.com/wp-content/uploads/logo.png',
    'title'       => 'Logo',
    'caption'     => 'Logo caption',
    'description' => 'Used in the header',
    'alt'         => 'Logo ALT text',
)

The information is attached with a specific image size, so don't forget to add size=your_size in $args. Otherwise, you'll get the infomation for thumbnail size.

There's one argument in the returned array that you might be interested in: full_url. It's the URL of full size image (original image). You can use it for lightbox effect or in a slider with thumbnails.

Note: the plupload_image and thickbox_image fields act exactly like image field, so you can write both type=image or type=plupload_image in $args, the function returns the same value.

Example

Display date of birth (date):

echo rwmb_meta( 'dob' );

Display list of interests (checkbox_list):

$interests = rwmb_meta( 'interests', 'type=checkbox_list' );
echo implode( ', ', $interests );

Display links to download uploaded files (file):

$files = rwmb_meta( 'info', 'type=file' );
foreach ( $files as $info )
{
    echo "<a href='{$info['url']}' title='{$info['title']}'>{$info['name']}</a><br />";
}

Display uploaded images in thickbox (image):

$images = rwmb_meta( 'gallery', 'type=image' );
foreach ( $images as $image )
{
    echo "<a href='{$image['full_url']}' title='{$image['title']}' rel='thickbox'><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /></a>";
}

ⓒImage credit

Validation

We're using an excellent jQuery validation library by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit.

Currently, all validation rules are added in a new validation meta-box argument that allows specifying validation rules and messages using jquery.validate syntax (you can see the demo.php file for more details):

$meta_boxes[] = array(
    'title' => 'Survey',
    'fields' => array(
        array(
            'name'      => 'Full name',
            'id'        => "{$prefix}fname",
            'type'      => 'text',
        ),
        array(
            'name'      => 'Password',
            'id'        => "{$prefix}pass",
            'type'      => 'password'
        ),
        array(
            'name'      => 'Confirm your password',
            'id'        => "{$prefix}pass_confirm",
            'type'      => 'password'
        ),
    ),
    'validation' => array(
        'rules' => array(
            // Optionally make post/page title required
            'post_title' => array(
                'required' => true
            ),
            "{$prefix}fname" => array(
                'required' => 'Your name is required'
            ),
            "{$prefix}pass" => array(
                'required' => true,
                'minlength' => 7,
            ),
            "{$prefix}pass_confirm" => array(
                'equalTo' => "{$prefix}pass"
            )
        ),
        // Optional override of default jquery.validate messages
        'messages' => array(
            "{$prefix}fname" => array(
                'required' => 'Your name is required'
            ),
            "{$prefix}pass" => array(
                'required' => 'Password is required',
                'minlength' => 'Password must be at least 7 characters'
            ),
            "{$prefix}pass_confirm" => array(
                'equalTo' => 'Please enter the same password'
            )
        )
    )
);

Note that rules and `messages have the same array keys.

See here for more details on that syntax.

jquery.validate includes the following built-in validation methods.

This feature is credited to Adam Anderly.

Small bugs fixed and improvements

• Bug: image reorder
• Bug: not show loading image for 1st image in plupload
• Bug: fix select_tree option for taxonomy field
• Added demo for better include meta boxes

That's all. If you haven't updated, do it now! Hope you enjoy this version of the Meta Box plugin and I'm open to here your opinions, suggestions. Please discuss in the Support forum.