Make Meta Boxes Great Again
Transcript of Make Meta Boxes Great Again
![Page 1: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/1.jpg)
Make Meta Boxes Great Again
![Page 2: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/2.jpg)
![Page 3: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/3.jpg)
Nate AllenSenior WordPress Engineer at Linchpin
Twitter: ncallenGithub: nate-allen
https://linchpin.agency
![Page 4: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/4.jpg)
Meta Boxes and Custom FieldsWhat’s the difference?
![Page 5: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/5.jpg)
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' );
![Page 6: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/6.jpg)
What are Custom Meta Boxes?
(Way more code than the basic example!)
![Page 7: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/7.jpg)
What are Custom Fields?Custom fields are a feature built into WordPress
(Field names starting with an underscore don’t show up here)
![Page 8: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/8.jpg)
There has to be a better way...
![Page 9: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/9.jpg)
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
![Page 10: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/10.jpg)
Advanced Custom Fields CMB2
![Page 11: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/11.jpg)
Advanced Custom Fields:Easily create beautiful and powerful UI for entering custom field data
![Page 12: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/12.jpg)
TextTextareaCheckboxRadio ButtonSelectTrue / FalseFileImageoEmbedWysiwyg Editor
RepeaterGalleryFlexible ContentCloneOptions Page
Color PickerDate PickerDate Time PickerGoogle MapTime PickerTabPage LinkPost ObjectRelationshipTaxonomy
Free Pro
![Page 13: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/13.jpg)
Repeater FieldThe 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.
![Page 14: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/14.jpg)
![Page 15: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/15.jpg)
![Page 16: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/16.jpg)
![Page 17: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/17.jpg)
Flexible Content FieldSimilar 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.
![Page 18: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/18.jpg)
My Personal Philosophy:Give clients flexibility without too much freedom
![Page 19: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/19.jpg)
![Page 20: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/20.jpg)
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
![Page 21: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/21.jpg)
ACF is Great! But...
![Page 22: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/22.jpg)
1. It’s not easy to version control...
![Page 23: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/23.jpg)
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!
![Page 24: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/24.jpg)
2. Your clients can (and will) mess with the field settings!
![Page 25: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/25.jpg)
You have a couple options...
![Page 26: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/26.jpg)
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.
![Page 27: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/27.jpg)
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.
![Page 28: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/28.jpg)
3. ACF Causes front end dependency issues...
![Page 29: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/29.jpg)
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.
![Page 30: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/30.jpg)
4. You can’t include ACF Pro in your free themes and plugins...
![Page 31: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/31.jpg)
Introducing: CMB2
![Page 32: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/32.jpg)
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!
![Page 33: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/33.jpg)
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
) );
![Page 34: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/34.jpg)
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',
) );
![Page 35: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/35.jpg)
Results in this...
More info about CMB2 here: https://github.com/WebDevStudios/CMB2
![Page 36: Make Meta Boxes Great Again](https://reader035.fdocuments.us/reader035/viewer/2022062316/58ea790a1a28ab0c0b8b50c1/html5/thumbnails/36.jpg)
Any questions?