Custom Meta Boxes in WordPress are a useful feature that allow you to add metadata to your posts. Unfortunately, they are not user-friendly out of the box. In this talk, Nate Allen will show you how to extend the functionality of meta boxes with plugins like Advanced Custom Fields and CMB2. Using real world examples, Nate will demonstrate how he creates powerful (but simple) administration experiences for his clients.

1. Make Meta
Boxes Great Again

3. Nate Allen
Senior WordPress Engineer at Linchpin
Twitter: ncallen
Github: nate-allen
https://linchpin.agency

4. Meta Boxes and Custom Fields
What’s the difference?

5. What are Custom
Meta Boxes?
function meta_box_example() {
add_meta_box(
'meta_box_example',
__( 'I'm a Custom Meta Box',
'meta_box_example' ),
'meta_box_example_html',
'post',
'normal',
'default'
);
}
add_action( 'add_meta_boxes',
'meta_box_example' );

6. What are Custom
Meta Boxes?
(Way more code than the basic
example!)

7. What are Custom
Fields?
Custom fields are a feature built into
WordPress
(Field names starting with an
underscore don’t show up here)

8. There has to be a better
way...

9. Advanced Custom Fields CMB2
Carbon Fields
CustomPress
Custom Field Suite
Easy Custom Fields
Fields FrameworkMeta Box
PapiPods Types
WP MetaboxerPiklist
WordPress Creation Kit
Ultimate CMS
MasterPress
Custom Content Type Manager

10. Advanced Custom Fields CMB2

11. Advanced Custom Fields:
Easily create beautiful and powerful
UI for entering custom field data

12. Text
Textarea
Checkbox
Radio Button
Select
True / False
File
Image
oEmbed
Wysiwyg Editor
Repeater
Gallery
Flexible Content
Clone
Options Page
Color Picker
Date Picker
Date Time Picker
Google Map
Time Picker
Tab
Page Link
Post Object
Relationship
Taxonomy
Free Pro

13. Repeater Field
The repeater field allows you to create a set
of sub fields which can be repeated again and
again.
Any type of field can be added as a sub field.
Great for things like slideshows, portfolios,
testimonials, and more.
Can help eliminate the need for some plugins
and custom post types.

17. Flexible Content Field
Similar to the repeater field, but
instead of 1 set of sub fields, you can
have an infinite set of sub field
groups (layouts).
Allows you to build modular websites
that are flexible, but also consistent.

18. My Personal Philosophy:
Give clients flexibility
without too much freedom

20. Other cool things you can do with ACF
● Extend ACF with your own fields:
https://github.com/elliotcondon/acf-field-type-template
● Add fields to more than just posts: Users, Attachments, Taxonomies,
Comments, and frontend forms.
● Use the built-in filters for more control.
● “Tabs” field allows you to organize fields better

21. ACF is Great! But...

22. 1. It’s not easy to version
control...

23. Save field settings as JSON with ACF Pro!
● Simply create a new folder in your theme and
name it acf-json.
● Each field “group” will save as a separate JSON
file.
● Added benefit… fields load faster in WP-Admin!

24. 2. Your clients can (and will)
mess with the field settings!

25. You have a couple
options...

26. Include the ACF files within your theme/plugin
● Code to do that here:
https://advancedcustomfields.com/resources/including-acf-in-a-plugin-theme
● This WILL cause issues if the client installs ACF...
● You could do a check to see if the plugin is installed first, and not include your
ACF files if it is. But that defeats the purpose.

27. Hide ACF in the admin menu
● Simply add this to your plugin/theme:
add_filter('acf/settings/show_admin', '__return_false');
● Or write a function that only shows it for specific people.

28. 3. ACF Causes front end
dependency issues...

29. ACF encourages you to use its own functions to
retrieve data
● ACF documentation tells you to use get_field, the_field, get_sub_field,
etc
● If you disable the plugin, you will have issues. If you want to move away from
ACF, you will have to refactor.
● Field data can be retrieved with get_post_meta()
● But you will have to do a little more work to get the data in the format you
need.

30. 4. You can’t include ACF Pro
in your free themes and
plugins...

31. Introducing:
CMB2

32. ACF vs CMB2
● Where ACF is user friendly, CMB2 is developer friendly.
● CMB2 is completely free! You can include it in your plugins and themes.
● Has a lot of the same fields as ACF, including a repeater. But no “flexible
content” field.
● Easy version control. Can include with Composer if that’s your thing…
● You use get_post_meta to get data… the way it should be!

33. Example: First, create a meta box...
$cmb = new_cmb2_box( array(
'id' => 'test_metabox',
'title' => __( 'Test Metabox', 'cmb2' ),
'object_types' => array( 'page', ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
'cmb_styles' => false, // false to disable the CMB stylesheet
'closed' => true, // Keep the metabox closed by default
) );

34. Example: Next, add your fields!
$cmb->add_field( array(
'name' => 'Color Picker',
'id' => '_my_prefix_colorpicker',
'type' => 'colorpicker',
'default' => '#ffffff',
) );
$cmb->add_field( array(
'name' => 'oEmbed',
'desc' => 'Enter a youtube, twitter, or instagram URL.',
'id' => '_my_prefix_embed',
'type' => 'oembed',
) );

35. Results in this...
More info about CMB2 here:
https://github.com/WebDevStudios/CMB2

36. Any questions?