WordCamp Wilmington:

CMB2: A hitchhiker’s guide to the WordPress galaxy

Related WP Sessions… Session

Demo Github Repo

Swipe to start

http://j.ustin.co/cmb2-hitchhikers-guide

Who am I?

Justin Sternberg:

Partner / Lead Developer at Zao
Lead Developer of CMB2
Husband & dad of 3 kiddos
@jtsternberg on twitter, github, etc

What is CMB2?

The blurb: “CMB2 is a metabox, custom fields, and forms library for WordPress that will blow your mind.”

Handy developer toolkit which can help you quickly get up and running with:

Post/Page/CPT meta boxes
User profile fields
Taxonomy term meta fields
Front-end forms
Options/settings pages
etc

Let’s build our client’s (book) site!

Requirements:

custom homepage settings and output
custom options page for the theme
custom post type for books with custom fields

Requirements (continued):

custom post type for books with custom fields
- custom field for selecting related books
- display fields on single-book.php
front-end submission form for users to submit new books

OUT OF SCOPE!
Requirements (continued… again…):

Genre archive pages featured image

Let’s get started!

Step 1: Add CMB2 as an mu-plugin

Step 2: Add a metabox for the front-page

Step 2-A: Copy example-functions.php to theme includes folder, and include from functions.php.

Step 2: Add a metabox for the front-page

Step 2-B: Remove the types of fields we don’t need right now

Step 2: Add a metabox for the front-page

Step 2-C: Add the front-page condition to the CMB config. (already done in example-functions.php!)

Step 2: Add a metabox for the front-page

Step 2-D: Add the fields we need:

slogan field (wysiwyg)
rotating/random splash image field (file_list)
video embed (oembed)
video description field (textarea)

Step 2: Add a metabox for the front-page

Step 3: Custom front-page template to pull in data with custom functions.

Step 4: Add custom options page for the theme

github.com/WebDevStudios/CMB2-Snippet-Library/blob/master/options-and-settings-pages/theme-options-cmb.php

Step 4-A: Add options page fields:

address field (address)
phone number (text with custom ‘phone’ type attribute)
contact email (text_email)
hours of operation (text_medium with custom placeholder attribute)
footer text title (title)
footer text (wysiwyg)

Step 4: Add custom options page for the theme

Step 4-B: Output those options page fields to the theme

Step 4: Add custom options page for the theme

Step 5: Custom plugin for a books post type with custom fields

codex.wordpress.org/Function_Reference/register_post_type & codex.wordpress.org/Function_Reference/register_taxonomy

Step 5-A: Add the fields/metabox we need to our custom post-type:

genre select (taxonomy_multicheck)
author name (text)
author url (text_url)
submitter name (text)
submitter url (text_url)
related books select (post_search_text)

Step 5: Custom plugin for a books post type with custom fields

Step 5-B: Output those custom post type fields in single-book.php

Step 5: Custom plugin for a books post type with custom fields

Step 6: Custom plugin for a books post type; front-end submission form for users to submit new books

github.com/WebDevStudios/CMB2-Snippet-Library/blob/master/front-end/cmb2-front-end-submit.php

Step 6-A: Add the fields to our front-end submission shortcode form:

book title
book description
same fields from 5-a (but without the related books select field)

Step 6: Custom plugin for a books post type; add front-end submission shortcode

Step 7: OUT OF SCOPE! Genre archive pages featured image

github.com/WebDevStudios/CMB2-Snippet-Library/blob/master/front-end/cmb2-front-end-submit.php

In summary, 42.

Keep going for listings of resources associated with this presentation

Demo Resources:

Other CMB2 Resources:

Goodbye