Step1. Add CMB2 as an mu-plugin

download the plugin in a .zip from

create a folder in wp-content called mu-plugins
then drop it in there
then create a file "include-cmb-for-project.php"
that will intialize the plugin
with the following code:


// Include CMB2 globally for this site.
require WPMU_PLUGIN_DIR . '/cmb2/init.php';

// make sure its actually loaded
wp_die( defined( 'CMB2_LOADED' ) ? ' CMB2 Loaded!' : 'uh oh! ', __( 'CMB2 Check', 'wpsessions') );

delete the wp_die after you checked that its loaded!

if you have issues its probably permission related 
cd into wp-content and then run:

sudo chown www-data:www-data mu-plugins -R *  

solved it for me.

step2. create a child theme with basic setup:

add a screenshot.png

instead of importing the parent theme you should use a function in functions.php for child themes.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );


add a folder called includes
and since we know we will add some fields we can also create cmb-fields inside our includes folder straight away.

create a functions.php
inside functions.php add only for starters:

 * Twenty Fourteen -- BOOKS!

function twentyfourteenbooks_includes() {
	$dir = get_stylesheet_directory();

	include $dir . '/includes/cmb-fields.php';

// Include our includes!

3. Go ahead and ACTIVATE your child theme
4. Get going with cmb fields, a easy way to get started is to simply copy in all of example functions into cmb-fileds.php
first thing todo after that is start cleaning it up

you dont need to init it so you can delete that part as you already init in the mu-plugin folder. so go ahead an delete:

 * Get the bootstrap! If using the plugin from, REMOVE THIS!

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';

then do a search and replace all for yourprefix_ with whatever your theme is called

then you can delete all types you know you want be using

5. then you can use the function twentyfourteenbooks_show_if_front_page and use that for
'show_on_cb' -> 'twentyfourteenbooks_show_if_front_page',
when declaring the new_cmb2_box array

if you deleted the function in the earlier step you will find it in example-functions at the top , just remeber to replace yourprefix with yourprefix..

6. Now its quite empty, so we wanna add in more fields that the homepage will need. 
we will use a:
slogan field (wysiwyg)
rotating/random splashimage field (file_list)
vide embed (oembed)
video description field (textarea)

I will make sure that the fields only show up on front page and nowhere else by having
		'show_on_cb' => 'twentyfourteenbooks_show_if_front_page', // function should return a bool value
as in step 5 and the following function that its pointing to above.

 function twentyfourteenbooks_show_if_front_page( $cmb ) {
 	// Don't show this metabox if it's not the front page template
 	if ( $cmb->object_id !== get_option( 'page_on_front' ) ) {
 		return false;
 	return true;

name the and add in a for a certain field if you want default value.

'default' => __( ' default value ', 'cmb2' ),

very handy!

by default the id of the fields are named the same as the type which isnt very helpful, so go ahead and name them slogan etc instead after
prefix . ''

go ahead and also to a find and replace and for 'demo' with something more fitting like in this example front

go the admin area and edit the page set to homepage and write in some dummy data in the fields of the homepage
7. lets create a custom front-page template to pull in data with custom functions

wordpress template hierarchy works in a way so you simply have to create a front-page.php in the root folder of the theme and it will automatically use that page template for the chosen page as the home page. 

So lets duplicate page.php and change the inclute to a custom template part.

get_template_part( 'content', 'page' );


get_template_part( 'content', 'homepage' );

and we create a content-homepage.php as well for that duplicate content-page.php from twentyfourteen and name it content-homepage.php

here we will pull in the data from the fields.

now we will add in some functions we havent written yet, 

replace the 
with our own:


then add

above the 


you can comment it out for now so only the first line gives error.

now we gonna write these functions that will pull in the data and sanitize the output. 

We will start with the random rotate image

function twentyfourteenbook_splash_image() {
	$images = get_post_meta( get_the_ID(), 'twentyfourteenbooks_front_splash', 1);

	//if we saved data it will be an array
	if ( is_array( $images)) {
		$attach_id = array_rand( $images );

		//display the images
		printf( '<p class="front-page-splash"> %s </p>', wp_get_attachment_image( $attach_id, 'large'));


now after succesfully added that, lets add in a function that combines 2 custom fields!


and in functions.php

add in:

 * Display frontpage video embed
 * @link Example/Docs
function twentyfourteenbook_video_and_desc() {
	$video = get_post_meta( get_the_ID(), 'twentyfourteenbooks_front_video', 1 );

	// Check if we have a video
	if ( ! empty( $video ) ) {
		echo '<div class="front-page-embed">';
		// Display embed
		echo wp_oembed_get( esc_url( $video ) );
		if ( $desc = get_post_meta( get_the_ID(), 'twentyfourteenbooks_front_video_desc', 1 ) ) {
			printf( '<p class="front-page-embed-description">%s</p>', $desc );
		echo '</div>';

8. as our homepage is Home and we dont really that to show up as our title but we also dont wanna remove it completely, we can use the slogan field to set a custom title that will override the page name! This is very useful!!

function twentyfourteenbooks_replace_homepage_title_with_slogan( $title ) {
	// If we're not on the homepage, just pass the title back
	if ( ! is_front_page() ) {
		return $title;

	// If we find a slogan on the homepage, use that instead.
	if ( $slogan = get_post_meta( get_the_ID(), '_twentyfourteenbooks_front_slogan', 1 ) ) {
		return $slogan;

	return $title;
add_filter( 'the_title', 'twentyfourteenbooks_replace_homepage_title_with_slogan' );

--------------------------------------thats it for the basic custom fields integration --------------------------

no onwards to add custom options page for the theme, this is very useful for footer/header etc 

step 9.

we will use these fields:

address field(address)	address
phone number		text with custom 'phone' type attribute <--- interesting!
contact email		text_email
hours of operation 	text_medium
footer text title 	title
footer text  		wysiwyg

first off all we will create a new file in /includes/ called

and include it in functions.php

	include $dir . '/includes/theme-options-cmb.php';

inside the file theme-options-cmb.php
copy in the content of

first of all lets replace Myprefix with our projectname

please not that some are capitalized and its not by mistake, Classes and Objects are capitalized while functions, variables etc are lower case.

now go to your admin page and you should see a new "settings page" in the menu


as you noticed first  field we gonna add in address and phone number doesnt exist in the examples. this means we need
to create these as custom fields.

first create custom-cmb-field-types.php inside includes and include it in functions.php

then you can copy the whole example from the wiki at step4 which is creating a address field!

now if someone done the same thing and used in a plugin and you install that plugin, it might break your site!
to avoid this, you can wrap the functions in 

if(! function_exists( 'function_name')) :

for phone number we will adda attribute to override the text one and make it a html5 phone type based on the cmb2 text type but overriding it.

there is no need to use a prefix for this as these are not unique values, the ids are only for that single option so only the 
top $key need to unique!

after adding in all the fields

lets output
step 10. Hook into a hook!!
We wanna output this info in the footer and if you look in the parent theme you will see 
				<?php do_action( 'twentyfourteen_credits' ); ?>

lets hook into that to output our data:
go to functions.php
(if this was underscores you should add this to inc/template-tags.php)

then to hook it up you just have to write

add_action('twentyfourteen_credits', 'twentyfourteenbooks_footer_info');

and declare a function 

function twentyfourteenbooks_footer_info() {
	echo "test";

this should output "test" in your hook, in this case the footer!

now replace the echo test with pulling the stuff from the fields!

----------------------------- end of part 2--------------------------------------------------------------------------
step 11.

creating your own custom post type with a plugin

the reason to use a plugin here, is that if you would ever change theme in the future it would make it much easier!

make the plugin belong to user:www-data and add server permission fix to be able to edit and the webserver be able to use it

if copying the books-cpt, be sure to remove 		

'show_on_cb'    => 'bookcpt_show_if_front_page', // function should return a bool value

from custom-fields.php
step 12.

Add fields/metaboxes to our custom post type:

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

to make the genre show up you can turn false into true on show ui on the custom-fields.php

step 13. show related posts

todo this we want the cmb2 post search field which you can download at

and include as a plugin.

We gonna include it as a mu-plugin

create a folder cmb2-post-search-field in mu-plugins
and add include-cmb2-post-search-field.php

step 14. output custom post type fields to either a single-books.php or hook into what single php and filter , THIS STEP WAS BUGGY NEEDS REVISION 

todo that we have the template-filters.php in our books-cpt plugin

function bookscpt_maybe_filter_content( $content ) {

	if ( is_singular( 'book' ) ) {
		$post_id = get_the_ID();

		$content = bookscpt_pre_content_meta( $post_id ) . $content . bookscpt_post_content_meta( $post_id );

	return $content;
add_filter( 'the_content', 'bookscpt_maybe_filter_content' );

STEP 15.-----------------------------------------------------------------------------------------------------

Use CMB2 to Create a New Post Submission Form all of that will be pasted into submission-form-shortcode.php and included in books-cpt.php lets modify the fields so they are the same as custom-fields.php except related books. just copy the rest of the fields over now to get this showing on a page you just need to add the shortcode and paste in a page the example have : add_shortcode( 'book-submission', 'bookcpt_do_frontend_form_submission_shortcode' ); so add in [book-submission] on a page and it should pop up! this step the featured image didnt work. could have something todo with "wpsessions" etc.

Add your comment