This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.
» Download the CMB Library here
It’s been about six months since my original Custom Metaboxes post announcing the release of this code library for easily creating metaboxes. If you haven’t had a look at it since then, I highly recommend you hop on Github and look at the latest version and the wiki.
Some of the features:
- The ability to create metaboxes with a simple array rather than a ton of code. Compare this tutorial (without our library) to these examples (with our library).
- Choose from 20 included field types, or add your own field types
- You can limit the metabox to specific post types, page template, page IDs, or create your own filter for where it should show up
- This can be used by both themes and plugins. And as long as you initialize it correctly (see bottom of example-functions.php), it can be used by a theme and as many plugins as you like at the same time.
My favorite field types:
- WYSIWYG. If you’re using WordPress 3.3, this will automatically use the new wp_editor which gives you a ton of flexibility.
- Taxonomy field types (select, radio, multicheck). If you’re dealing with a lot of taxonomies, the default metabox provided by WordPress takes up a lot of screen real estate. Include taxonomies in your custom metabox instead. Using select or radio is also a great way to force users to only select one taxonomy term.
- File upload. Use the built-in media uploader to allow the user to upload any file they want. You can also store the attachment ID in case you want to retrieve other image sizes.
- Title. If your metabox has a lot of fields in it, use the title field type to create subheadings and instructions.
- Text (standard, medium, and small). This is as simple as it comes, but also the one you’ll use most often.
- text_date_timestamp. This one uses a date picker to let the user select a date, and then saves it as a UNIX timestamp. This is great for event metaboxes because you can then query based on the date.
The contributors of this code library, in no particular order, include: Andrew Norcross, Jared Atchison, Travis Smith, Randy Hoyt, Jeremy Pry, Andrew Ryno, Patrick Forringer, Chris Olbekson, Stefan Crain …and me.
Please use this code, and consider contributing any improvements you make. If you create any field types or show_on filters, post them on the wiki. If you find any bugs, post them in issues (and even better, post the fix!).
Jez says
Looks brilliant Bill, cracking job from all involved.
With such a comprehensive set of options, perhaps it’ll be included in a future of release of WordPress as default?
However, i just did a quick basic install on a 3.3 and got an error…
Parse error: syntax error, unexpected $end in /home/public_html/wpTest/wp-content/themes/testing/meta-boxes/meta-box-text/example-functions.php on line 179
Something i’ve done?
Jez says
Ah its because there are two includes for the init.php in example-functions.php..
Bill Erickson says
Good catch. It looks like there was an issue when we merged trunk with master. It should be fixed now.
Paul says
Cool, thanks for the update, I’m going to try out the WYSIWYG on a client site who needs a 2 column page layout!
Bill Erickson says
There’s two other things you might try depending on your clients needs. If every page will have two columns, you might pre-populate the main editor with two divs, then update the editor stylesheet to visually float them. That way the client can actually see two columns in the editor and put content in them (tutorial).
If you want more flexibility with your layouts and using Genesis, I like to use the genesis column classes along with the Display Posts Shortcode. So I’ll put this in the editor to make two columns:
[div class=”one-half first”] This is the left column [end-div] [div class=”one-half”] Right column [end-div]
Jez says
Can you use that smashing mag tut for adding pre-populated divs to the meta-box WYSIWYG editor, or can you only connect to the main one i wonder?
Bill Erickson says
To be honest I have no idea. I’ve never tried the code in that tutorial, I just have it bookmarked to try in the future. Try it out and post the results!
Paul says
thanks for the suggestions Bill. I did actually try the smashing mag method, but was running into some issues… I’ll have to give it another try. The client is really not web savvy, so I need to make it really easy for them
Paul says
so I added a WYSIWYG to a CPT , but when I try inserting a gallery into the main post WYSIWYG area, it keeps inserting it in the metabox.
can you help?
thanks
Bill Erickson says
You’ll need to upgrade to WordPress 3.3. This is one of the many issues with the previous wysiwyg, and if you’re running 3.3 it automatically uses the new wp_editor function which fixes them all.
Emil says
Great job and definitely time-saver as well! GPL I would imagine?
Cheers,
Emil
Bill Erickson says
Of course!
Emil says
Great, thanks!
Sam says
Hey, this is really great. Just one question…
How do we display chosen options in checkboxes, or radio buttons, on the front end? I searched the wiki and available documentation, but couldn’t find any….
in my single.php template, Ive managed to display information on the front end, using this regular call:
ID, “_cmb_test_textarea”, true); ?>
But this is just simple text area information.
Figuring out how to show Radio button selections, or Check box selection on the front end is whats left. Any directions for where i could find it?
Thanks a bunch.
Bill Erickson says
It’s stored as postmeta like all the other ones. If you have a radio button or checkbox with an id of ‘be_sample’, you could retrieve its value like this:
$value = get_post_meta( $post->ID, 'be_sample', true );Sam says
Hi Bill,
I did try a variation…
ID, '_cmb_test_multicheckbox', true);foreach($value as $value) {
echo ''.$value.'';
}
?>
…and a few others, but i seem to be doing something wrong…
Bill Erickson says
I’m not sure if the code is getting cut off when you post, but this is the second time your code example has been missing this at the beginning:
$value = get_post_meta( $post->.There’s no need for the foreach, just
echo $value;If you run
the_meta();in the loop you’ll be able to see all the post’s metadata to ensure you’re using the right field namesSam says
True, the code gets cut off after I click submit… even when i tried using ‘code’ in arrow-brackets before/after. I’ll use Pastebin.
I’m using your sample cmb code in a test setup.
It works well in wp-admin for entering data, but the content-single.php display on the website is not coming through for:
1. multicheck boxes.
2. its different for radio buttons.
havent tried to display the other field types yet in single.php
For clarity, I’ve pasted the code I’m using in pastebin: http://pastebin.com/zFhHcgay
It would be great to have the correct method for front-end display for each field type on the wiki – after all, the example-functions.php to set up field types is there, it would round it off to have the single.php display code too…
Thanks a bunch for your interest.
Bill Erickson says
Multicheck boxes are stored as an array. Use false as the third parameter of get_post_meta.
In testing this, I found an issue with multicheck boxes. Every time you save the post, the meta is saved again. You end up with an array with lots of values. Until this is fixed (should be soon), use this to get just the unique values: $multicheck = array_unique( $multicheck );
Jez says
Should the WYSIWYG print the content out the front end the exact same way has the default main top WYSIWYG?
As using the current release straight out of the box just prints it as a text block with no p tags etc?
I had enable wpautop for it to even register the p tag…
Might be worth keeping an eye on 🙂
Bill Erickson says
Yes, you need to wrap it in wpautop if you want paragraphs. If you want all the filters that are applied to the content, use:
echo apply_filters( 'the_content', $meta );(assuming you’ve loaded the content into $meta).The main wysiwyg doesn’t actually apply paragraphs, it has wpautop attached to the ‘the_content’ filter. This filter also has do_shortcodes, oembed support…
Dave Gray says
Nice job Bill.
I’m using the library at the moment to create a second editor for right hand column text on a site that I’m working on. I’m using WordPress 3.3.
Code works fine, metabox and editor is created with no problems. However I have an issue when trying to insert an image into a post. I’m left with a blank white overlay window and the image is not inserted into the post.
If I take the code out of functions.php image inserting works again. There are no apparent PHP errors.
Any tips would be great.
Thanks
Bill Erickson says
Can you post this as an issue on the Github page? Also include the code you’re using.
I’ve never had that issue before. I’m using multiple editors on many projects and the image inserting tool works great on all of them.
Geoff says
Nice job!
This has helped me tremendously and has saved so much time. I love how easy it is to use the meta boxes in an individual page templates. So easy and understandable!
My only question is about showing the meta info in the front end for the regular metaboxes. Is there any documentation that shows this? I’ve been trying to display it by using this:
ID, ‘test_metabox’, true ); ?>
and then trying to echo it:
Thanks for all of your help! The plugin is really great!
Bill Erickson says
Here’s the documentation: http://codex.wordpress.org/Function_Reference/get_post_meta
Jon Breitenbucher says
Bill,
I’m running into an issue trying to display taxonomy_multicheck. I know this is stored as an array. When I include the_meta() I see
(code removed, use gist)
Building, Seating, etc are the multicheck fields. What I can’t figure out is why the stored value is not the text of the taxonomy entry and is the numeric value. “48” in building should be “Kauke” and “70” in capacity should be “40 to 50”. If I try to use
(code removed, use gist)
the returned value is Array and doing $project_text[0] will return 70 and not 40 to 50. Either I’m missing something (limited PHP experience, so possible) or the values are not being stored correctly. Thanks.
Bill Erickson says
Yes, it stores those as an array of IDs. As described here, it’s better for data integrity to use IDs than their labels. Use
get_term_by( 'id', $project_text[0], 'seating_capacity' );to get all the labels and other information related to that term.Jon Breitenbucher says
Thanks. What is odd is that the method used in that post works for one taxonomy but not for any of the others. All the taxonomies are being created in exactly the same way. When I use this code the first echo outputs 97 and then the print_r and second echo give no output. the_meta() shows that 97 is correct. I’m at a loss.
Jon Breitenbucher says
The link to the code should be https://gist.github.com/1543014 but it looks like .git got added to the previous comment.
Bill Erickson says
Ah, I think the issue is that it’s stored as a serialized array. Try this (wrapping the get_post_meta with maybe_unserialize): https://gist.github.com/1547439