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.
This is great!!! Thank you!
Does this work on 3.0? I just tried this and the fields don’t show up in the meta boxes
Terry, I’ve developed it using the latest nightly build of 3.0 and all works OK for me. Make sure that you are using the correct path to the meta box template file (that has the contents of the meta box).
I started using the class in one of my projects today and I’ve got a few updates to release. I’ll have it updated soon.
Dimas, first of all, thanks for your tutorials about wp metaboxes.
I have started using your class and any future updates are more than welcome.
The Meta Box block “My Custom Custom Meta” is there but none of the fields show up?
There must be something I’m missing…
I’ll guess i’ll give this a try when they release 3.0 and see if I have some luck
Terry, are you getting any errors?
Make sure that you are targeting the include file correctly, set this to the path of your
meta.phpinclude file:Also, this class should work with the most recent releases of wordpress as well (I’ve tested it on 2.9.2).
Hi. I was able to make this to work on a regular post. Apparently when I use it on a custom post_type, in admin panel everything seems fine. I can see the custom fields but not showing when pulled-up on the site. I use the same code in my theme template.
Hi again Dimas – I love that you’re continuously improving upon this code! Awesome : )
Although there is an issue – this code can’t be used if your host is running PHP4. I know everyone SHOULD be using PHP5, but for those clients out there who don’t know any better, is there a way to make this compatible with both versions of PHP?
And just for the record, here’s the error:
PHP Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’
Thanks a lot man, and keep up the awesome work.
Tom, I’ve updated the demo file with a PHP4 version of the class, give it a try and let me know if it works or not.
Dimas,
I was foolish last night and upgraded my PHP version – I actually had no idea I was running PHP4 until I tried to implement this – so I can’t even test the fix : (
Does the fix recognize the PHP version and output the necessary code?
Tom, In the WPAlchemy folder you will see two files:
MetaBox.phpandMetaBox.php4If you are using PHP5 you should use the default
MetaBox.phpfile.If you are using PHP4 you should rename
MetaBox.php4toMetaBox.phpand use it instead of the original.Dimas – I see now : )
Is there a way to make it more user friendly so if it’s implemented in a theme that someone has, and they have no idea how to deal with all the code, that it’s just done for them?
I’m thinking like a “if php4 display: this, else, display: this” type of thing?
Something like this –
if (version_compare(PHP_VERSION, ‘5.0.0’, ‘<')) {
include_once 'meta.php4';
} else {
include_once 'meta.php'; }
I wish I didn't upgrade my php version, now I can't test to see if it works! lol
Check out: http://farinspace.com/2009/06/running-php4-and-php5-in-parallel-the-easy-way/ … you might be able to run both PHP4 and PHP5
Tom, I’ll probably just use the PHP4 version as the main release … WordPress currently is still compatible with PHP4, so there will definitely be users using PHP4, plus considering developers will be using this code to create plugins/themes, making it PHP4 compatible will allow developers to use it in a wider range of projects.
Thanks for the link about running both – the whole server side of websites is an area I need to study more.
Sounds good to me – I’m not much a PHP guy yet, but noticed the main difference was that the php5 version had “protected” and “private”, while the php4 version is using “var”.
What are the advantages to the php5 way?
Back again – I know.
So I’ve been dissecting and really enjoying your code – especially the loops where it adds fields for you on save. Is there an easy to way to implement jquery to add more fields on the click of a link, instead of having to save each time?
Thanks!
Also, is there anywhere I can buy you a coffee/beer?
Tom, I’m glade you are enjoying the code … and I like that you are taking things to the next step. I am actually working on a new article which does just what you are describing, it uses a little bit of jQuery to automatically add fields (multiple fields at once vs the “and_one” concept I’ve got going).
Can’t wait! Very interested in seeing how it works : )
Dimas,
Once again you are the man! AWESOME code, works like a charm.
I second the coffee/beer idea from Tom.
This is very nice indeed. I was just stepping into add_meta_box() functions and found this lib.
Good code.
To those who have been following this post, I’ve updated the helper with some exclude/include options, see the documentation above for more details …
Very interesting! Thanks, Dimas!
To those who have been following this post, I’ve moved the bulk of the documentation to its own page, as I release new features I will be creating new posts to keep everyone update (like v1.1 Filtering and Repeating Fields).
Hi Dimas
This is a great PHP class – and yes it does work well with WP3.0 as you say/state. I only have one question/problem.
In one of my meta boxes I need to use a custom WP loop query to create a dropdown of WP post titles belonging to a specific custom-post type.
When ever I add/update a post with this dropdown the class always adds an additional “option” field to the output. e.g.:
a:1:{s:4:"docs";a:3:{i:0;a:2:{s:8:"products";s:3:"131";s:10:"productqty";s:3:"342";}i:1;a:2:{s:8:"products";s:3:"140";s:10:"productqty";s:4:"3254";}i:2;a:1:{s:8:"products";s:3:"131";}}}which should acually be
a:1:{s:4:"docs";a:3:{i:0;a:2:{s:8:"products";s:3:"131";s:10:"productqty";s:3:"342";}}}In other words it always adds/appends the first select option of the custom query at the end of the update. Any ides/suggestions please. fyi here is “my code”
get_results($querystr, OBJECT); ?> <?php foreach ($pageposts as $post): $postoptions .='ID.'">'.$post->post_title.''; endforeach; ?> have_fields_and_multi('docs')): ?> the_group_open(); ?> the_field('products'); ?> <select name="the_name(); ?>"> the_field('productqty'); ?> <input type="text" name="the_name(); ?>" value="the_value(); ?>" /> <a href="#" rel="nofollow">Remove Document</a> the_group_close(); ?> <a href="#" rel="nofollow">Add Options</a> - <a href="#" rel="nofollow">Remove All</a>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!
Hello again!
Just wanted to give you props again for this superb solution to meta boxes, and again thank you so much for making this available for the community!!
If you ever happen to be in Sweden, I will buy you all the beer you can drink and show you around town!
Best regards Victor
Hello as they are, I wonder if it is possible to show metaboxes blocks in a form of publication created to run from the front-end and not the administration, meaning that in this form can be shown my mteabox where the user can select or mark the different options.