(Presentation contains animated gifs not supported on SlideShare. View the original here: https://docs.google.com/presentation/d/1bMrLs6iuSd5-g3f4OIbqhuOzKruPlET1MJ4lSXy-wjU/edit?usp=sharing) 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

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

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

4. 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' );

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

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

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

8. 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

9. Advanced Custom Fields CMB2

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

11. 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

12. 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.

16. 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.

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

19. 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

20. ACF is Great! But...

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

22. 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!

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

24. You have a couple
options...

25. 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.

26. 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.

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

28. 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.

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

30. Introducing:
CMB2

31. 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!

32. 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
) );

33. 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',
) );

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

35. Any questions?