Make Meta Boxes Great Again

Make Meta Boxes Great Again

Nate AllenSenior WordPress Engineer at Linchpin

Twitter: ncallenGithub: nate-allen

https://linchpin.agency

Meta Boxes and Custom FieldsWhat’s the difference?

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

What are Custom Meta Boxes?

(Way more code than the basic example!)

What are Custom Fields?Custom fields are a feature built into WordPress

(Field names starting with an underscore don’t show up here)

There has to be a better way...

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

Advanced Custom Fields CMB2

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

TextTextareaCheckboxRadio ButtonSelectTrue / FalseFileImageoEmbedWysiwyg Editor

RepeaterGalleryFlexible ContentCloneOptions Page

Color PickerDate PickerDate Time PickerGoogle MapTime PickerTabPage LinkPost ObjectRelationshipTaxonomy

Free Pro

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.

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.

My Personal Philosophy:Give clients flexibility without too much freedom

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

ACF is Great! But...

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

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!

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

You have a couple options...

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.

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.

3. ACF Causes front end dependency issues...

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.

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

Introducing: CMB2

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!

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

) );

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',

) );

Results in this...

More info about CMB2 here: https://github.com/WebDevStudios/CMB2

Any questions?