<!DOCTYPE html>
<html lang="en" id="storyftw-story">
<head>
  <meta charset="utf-8">
  <title>CMB2: The Metabox Strikes Back</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <style>
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);

.sw-wrap {
	display: none;
}
.story-page.active .sw-wrap {
	display: block;
	width: 100%;
	height: 100%;
	font: 700 2em "News Cycle", sans-serif;
	font-weight: 700;
	color: #ff6;
	overflow: hidden;
}


.story-page.active .sw-title-content {
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 100s linear 1.25s infinite;
	-moz-animation: scroll 100s linear 1.25s infinite;
	-ms-animation: scroll 100s linear 1.25s infinite;
	-o-animation: scroll 100s linear 1.25s infinite;
	animation: scroll 100s linear 1.25s infinite;
}

.story-page.active .sw-intro {
	position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color: #4ee;
	z-index: 1;
	opacity: 0;
	-webkit-animation: intro 3s ease-out;
	-moz-animation: intro 3s ease-out;
	-ms-animation: intro 3s ease-out;
	-o-animation: intro 3s ease-out;
	animation: intro 3s ease-out;
}

/* the interesting 3D scrolling stuff */
.story-page.active .sw-titles {
	position: absolute;
	width: 12em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -6em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(25deg);
	-moz-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);
	-o-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg);
}

.story-page.active .sw-titles:after {
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

.story-page.active .sw-title-content {
	width: 100%;
}

.story-page.active .sw-titles p {
	text-align: justify;
	margin: 0.8em 0;
	font-size: 6rem;
	max-width: 100%;
}

.story-page.active .sw-titles img {
	margin: 0.8em 0;
	display: block;
	width: 100%;
	height: auto;
}

.story-page.active .sw-titles p.center {
	text-align: center;
}

.story-page.active .sw-titles a {
	color: #ff6;
	text-decoration: underline;
}


/* animation */
@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

</style>
    <title>story|ftw</title>

<!-- This site is optimized with the Yoast SEO plugin v8.3 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="“CMB2: The Metabox Strikes Back” - Justin Sternberg&#039;s 2014 #wcraleigh presentation, built with Story|FTW."/>
<link rel="canonical" href="https://storyftw.com/cmb2-metabox-strikes-back" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:description" content="“CMB2: The Metabox Strikes Back” - Justin Sternberg&#039;s 2014 #wcraleigh presentation, built with Story|FTW." />
<meta property="og:url" content="https://storyftw.com/cmb2-metabox-strikes-back" />
<meta property="og:site_name" content="story|ftw" />
<meta property="og:image" content="https://storyftw.com/wp-content/uploads/2014/11/atathoth-metaboxes.jpg" />
<meta property="og:image:secure_url" content="https://storyftw.com/wp-content/uploads/2014/11/atathoth-metaboxes.jpg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="“CMB2: The Metabox Strikes Back” - Justin Sternberg&#039;s 2014 #wcraleigh presentation, built with Story|FTW." />
<meta name="twitter:site" content="@storyftw" />
<meta name="twitter:image" content="https://storyftw.com/wp-content/uploads/2014/11/atathoth-metaboxes.jpg" />
<meta name="twitter:creator" content="@storyftw" />
<!-- / Yoast SEO plugin. -->

<link rel='dns-prefetch' href='//s0.wp.com' />
<link rel='dns-prefetch' href='//use.typekit.net' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="story|ftw &raquo; Feed" href="https://storyftw.com/feed" />
<link rel="alternate" type="application/rss+xml" title="story|ftw &raquo; Comments Feed" href="https://storyftw.com/comments/feed" />
<link rel="alternate" type="application/rss+xml" title="story|ftw &raquo; CMB2: The Metabox Strikes Back Comments Feed" href="https://storyftw.com/cmb2-metabox-strikes-back/feed" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/storyftw.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.26"}};
			!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])?!1:!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([55358,56760,9792,65039],[55358,56760,8203,9792,65039])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css'  href='https://storyftw.com/wp-includes/css/dashicons.min.css?ver=4.9.26' type='text/css' media='all' />
<link rel='stylesheet' id='storyftw-theme-css'  href='https://storyftw.com/wp-content/themes/storyftw.com/style.min.css?ver=0.1.4' type='text/css' media='all' />
<link rel='stylesheet' id='jetpack-widget-social-icons-styles-css'  href='https://storyftw.com/wp-content/plugins/jetpack/modules/widgets/social-icons/social-icons.css?ver=20170506' type='text/css' media='all' />
<link rel='stylesheet' id='storyftw-basic-css'  href='https://storyftw.com/wp-content/plugins/storyftw/assets/css/storyftw.min.css?ver=0.1.4' type='text/css' media='all' />
<link rel='stylesheet' id='jetpack_css-css'  href='https://storyftw.com/wp-content/plugins/jetpack/css/jetpack.css?ver=6.5.4' type='text/css' media='all' />
<!--[if lt IE 9]>
<script type='text/javascript' src='https://storyftw.com/wp-content/themes/genesis/lib/js/html5shiv.min.js?ver=3.7.3'></script>
<![endif]-->
<script type='text/javascript' src='//use.typekit.net/wmp6ded.js?ver=4.9.26'></script>
<script type='text/javascript' src='https://storyftw.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://storyftw.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='https://storyftw.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://storyftw.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://storyftw.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.9.26" />
<link rel='shortlink' href='https://wp.me/P5hnhP-ij' />
<link rel="alternate" type="application/json+oembed" href="https://storyftw.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fstoryftw.com%2Fcmb2-metabox-strikes-back" />
<link rel="alternate" type="text/xml+oembed" href="https://storyftw.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fstoryftw.com%2Fcmb2-metabox-strikes-back&#038;format=xml" />

<link rel='dns-prefetch' href='//v0.wordpress.com'/>
<style type='text/css'>img#wpstats{display:none}</style><link rel="icon" href="https://storyftw.com/wp-content/themes/storyftw.com/images/favicon.ico" />
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-54048716-1', 'auto');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');

</script>


		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
					<link rel="stylesheet" type="text/css" id="wp-custom-css" href="https://storyftw.com/?custom-css=3c43e9ef4e" />
		  
</head>

<body class="page-template-default page page-id-1135 sidebar-content">
  <div class="sftw-view bg-dynamic" style="background:rgb(107, 107, 107)">

    <style type="text/css" media="screen">
			#storyftw-story .story-page a:not(.btn) {
				color: inherit;
				-webkit-transition: color 0.3s linear;
				-moz-transition: color 0.3s linear;
				transition: color 0.3s linear;
			}
			
			#storyftw-story .nav-arrow.arrow-color, #storyftw-story .js-coach-mark.arrow-color, #storyftw-story .swipe-to-start {
				color: #e2e2e2;
				-webkit-transition: color 0.3s linear;
				-moz-transition: color 0.3s linear;
				transition: color 0.3s linear;
			}
			
			#storyftw-story .footer-text-color, #storyftw-story .footer-text-color a {
				color: #ffffff;
				-webkit-transition: color 0.3s linear;
				-moz-transition: color 0.3s linear;
				transition: color 0.3s linear;
			}
			
			#storyftw-story .footer-button-text-color {
				color: #ffffff;
				-webkit-transition: color 0.3s linear;
				-moz-transition: color 0.3s linear;
				transition: color 0.3s linear;
			}
			</style>
    <div id="menu" class="shifty">
      <div class="shifty-inner">
        <div class="shifty-content">
          <div class="storybook no-select">

            
            
            
            <div id="story-begin" class="story-page black bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/atathoth-metaboxes.jpg)" data-storymeta='{"id":891,"color":"#6b6b6b","textcolor":"black","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"#6b6b6b","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":false,"tocshow":true,"fbshow":true,"twshow":true}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2 style="text-align: left;"><span style="color: #ffffff;">CMB2:</span></h2>
<h2 style="text-align: left;"><span style="color: #ffffff;">The Metabox Strikes Back</span></h2>
<h5><span style="color: #ffffff;"><em><strong><b><a style="color: #ffffff;" href="http://storyftw.com/cmb2-metabox-strikes-back">storyftw.com/cmb2-metabox-strikes-back</a></b></strong></em></span></h5>
<h5><span style="color: #ffffff;"><em><strong><b><a href="http://wordpress.tv/2015/01/07/justin-sternberg-cmb2-the-metabox-strikes-back/" target="_blank">view presentation on wordpress.tv</a></b></strong></em></span></h5>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    <div class="mobile-show light swipe-to-start">Swipe to start</div>
                  </div>

                
                
            </div>

            
            
            
            <div id="story-who-am-i" class="story-page light bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/droid-1.jpg)" data-storymeta='{"id":1111,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":false,"tocshow":false,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="bg-dynamic-a py1" style="background: rgba(107, 107, 107, 0.74902);">
<h2><span style="color: #ffffff;">Hello.</span></h2>
<p>I don&#8217;t believe we have been introduced.<br />
R2-D2? A pleasure to meet you.<br />
I am C-3PO, Human-Cyborg Relations.
</p></div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-hello" class="story-page light" data-storymeta='{"id":1113,"color":"#00dded","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#ffffff","arrowcolor":"#ffffff","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="bg-dynamic-a py1 f1" style="background: rgba(107, 107, 107, 0.74902);">
<h3><span style="color: #6b6b6b;">Justin Sternberg:</span></h3>
<p class="mobile-hide">&nbsp;</p>
<ol>
<li>
<h4>Developer Lead at <a href="http://webdevstudios.com/" target="_blank">WebDevStudios</a></h4>
</li>
<li>
<h4>Lead Developer of <a href="https://github.com/WebDevStudios/CMB2" target="_blank">CMB2</a></h4>
</li>
<li>
<h4>Partner/Developer of <a href="http://storyftw.com/wcraleigh" target="_blank">Story|FTW</a></h4>
</li>
<li>
<h4>Husband &amp; dad of <a href="http://photos.jtsternberg.com/files/2014/11/family-ween-14.jpg" target="_blank">3 kiddos</a></h4>
</li>
<li>
<h4><a href="https://twitter.com/jtsternberg" target="_blank">@jtsternberg</a> on twitter</h4>
</li>
</ol>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-cmb2" class="story-page light" data-storymeta='{"id":1112,"color":"#000000","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":false,"tocshow":false,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="sw-wrap">
<p class="sw-intro">
        What in the Galactic Empire<br />
        is a &#8220;CMB2&#8221;???
    </p>
<div class="sw-titles">
<div class="sw-title-content">
<p>        CMB2 is the new generation of<br />
        Custom Metaboxes and Fields<br />
        (CMB). CMB2 will help you create<br />
        metaboxes and forms with<br />
        custom fields that will<br />
        blow your mind.<br />
<img src="http://jtsternberg.com/gifs/mind-blown.gif" alt="mind-blown" /></p></div>
</div>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-developers-toolkit" class="story-page light" data-storymeta='{"id":1114,"color":"#4dea79","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"#6b6b6b","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h1><span style="color: #fff;">But seriously&#8230;</span></h1>
<p>&nbsp;</p>
<h4 style="color: #333333;">CMB2 is a developer&#8217;s toolkit for adding<br />
fields, and forms to WordPress.</h4>
<p></p>
<h5 >Let me demonstrate.</h5>
<p><!--


<ul class="f1">
    

<li>Post metaboxes</li>


    

<li>User profiles</li>


    

<li>Settings Pages</li>


    

<li>Shortcodes</li>


    

<li>Frontend (replace Gravity forms?)</li>


    

<li>What else??</li>


</ul>


--></p>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-post-meta-boxes" class="story-page light bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/metabox-screenshot.png)" data-storymeta='{"id":895,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-top">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">Post Meta Boxes</span><span class="alignright" style="margin-top: -13px;margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Basic-Usage" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a><br />
</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-user-profiles" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/enhance-user-profile-edit-cropped.png)" data-storymeta='{"id":1116,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">User Profiles</span><span class="alignright" style="margin-top: -13px;margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Adding-metaboxes-to-user-profile" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a><br />
</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-user-profiles-frontend" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/enhance-user-profile-edit-frontend-cropped.png)" data-storymeta='{"id":1117,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">User Profiles on the Frontend</span><span class="alignright" style="margin-top: -13px;margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Bringing-Metaboxes-to-the-Front-End" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a><br />
</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-options-pages" class="story-page light bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/drugfree-site-options-763x1280.png)" data-storymeta='{"id":1115,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">Options Pages</span><span class="alignright" style="margin-top: -13px;margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2-Snippet-Library/tree/master/options-and-settings-pages" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a><br />
</span><br />
</h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-frontend" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/drugfree-frontend-new-posts-cropped.png)" data-storymeta='{"id":1118,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-top">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">Frontend</span><span class="alignright" style="margin-top: -13px;margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://webdevstudios.com/2015/03/30/use-cmb2-to-create-a-new-post-submission-form/" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a></span><br />
</h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-shortcodes" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/shortcode-form-1920x1199.jpg)" data-storymeta='{"id":1119,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-top">

                    
                    <h2 class="dynamic-bg-a" style="background: rgba(107, 107, 107, 0.74902);"><span style="color: #fff;">Shortcodes</span><span class="alignright" style="margin-top: -13px; margin-right: -10px;"><a class="btn light dashicons-before dashicons-media-document" href="https://github.com/jtsternberg/Shortcode_Button" target="_blank" style="background:#6b6b6b;color:#e2e2e2;">Documentation</a></span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-etc" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/only-hope.jpg)" data-storymeta='{"id":1120,"color":"#4ee4ee","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <h2><span style="color: #fff;">What else??</span></h2>
<p class="mobile-hide">&nbsp;</p>
<p class="mobile-hide">&nbsp;</p>
<p>&nbsp;</p>
<div class="bg-dynamic-a py1" style="background: rgba(78, 228, 238, 0.74902);">
<p>&#8220;Help me, Obi-Wan Kenobi. You&#8217;re my only hope.&#8221;</p>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-what-are-the-benefits-over-rolling-my-own" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/dooku.gif)" data-storymeta='{"id":1121,"color":"#0e65d6","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <h2><span style="color: #fff;">What are the benefits over rolling my own?</span></h2>
<p class="mobile-hide">&nbsp;</p>
<p>&nbsp;</p>
<div class="bg-dynamic-a py1" style="background: rgba(107, 107, 107, 0.74902);">
<p>&#8220;I sense great fear in you, Skywalker. You have hate… you have anger… but you don’t use them.&#8221;</p>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-standard-framework-benefits-apply" class="story-page light" data-storymeta='{"id":1122,"color":"#4ee4ee","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="bg-dynamic-a py1 f1" style="background: rgba(107, 107, 107, 0.74902);">
<h3><span style="color: #6b6b6b;">Standard framework benefits apply</span></h3>
<ol>
<li>
<h4>Bootstrap</h4>
</li>
<li>
<h4>Genesis</h4>
</li>
<li>
<h4>WordPress</h4>
</li>
<li>
<h4>jQuery</h4>
</li>
</ol>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-other-goods" class="story-page light" data-storymeta='{"id":1161,"color":"#4ee4ee","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="bg-dynamic-a py1 f1" style="background: rgba(107, 107, 107, 0.74902);">
<h3><span style="color: #6b6b6b;">Other goods</span></h3>
<ol>
<li>
<h4>Useful built-in field types</h4>
</li>
<li>
<h4>Who wants to roll their own repeatable fields??</h4>
</li>
<li>
<h4>Live oembed previews</h4>
</li>
<li>
<h4>Date/time/color pickers</h4>
</li>
<li>
<h4>Configuration portability</h4>
</li>
</ol>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    <div style="margin-top: -2em">
<a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Field-Types" target="_blank" style="color:#6b6b6b;">Documentation</a>
</div>

                  </div>

                
                
            </div>

            
            
            
            <div id="story-but-does-it-do-__________" class="story-page light" data-storymeta='{"id":1123,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"#4dea79","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2><span style="color: #4dea79;">But does it do __________?</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-do-or-do-not-there-is-no-try" class="story-page light bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/Yoda-Meditating.jpg)" data-storymeta='{"id":1126,"color":"#4ee4ee","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"#4ee4ee","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <blockquote><p><span style="color: #fff">&#8220;Do. Or do not. There is no try.&#8221;</span></p></blockquote>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-create-your-own-field-types" class="story-page light" data-storymeta='{"id":1127,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#4ee4ee","arrowcolor":"#4ee4ee","footertextcolor":"#4ee4ee","footerbuttontextcolor":"#4ee4ee","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="f1">
<div class="p2">
<h4>Custom API hook that allows you to create your own field types</h4>
<ul>
<li class="p2"><a href="https://github.com/WebDevStudios/cmb-attached-posts" target="_blank">CMB Attached Posts Field</a> by <a href="coreymcollins" target="_blank">coreymcollins</a>: <em>Custom field type for attaching posts to a page.</em></li>
<li class="p2"><a href="https://github.com/mustardBees/cmb_field_map">CMB Field Type: Google Maps</a> from <a href="https://github.com/mustardBees">mustardBees</a>: <em>Custom field type for Google Maps.</em></li>
<li class="p2"><a href="https://github.com/mustardBees/cmb-field-select2">CMB Field Type: Select2</a> from <a href="https://github.com/mustardBees">mustardBees</a>: <em>Custom field types which use the <a href="http://ivaynberg.github.io/select2/">Select2</a> script</em>.</li>
</ul>
</div>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    <div style="margin-top: -2em">
<a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Adding-your-own-field-types" target="_blank" style="background:#4ee4ee;color:#6b6b6b;">Documentation</a>
</div>

                  </div>

                
                
            </div>

            
            
            
            <div id="story-configurable-field-parameters" class="story-page light" data-storymeta='{"id":1128,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#4dea79","arrowcolor":"#4dea79","footertextcolor":"#4dea79","footerbuttontextcolor":"#4dea79","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="f1">
<div class="p2">
<h4><span style="color: #4dea79;">Configurable field parameters</span></h4>
</div>
<div class="snippetcpt-wrap" id="snippet-1153" data-id="1153" data-edit="" data-copy="/cmb2-metabox-strikes-back/feed?snippet=d1809ff2f0&#038;id=1153" data-fullscreen="https://storyftw.com/code-snippets/cmb2-field-parameters?full-screen=1">
				<pre class="prettyprint lang-php" title="CMB2 Field Parameters">array(
   'name'            =&gt; 'Text Medium',
   'id'              =&gt; $prefix .'text_medium',
   'type'            =&gt; 'text_medium',
   'sanitization_cb' =&gt; 'custom_sanitization_callback',
   'escape_cb'       =&gt; 'custom_escaping_callback',
   'repeatable'      =&gt; true,
   'attributes'      =&gt; array(
       'placeholder' =&gt; 'A small amount of text',
       'rows'        =&gt; 3,
       'required'    =&gt; 'required',
   ),
),</pre>
			</div>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    <div style="margin-top: -2em">
<a class="btn light dashicons-before dashicons-media-document" href="https://github.com/WebDevStudios/CMB2/wiki/Adding-your-own-field-types" target="_blank" style="background:#4dea79;color:#6b6b6b;">Documentation</a>
</div>

                  </div>

                
                
            </div>

            
            
            
            <div id="story-helper-functions" class="story-page light" data-storymeta='{"id":1129,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#4ee4ee","arrowcolor":"#4ee4ee","footertextcolor":"#4ee4ee","footerbuttontextcolor":"#4ee4ee","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <div class="f1">
<div class="p2">
<h4>Helper Functions:</p>
<ul>
<li class=""><code>cmb2_metabox_form()</code></li>
<li class=""><code>cmb2_get_field_value()</code></li>
<li class=""><code>cmb2_get_oembed()</code></li>
</ul>
</div>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-lots-hooks" class="story-page light" data-storymeta='{"id":1130,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#4ee4ee","arrowcolor":"#4ee4ee","footertextcolor":"#4ee4ee","footerbuttontextcolor":"#4ee4ee","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h4 class="read-max-width"><span style="color: #4dea79;"><strong>20</strong></span> filters<br />
<em>(not including variable filters)</em>,<br />
<span style="color: #4dea79;"><strong>6</strong></span> actions,<br />
<span style="color: #4dea79;"><strong>2</strong></span> custom javascript events,<br />
and at least <span style="color: #4dea79;"><strong>10</strong></span> callback-ready field parameters</h4>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-short-answer-probably" class="story-page light" data-storymeta='{"id":1124,"color":"#6b6b6b","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"#4dea79","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2><span style="color: #4dea79;">Short answer&#8230; probably.</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-great-kid-dont-get-cocky" class="story-page light bg-cover bg-cover-top" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/grumpy-harrison-ford-roles-han-solo-3-1088594-TwoByOne.jpg)" data-storymeta='{"id":1125,"color":"#4ee4ee","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 center table">

                  
                  
                  <div class="story-content box box-bottom">

                    
                    <div class="bg-dynamic-a py1" style="background: rgba(78, 228, 238, 0.74902);">
<p>&#8220;Great, kid. Don’t get cocky&#8221;</p>
</div>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-other-great-tools-for-metaboxes-fields-forms-etc" class="story-page light" data-storymeta='{"id":1131,"color":"#4dea79","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#ffffff","arrowcolor":"#ffffff","footertextcolor":"#6b6b6b","footerbuttontextcolor":"#6b6b6b","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2><span style="color: #ffffff;">Other great tools for metaboxes, fields, forms, etc</span></h2>
<ol class="alignleft py1 f1">
<li><span style="color: #333;">Developer focused tools</span>
<ul>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="https://github.com/humanmade/Custom-Meta-Boxes/" target="_blank">HM Custom-Meta-Boxes Meta Boxes for WordPress (humanmade&#8217;s fork)</a></span></h3>
</li>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="https://github.com/Automattic/custom-metadata" target="_blank">Custom Metadata Manager for WordPress</a></span></h3>
</li>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="https://wordpress.org/plugins/pods/" target="_blank">Pods</a></span></h3>
</li>
</ul>
</li>
</ol>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    <p style="font-size: 2em;margin-top: -20px"><span style="color: #6b6b6b"><em>"Traveling through hyperspace ain't like dusting crops, farm boy."</em> <cite>&mdash; Han Solo</cite><br />
</span></p>

                  </div>

                
                
            </div>

            
            
            
            <div id="story-great-tools-metaboxes-fields-forms-etc-user-focused-tools" class="story-page light" data-storymeta='{"id":1162,"color":"#4dea79","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#ffffff","arrowcolor":"#ffffff","footertextcolor":"#6b6b6b","footerbuttontextcolor":"#6b6b6b","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2><span style="color: #ffffff;">tools continued &#8211; user focused</span></h2>
<ol class="alignleft py1 f1">
<li><span style="color: #333;">User focused tools</span>
<ul>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="http://www.advancedcustomfields.com/" target="_blank">Advanced Custom Fields</a></span></h3>
</li>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="http://www.gravityforms.com/" target="_blank">Gravity Forms</a></span></h3>
</li>
<li class="p2">
<h3><span style="color: #6b6b6b;"><a href="https://wordpress.org/plugins/pods/" target="_blank">Pods</a></span></h3>
</li>
</ul>
</ol>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-wordpress-metadata-ui-api-future" class="story-page light" data-storymeta='{"id":1170,"color":"#4dea79","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"#ffffff","arrowcolor":"#ffffff","footertextcolor":"#6b6b6b","footerbuttontextcolor":"#6b6b6b","footertitleshow":true,"tocshow":true,"fbshow":false,"twshow":false}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content table-cell">

                    
                    <h2><span style="color: #ffffff;"><a style="color: rgb(255, 255, 255);" href="https://github.com/wordpress-metadata/metadata-ui-api" target="_blank">WordPress Metadata UI API</a>: The future?</span></h2>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            
            <div id="story-may-the-force-be-with-you" class="story-page light bg-cover bg-center" style="background-image: url(https://storyftw.com/wp-content/uploads/2014/11/Star-Wars-Light-Saber-Fight.jpg)" data-storymeta='{"id":1132,"color":"#0a0a0a","textcolor":"light","mp4":false,"webm":false,"ogv":false,"linkcolor":"","arrowcolor":"","footertextcolor":"","footerbuttontextcolor":"","footertitleshow":true,"tocshow":true,"fbshow":true,"twshow":true}'>

                
                <div class="story-page-inner y100 left-align table">

                  
                  
                  <div class="story-content box box-top">

                    
                    <h3><span style="color: #ffffff;"><em><strong>Remember…</strong></em></h3>
<h4 style="color: #ffffff;">the Force will be with you, always.</span></h4>

                    
                  </div>

                  
                </div>

                
                  <div class="story-page-footer light">

                    
                  </div>

                
                
            </div>

            
            
            <div id="story-page-redirect" class="story-page" data-redirect="http://storyftw.com/blog"></div>
          </div>


          <div class="js-story-page-previous rail rail-left p1 clickable no-select mobile-hide hide">
            		<div class="table-cell">
		  <div class="nav-prev-arrow nav-arrow light dashicons dashicons-arrow-left-alt2 arrow-color" title="Previous"></div>
		</div>
		          </div>
          <div class="js-story-page-next rail rail-right right-align p1 clickable no-select mobile-hide">
            <p class="js-coach-mark table-cell bold light hide arrow-color">begin</p>		<div class="table-cell">
		  <div class="nav-next-arrow nav-arrow light dashicons dashicons-arrow-right-alt2 arrow-color" title="Next"></div>
		</div>
		          </div>
        </div><!-- .shifty-content -->

        <div class="shifty-menu scrolly menu bg-white-85">
          <div class="py4">

            
            		<ul id="toc" class="list-simple center mb4">

		
							<li>
			<a href="#story-begin" class="h2 lh5 block js-story-page-btn gray">CMB2: The Metabox Strikes Back</a>
		</li>
									<li>
			<a href="#story-who-am-i" class="h2 lh5 block js-story-page-btn gray">Who am I?</a>
		</li>
									<li>
			<a href="#story-hello" class="h2 lh5 block js-story-page-btn gray">I&#8217;m Justin</a>
		</li>
									<li>
			<a href="#story-cmb2" class="h2 lh5 block js-story-page-btn gray">What is CMB2?</a>
		</li>
									<li>
			<a href="#story-developers-toolkit" class="h2 lh5 block js-story-page-btn gray">Developer&#8217;s Toolkit</a>
		</li>
									<li>
			<a href="#story-post-meta-boxes" class="h2 lh5 block js-story-page-btn gray">Post Meta Boxes</a>
		</li>
									<li>
			<a href="#story-user-profiles" class="h2 lh5 block js-story-page-btn gray">User Profiles</a>
		</li>
									<li>
			<a href="#story-user-profiles-frontend" class="h2 lh5 block js-story-page-btn gray">User Profiles on the Frontend</a>
		</li>
									<li>
			<a href="#story-options-pages" class="h2 lh5 block js-story-page-btn gray">Options Pages</a>
		</li>
									<li>
			<a href="#story-frontend" class="h2 lh5 block js-story-page-btn gray">Frontend</a>
		</li>
									<li>
			<a href="#story-shortcodes" class="h2 lh5 block js-story-page-btn gray">Shortcodes</a>
		</li>
									<li>
			<a href="#story-etc" class="h2 lh5 block js-story-page-btn gray">Etc</a>
		</li>
									<li>
			<a href="#story-what-are-the-benefits-over-rolling-my-own" class="h2 lh5 block js-story-page-btn gray">What are the benefits over rolling my own?</a>
		</li>
									<li>
			<a href="#story-standard-framework-benefits-apply" class="h2 lh5 block js-story-page-btn gray">Standard framework benefits apply</a>
		</li>
									<li>
			<a href="#story-other-goods" class="h2 lh5 block js-story-page-btn gray">Other goods</a>
		</li>
									<li>
			<a href="#story-but-does-it-do-__________" class="h2 lh5 block js-story-page-btn gray">But does it do __________?</a>
		</li>
														<li>
			<a href="#story-create-your-own-field-types" class="h2 lh5 block js-story-page-btn gray">create your own field types</a>
		</li>
									<li>
			<a href="#story-configurable-field-parameters" class="h2 lh5 block js-story-page-btn gray">Configurable field parameters</a>
		</li>
									<li>
			<a href="#story-helper-functions" class="h2 lh5 block js-story-page-btn gray">Helper Functions</a>
		</li>
									<li>
			<a href="#story-lots-hooks" class="h2 lh5 block js-story-page-btn gray">Lots of hooks</a>
		</li>
																			<li>
			<a href="#story-other-great-tools-for-metaboxes-fields-forms-etc" class="h2 lh5 block js-story-page-btn gray">Other great tools for metaboxes, fields, forms, etc</a>
		</li>
									<li>
			<a href="#story-great-tools-metaboxes-fields-forms-etc-user-focused-tools" class="h2 lh5 block js-story-page-btn gray">tools continued &#8211; User Focused Tools</a>
		</li>
									<li>
			<a href="#story-wordpress-metadata-ui-api-future" class="h2 lh5 block js-story-page-btn gray">WordPress Metadata UI API: The future?</a>
		</li>
									<li>
			<a href="#story-may-the-force-be-with-you" class="h2 lh5 block js-story-page-btn gray">Remember&#8230;the Force will be with you, always.</a>
		</li>
				
		
		</ul>
		
            
          </div>
        </div><!-- .shifty-menu -->

        </div><!-- .shifty-inner -->
      </div><!-- .shifty -->

    <div class="sftw-navbar bg-dynamic-a no-select light " style="background:rgba(107, 107, 107, .75)">

      <div class="sftw-navbar-left left">
        <button class="js-shifty-toggle btn mr2 bg-dynamic light footer-button-text-color" style="background:rgb(107, 107, 107)">
			<span class="dashicons dashicons-visibility"></span>
			<span class="mobile-hide">TOC</span>
		</button>      </div>

      <div class="sftw-navbar-right right right-align">
        <a href="https://www.facebook.com/sharer/sharer.php?u=https://storyftw.com/cmb2-metabox-strikes-back" target="_blank" class="btn bg-dynamic light facebook-share-button footer-button-text-color" style="background:rgb(107, 107, 107)">
			<span class="dashicons dashicons-facebook-alt"></span>
			<span class="mobile-hide">Share</span>
		</a><a href="https://twitter.com/intent/tweet?text=%E2%80%9CCMB2%3A+The+Metabox+Strikes+Back%E2%80%9D+-+%40jtsternberg%27s+2014+%23wcraleigh+presentation%2C+built+with+%40storyftw&url=https://storyftw.com/cmb2-metabox-strikes-back" target="_blank" class="btn bg-dynamic light tweet-button footer-button-text-color" style="background:rgb(107, 107, 107)">
			<span class="dashicons dashicons-twitter"></span>
			<span class="mobile-hide">Tweet</span>
		</a>      </div>

      		<div class="h3 caps center mobile-hide footer-text-color  super-hide">
			CMB2: The Metabox Strikes Back		</div>
		
    </div>

  </div><!-- .view -->

      <link rel='stylesheet' id='prettify-css'  href='https://storyftw.com/wp-content/plugins/code-snippets-cpt/assets/css/code-snippet-cpt-prettify.min.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='prettify-monokai-css'  href='https://storyftw.com/wp-content/plugins/code-snippets-cpt/assets/css/code-snippet-cpt-prettify-monokai.min.css?ver=1.0' type='text/css' media='all' />
<script type='text/javascript' src='https://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=202616'></script>
<script type='text/javascript' src='https://storyftw.com/wp-includes/js/comment-reply.min.js?ver=4.9.26'></script>
<script type='text/javascript' src='https://storyftw.com/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.4'></script>
<script type='text/javascript' src='https://storyftw.com/wp-content/plugins/storyftw/assets/js/vendor-combined.min.js?ver=0.1.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var StoryFTW_l10n = {"debug":"","index_names":["begin","who-am-i","hello","cmb2","developers-toolkit","post-meta-boxes","user-profiles","user-profiles-frontend","options-pages","frontend","shortcodes","etc","what-are-the-benefits-over-rolling-my-own","standard-framework-benefits-apply","other-goods","but-does-it-do-__________","do-or-do-not-there-is-no-try","create-your-own-field-types","configurable-field-parameters","helper-functions","lots-hooks","short-answer-probably","great-kid-dont-get-cocky","other-great-tools-for-metaboxes-fields-forms-etc","great-tools-metaboxes-fields-forms-etc-user-focused-tools","wordpress-metadata-ui-api-future","may-the-force-be-with-you"],"names_index":{"begin":0,"who-am-i":1,"hello":2,"cmb2":3,"developers-toolkit":4,"post-meta-boxes":5,"user-profiles":6,"user-profiles-frontend":7,"options-pages":8,"frontend":9,"shortcodes":10,"etc":11,"what-are-the-benefits-over-rolling-my-own":12,"standard-framework-benefits-apply":13,"other-goods":14,"but-does-it-do-__________":15,"do-or-do-not-there-is-no-try":16,"create-your-own-field-types":17,"configurable-field-parameters":18,"helper-functions":19,"lots-hooks":20,"short-answer-probably":21,"great-kid-dont-get-cocky":22,"other-great-tools-for-metaboxes-fields-forms-etc":23,"great-tools-metaboxes-fields-forms-etc-user-focused-tools":24,"wordpress-metadata-ui-api-future":25,"may-the-force-be-with-you":26},"story":{"footertitleshow":null,"tocshow":null,"fbshow":false,"twshow":false,"linkcolor":null,"arrowcolor":"#e2e2e2","footertextcolor":"#ffffff","footerbuttontextcolor":"#ffffff"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://storyftw.com/wp-content/plugins/storyftw/assets/js/storyftw.min.js?ver=0.1.4'></script>
<script type='text/javascript' src='https://storyftw.com/wp-includes/js/wp-embed.min.js?ver=4.9.26'></script>
<script type='text/javascript' src='https://storyftw.com/wp-includes/js/wp-a11y.min.js?ver=4.9.26'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var snippetcptl10n = {"debug":"","features":{"do_click_to_copy":true,"enable_full_screen_view":true,"collapsible":true,"enable_ace":false,"edit":true},"fullscreen":"","isSnippet":"","l10n":{"copy":"Copy Snippet","fullscreen":"Expand Snippet","close":"Close Snippet (or hit &quot;escape&quot; key)","edit":"Edit Snippet","collapse":"Collapse Snippet","numbers":"Toggle Line Numbers","copied":"Copied successfully.","copyError":"Could not copy code snippet using document.execCommand"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://storyftw.com/wp-content/plugins/code-snippets-cpt/assets/js/code-snippet-cpt-prettify.min.js?ver=2.1.0'></script>
		<script type="text/javascript">
			window.onload = function(){ prettyPrint( function() {
				document.getElementsByTagName('body')[0].className += ' snippetcpt-js-loaded';
				if ( window.jQuery ) {
					jQuery( document ).trigger( 'prettify-loaded' );
				}
			} ); };
		</script>
		  
</body>
</html>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/

Page Caching using disk: enhanced 

Served from: storyftw.com @ 2026-04-14 19:12:29 by W3 Total Cache
-->