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.

Meta Box new version Meta Box 4.1.9 Released
ⓒ 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>";
}

Validation Meta Box 4.1.9 Released
ⓒ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.

Bugs Meta Box 4.1.9 Released

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.

67 Comments

  1. Hi,
    Does Metabox support shortcodes?

    I’m trying but it’s displayed without being processed.

    Reply
    • You just need to use: echo do_shortcode( rwmb_meta( ‘field_id’ ) ); That’s all. Think about plain text value as in text widget. Applying “do_shortcode” function solves this problem.

      Reply
  2. Hello,

    i used below code for display image. but not displaying.
    <?php
    $images = rwmb_meta( 'gallery', 'type=image' );
    foreach ( $images as $image )
    {
    echo "“;
    }
    ?>

    Thanks,
    Rakesh

    Reply
    • Please reply me soon. I am confused why this is not working as i have used as this guide. Still not working. :(

      Reply
  3. Validation is not working if meta box is close (toogle collapse)

    Is there a work around?

    Reply
  4. struggling to figure out the thickbox image code:
    $images = rwmb_meta( ‘gallery’, ‘type=image’, $id );
    foreach ( $images as $image )
    {
    echo ““;
    }

    i’m throwing this code in but it’s coming up blank (the old code works, but can’t figure out how to get all of the img attr’s using that). the $id is just grabbing the page id which i think is needed.

    any ideas what im doing wrong?
    dan

    Reply
  5. Hi,

    Is there a possibility to make a list of all pages? So you can choose in the back-end a page to link to in the front-end?

    Thanks.

    Reply
  6. How can i echo what is selected on taxonomy select box ? There is no explanation is docs.

    Reply
  7. Is there a way to check if the option exists with the helper? or does that fall into the validation tree? and if so is there a simple way to do it?

    Reply
    • The helper function is just the wrapper of get_post_meta, so to check the option (I understand that’s the meta key, right?) exists, you should check the returned value (empty or not).

      Reply
  8. I am new to wp so please remember hwo it was when you were new. I have downloaded your metabox 4.1.9 plugin to use with my custom post types. I followed the readme for demo.php and I see your metaboxes showing on new ‘post’ and saving data on the admin page. Great. But how do I get the demo.php code to work with a custom post type? I thought that if I added my CPT name to the ‘pages’ parm in $meta_boxes in demo.php, that those metaboxes would show up on my CPT. They do not show on the admin page for the CPT. If I can get your demo metaboxes working on a simple CPT then I can move forward.

    Thank you very much,
    Ron

    Reply
  9. I have this meta field

    array(
    ‘name’ => ‘Select School / Instituion’,
    ‘id’ => $prefix . ‘school’,
    ‘desc’ => ‘Select School / Instituion to display faculty and rankers of institute. Only supported for Single Institution template.’,
    ‘type’ => ‘taxonomy’,
    ‘options’ => array(‘taxonomy’ => ‘school’, ‘type’ => ‘select’, ),
    ),

    This giving me Null out put :

    $EDU_school=get_post_meta( get_the_ID(), ‘EDU_school’ );
    print_r( $EDU_school);

    Reply
  10. Dear Rilwis,

    I want to assign my metaboxes to a specific template when editing or creating a page.

    Now I walk in the a really odd problem. The image upload and delete function from the metabox arre broken with the following code : http://pastebin.com/0PqDxmhn
    I think it has something to do with the get_post_meta() function.

    This is the code for the metabox image upload.
    // IMAGE UPLOAD
    array(
    ‘name’ => ‘Foto’,
    ‘desc’ => ‘Foto on the left side’,
    ‘id’ => “{$prefix}foto”,
    ‘type’ => ‘plupload_image’,
    ‘max_file_uploads’ => 1
    ),

    I hope you have an idea where the sources may be of this because I am really stuck.
    regards,

    Tim

    Reply
    • There’s a demo in ‘demo’ folder for this purpose. Many people are looking for a solution while it’s right here for you!

      Reply
      • okay, I looked over that one and I got it working.

        Thanks again mate

        Reply
  11. Great plugin but the validation doesn’t work for me, I’m using wordpress version 3.3.1
    Can you please tell me how can I debug this?

    Reply
  12. Hello rilwis,

    Thanks for the amazing free metabox plugin.

    But I can’t display my uploaded images with the following code :

    $images = rwmb_meta( ‘gallery’, ‘type=image’ );
    foreach ( $images as $image )
    {
    echo ““;
    }

    I assume that all the images from my gallery will be displayed on my page, but I see nothing.
    I only got this problem with images, the other stuff from the metaboxes like the date of birth or a piece of text work.

    Do you have any idea what the cause of this may be?
    Maby you can point me in the right direction.

    Regards,

    Tim

    Reply
    • A piece of the code missed at the above comment


      $images = rwmb_meta( 'gallery', 'type=image' );
      foreach ( $images as $image )
      {
      echo "";
      }

      Reply
      • If so, I think the images haven’t uploaded. Are you using ‘image’ type or ‘plupload_image’? If you’re using ‘plupload_image’, did you see uploaded thumbnails after you selected files?

        Reply
        • Yes it is finally working :). Okay I think plupload_image was the key here. ‘image’ did not seem to work for me for some reason.

          Apologies for the inconvenience and thanks for the help,

          regards,

          Tim

  13. “checkbox_list” wont work with multiple value. It only selects last checkbox value. Why i cant select all? For example: Custom Field: user-spec
    Value1: Tall
    Value2: Blonde
    Value3: Black
    Value4: Fat
    Value5: Slim

    I want to select 1,3,5 but “checkbox_list” feature selects only “value5: slim” how can i fix it?

    Reply
    • Yes i used. Demo wont work too. If you try to select all values in checkbox_list and save post. You may see this feature only selects last value.

      Mine:

      array(
      'name' => 'Ozel üye',
      'id' => 'ozel-uye',
      'type' => 'checkbox_list',
      'options' => array(
      'manset' => 'Manset',
      'vitrin' => 'Vitrin',
      ),
      ),

      And is it possible to add image upload feature with image link option? I just dont need image attachment id.

      Reply
    • That’s strange because it works in my installation. Can you post your code that used to retrieve value?

      Reply
    • Please post code on site like pastebin.com and post your link here. Code isn’t well formatted in the comment.

      Reply
      • I didnt understand to you. I said everything about this subject. select and checkbox_list feature doesn’t selects all values, only applies last element. if i add manual i mean without rw meta box (wp custom field section) and saving post, then rw removes all values except last value.

        Reply
      • No, the code you posted is used to register meta box. I want to see the code used to retrieve meta value, which is similar to `rwmb_meta( ‘field_id’, ‘type=checkbox_list’ )`.

        Reply
      • its array. its correct. but something going wrong with in admin section. i’m on local host with xampp in w7. i have no plugin. no wp core editing…

        Reply
  14. Nothing to add to this conversation, except a big thank you for the great plugin. I really like how it’s built and I think it should be included in the WordPress source by default.

    Reply
  15. hi,

    First of all awesome code, and very easy to work with.

    Everything works perfectly although i’m having a problem displaying an uploaded image.

    <a href="”>
    <?php echo "“; ?>

    It does display all the image information perfectly but the size is wrong, it’s a thumbnail 150×150.
    Where should i add the image size attribute, and could you give me an example.

    I already tried:

    Thanks again!

    Reply
    • You could do something like this:

      $files = rwmb_meta( ‘info’, ‘type=file&size=my_image_size’ );

      where content-product is:

      add_image_size( ‘my_image_size’, 110, 110, true );

      Reply
      • Just copied and pasted this from a live example…

        ‘content-product’ should be ‘my_image_size’.

        Reply
  16. How do you display just attached images by their name, no link just the name of the image?

    Reply
  17. Firstly, this is a really cool plug-in. My new favourite.
    Okay so sorry if this sounds daft but i’d like to register one or more meta boxes for one page template and one or more other meta boxes for a different page template.

    Of course it’s possible to assign different meta boxes to different post types but my content is all ‘pages’ with differing page templates used instead. I’ve looked at the ‘include by ID or page template’ info and was subsequently able to register all of my meta boxes for one or more of my listed page template. However, i can’t work out how to put a specific meta box(s) on a specific page template(s) … ifthatmakessense!
    is there something I’m missing?

    Many thanks for any enlightenment you can offer.

    Reply
    • look in the demo folder for the plugin. The file you want to view is include-by-ID-or-page-template.php. This demo will show you how to only include the meta boxes the way you want.

      Reply
      • Thanks for that but i did look and cannot see a way to do this – my php skills are weak. I see it’s possible to register all my meta boxes for a page template(s) but i don’t know how to assign specific meta boxes to specific page templates. Would i have to write a new php argument?

        Reply
  18. Hello,
    I have some trouble.
    1. If image name have cyrillic symbols the image is no visible.
    2. How i can disable “add new image” button? Need only one field for image upload. If image uploaded , upload field must be disabled or hidden and visible if I delete image.

    Thanks

    Reply
    • Hi, I’ll checkout the problem with image name. The 2nd featured hasn’t been implemented, so you’ll have to wait.

      Reply
  19. Hi, first of all, thanks for this awesome plugin. However, I find out the validation doesn’t work.
    Besides define the validation rules in the meta box, do I need to add other things to the custom field? Because as I know the validation library look for the ‘requried’ class in order to work. But I didn’t see the ‘required’ class added in the custom field form input in the page source. Maybe that’s why my validation didn’t work.

    Maybe I am wrong, maybe you use other way to implement the validation library. But I couldn’t figure it out why it doesn’t working in my site.

    Thanks.

    Reply
  20. Hi,

    great plugin! great job!
    i keep getting one request here: when adding a “file” type to a metabox, an extra field for “title” of this uploaded file.
    Then we can use the title in the front end.
    A title for a file gives more control over its appearance. (some file names are long and boring and ugly… )

    Or can i add this myself?

    cheers!

    Reply
    • You can change the file name in Media Library. The plugin currently doesn’t support for changing file title.

      Reply
  21. How using this system could you filter content based on the radio button selection..?

    I would normally use something like this..

    Reply

Leave a Reply