This WordPress helper will let you create Meta Boxes fast with the flexibility you need as a developer. Full documentation walks you step-by-step. Create custom WordPress Meta Box UI elements for your projects with ease.
My wordpress meta box creation code is progressing and I would like to share my latest rendition with you. If you haven’t been following the series of articles about custom wordpress meta box creation and manipulation thus far, take a little bit of time and review (but come back to this page, as this is the latest and greatest code base):
- How to Create A Custom WordPress Meta Box Instead of Using WordPress Custom Fields
- How to Limit the Display of a WordPress Meta Box
- How to Keep the Custom Fields Area Uncluttered When Using a WordPress Meta Box
I hope you’ve been learning along with me and creating some nice UI elements in WordPress for yourself and your clients. This article should take your code to the next level.
Making WordPress MetaBox Creation Easier
WordPress makes it really easy to make tweaks pretty much anywhere you want. However, unlike some methods in wordpress, creating a meta box gets a little bit more involved. This helper class is an effort to try to simplify the creation of your meta boxes. Lets dive right into the code:
You would do the following in your functions.php file:
include_once 'WPAlchemy/MetaBox.php';
// include css to help style our custom meta boxes
if (is_admin()) wp_enqueue_style('custom_meta_css',TEMPLATEPATH . '/custom/meta.css');
$custom_metabox = new WPAlchemy_MetaBox(array
(
'id' => '_custom_meta', // underscore prefix hides fields from the custom fields area
'title' => 'My Custom Meta',
'template' => TEMPLATEPATH . '/custom/meta.php'
));
// add a second custom meta box
new WPAlchemy_MetaBox(array
(
'id' => '_custom_meta2',
'title' => 'My Custom Meta #2',
'types' => array('page','events'), // added only for pages and to custom post type "events"
'context' => 'normal', // same as above, defaults to "normal"
'priority' => 'high', // same as above, defaults to "high"
'template' => TEMPLATEPATH . '/custom/meta2.php'
));
Thats it! The above code shows the basic definition needed to setup a custom meta box (or more than one if needed).
Read the Documentation and Download
The WPAlchemy_MetaBox PHP class is fully documented and the latest version can be downloaded from GitHub.
Fantastic class. Thank you so much for sharing this. My one suggestion would address the issue I have been struggling with this morning. I think adding in a method to use the existing media library to insert image URL’s directly into a MetaBox field would be incredibly useful. For me, the beauty of using the custom MetaBox is reducing the number of steps a user needs to take in order to generate pre-formatted content.
I am presently building a MetaBox to add a product to a page. This requires a couple of fields, including on that takes an image url. A simple way to launch the media uploader/library to select an image and insert into this field would be brilliant.
If you have any suggestions on how I could do this in the meantime it would be greatly appreciated. Thanks again!
Hey!
That’s really a useful contribution. Does it work on WP 3.0 fully? I read comments that there were some issues.
Did you roll out the updates for WP 3.0?
And also please turn on the dates of comment to show up, it makes life easy to read when the comment was actually written.
Thanks!
Já estou testando seu trabalho, eu estou construindo um tema padrão e criando bibliotecas para re-uso nos projetos, e seu trabalho irá somar muito
Uma consideração, em vez de usar:
$_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyten/custom/meta.php'ficaria mais fácil para re-uso, assim:
STYLESHEETPATH. '/custom/meta.php'
Thanks for the tips, I would probably recommend using (I’ll update the above):
TEMPLATEPATH . '/custom/meta.php'I just wrote a comment above this one asking you something and you ignored it.
Should work with WP 3.0 fine, do have a look at the full documentation for features, if you do decide to give it a spin, let me know what you think and report any problems or ideas you may have … (I’ll consider dates, doing an SEO test)
Great! I will let you know how well it goes.
Just wanted to leave a big THANKS from Portugal. Ive used the class and it saved me a ton of time! It worked flawlessly for me, once again thanks a lot!
When I downloaded the latest version of wp alchemy there wasnt a meta.php but a meta2.php which was only 8 bites large and contained the word CONTENT. Is this something new? Trying to get this to take with wp3 and thesis.
Just to update I am following through http://farinspace.com/multiple-wordpress-wysiwyg-visual-editors/ and the meta box appears but isnt editable and has CONTENT printed inside it. But no wysiwyg. Any ideas where I am going wrong?
@David, basically the example
meta2.phpis just filler CONTENT, you would create the contents of your meta box in that file. If you haven’t already, checkout the documentation page on WPAlchemy Meta Box and review some of the comments, you will find tones of great info.In the WYSIWYG article in the “The Magic” section, that is the content that would go in
meta2.phpormeta.phpor what ever you want to call it.There are also some great comments in the WSIWYG article. Hopefully soon I will have some time to do a follow-up/revision to it.
Hi Dimas,
Thanks for that, I got it working, though having a couple of issues with displaying the results of both meta and meta2, for now I am using multiple fields within one meta, that will still allow me the flexibility to show these fields individually I presume.
I have been going through the docs etc and its starting to make more sense as I refer to that then comment discussions. My idea for using this is to allow a 1, 2 and 3 column template in wp/thesis and use these new fields as sidebar 1 sidebar 2 and sidebar 3 to let the user control their sidebar content sitewide and on all pages, posts etc using the default the sidebar will fall back on the widgets page sidebar content. Wish me luck
and keep up the good work, will let you know how I get on with the template side of things. Im considering seeing if I can create a widget that calls your chosen meta field, and then register some new sidebars and have a widget pull this meta info. Any thoughts?
Have a good weekend.
David, sounds really great.
One area I want to build out is being able to have admin menus, so that you could create custom left menus which would store site wide data (In development).
Another suggestion would be for you to use a “custom post type”, essentially you can consider a custom post type as a group+items. So in your case you would create a custom post type called “Sidebars”:
add_action('init','init_hook'); function init_hook() { register_post_type('sidebar', array ( 'labels' => array ( 'name' => _x('Sidebars', 'post type general name'), 'singular_name' => _x('Sidebar', 'post type singular name'), 'add_new' => _x('Add New', 'sidebar'), 'add_new_item' => __('Add New Sidebar'), 'edit_item' => __('Edit Sidebar'), 'new_item' => __('New Sidebar'), 'view_item' => __('View Sidebar'), 'search_items' => __('Search Sidebars'), 'not_found' => __('No sidebars found'), 'not_found_in_trash' => __('No sidebars found in Trash'), 'parent_item_colon' => '', ), 'public' => TRUE, 'rewrite' => array('slug'=>'sidebars'), 'capability_type' => 'post', 'hierarchical' => TRUE, 'supports' => array ( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields', 'comments', 'revisions', 'page-attributes', ), 'menu_position' => 21, )); }You could then create specific meta boxes that appear only in the sidebar custom post type and then use WordPress’ default functions to get the available sidebars and put them in your templates.
In your meta boxes you could have fields for limiting sidebars by category, by page, etc. And in your template you would get all these values and be able to display the sidebars accordingly.
Eventually I’d like to write more about this topic as it is really powerful.
Thanks for your suggestion. I would personally try that, but I feel for the client they will want to just use pages to help them understand the process better.
What I did have in mind was to have the 3 additional meta boxes available and have page templates selectable from the edit page screen sidebar that would list
Default (show default sidebar 1 accessed on widgets page)
1 Custom Sidebar (Show the meta content of extracontent1 in a new sidebar)
2 Custom Sidebars (Show the meta from extracontent2 and 3)
What I was going to do then was create some new widgetized areas and call them custom sidebar 1, custom sidebar 2, and custom sidebar 3, adding widgets or shortcodes to each so they display the content of the above.
I really want to explore more with custom post types and have another project where I am using them but still finding a few things a little fiddly. Any thoughts on the media buttons and your preferred approach Dimas?
Hope your well. Love the script, this has so much potential to open wordpress up.
Hey how do I actually display the custom meta boxes in the posts?
Vadim, take a look at the documentation page, there is some info about using the values in your templates.
Can this class be used with Thesis theme?
I use it with Thesis Kevin. FYI.
Hi,How to limit meta box display rely on post format?By the way i’v used the way you had mentioned for custom template but it didn’t work .
Hi,
I think something is missing. I’ve tried to make things work but the data just not saved.
wpalchemy is in wp-content.
I got the custom folder set with meta.php and meta.css.
I got the metaboxes folder with all files.
Here’s my code (functions.php):
include_once 'metaboxes/setup.php';
include_once 'metaboxes/simple-spec.php';
include_once 'metaboxes/full-spec.php';
include_once 'metaboxes/checkbox-spec.php';
include_once 'metaboxes/radio-spec.php';
include_once 'metaboxes/select-spec.php';
$custom_metabox = new WPAlchemy_MetaBox(array
(
'id' => '_custom_meta', // underscore prefix hides fields from the custom fields area
'title' => 'My Custom Meta',
'template' => TEMPLATEPATH . '/custom/meta.php'
));
so the meta box appears perferctly but the data is not saved.
I tried it all over again, but it didn’t help.
Any idea ?
Ignore the above.
I found what went wrong.
I had to use the metaboxes folder in order to create a new metabox.
Cheers ! wonderful class
Okay this may be the dumbest question on earth but I’d rather be dumb for 5 minutes than for an eternity, but wtf is a meta box?
Sorry for the dumb question but I am kind of in need for some custom variables and mixture of excerpts so that my client can manipulate the jQuery, etc.
@Marco, checkout the WPAlchemy install and setup video, play from timestamp 6:50
Hi everyone. I purchased a theme from Themforest.
Can you… or do you know of anyone that could add a “Create a new Sidebar for this page?” in the “Product Metaboxes” section? Exactly what you typically have in the “Pages Metaboxes”. I will obviously pay as i know this is completely custom work. I can pay with PayPal.
Thank you kindly my friend!