A few years ago, I was looking for a way to query articles and display the location where an article was written on a google map. During my research I came across a blog post explaining how to create a store locator using CMB2 and Google Maps. Since then, CMB2 has go one of my favorite plugins and is used in the bulk of my projects.
Contents
1 First of all, what is CMB2?
two How to configure CMB2
2.0.i How to load JavaScript into WordPress
3 Next step: plugins!
Commencement of all, what is CMB2?
Well, CMB is an acronym for Custom Meta Boxes and according to the description on the plugin'due south folio, "CMB2 is a meta-box, custom fields, and forms library for WordPress that will blow your mind. Information technology was developed by Justin Sternberg from WebDevStudios and had been in the plugin repository for just over ii years. However, back in February, the proficient folks at the WordPress plugin repository admitted that they blundered and approved CMB2 as a plugin when they shouldn't have.
You see, plugins are usually capable of doing something correct out of the box; they take inherent functionality. CMB2 is actually a framework. Equally Sternberg one time explained, "It'south a development framework for hands creating forms and fields in your themes and plugins. In fact, when you install CMB2, nothing happens. You will not become an admin page and there is no admin user interface. To utilise CMB2, you must be able to write code and add to your functions.php to file. For this reason, I call it a "non-plugin" plugin.
The good news is that the plugin'due south approval team has agreed to get out information technology in the repository, and so you can keep to download and update information technology from there. Y'all tin read all nearly the story here on Justin'southward site.
How to configure CMB2
To get started, you lot volition demand to discover the example-functions.php from the plugin directory and copy it to your theme. Information technology can be copied directly to the theme'due south root folder, only to go on your projection organized I suggest copying it to a folder such as /lib/ Where /includes/. If you already know how you lot want to use CMB2 then you can become alee and rename the file to something more suitable. For example, if you wanted to apply it to create custom fields for a testimonial folio, you lot could name it testimonial-functions.php.
Next, y'all'll demand to make sure that WordPress finds the new file past calculation a require_once declaration to your functions.php to file. Information technology will look something like this:
At present is the time to really dig in. Open the testimonial-functions.php file (or whatsoever name y'all gave it). You'll detect that Justin non only created an case of just about every possible field type, but he also created functions to testify fields by homepage, category, post id, and more.
How to load JavaScript into WordPress
JavaScript is 1 of the most popular coding languages. Information technology'due south incredibly useful when building a website or app, and in that location are countless JavaScript libraries and frameworks to leverage, …
Note: This article is intended to introduce you to CMB2; it won't be a complete tutorial on how to apply every aspect of information technology, and considering it'southward a framework and was developed to assistance programmers, yous need to have a basic agreement of PHP and the inner workings of WordPress. If y'all are looking for a Custom Meta Box plugin that has an admin user interface, you can check out the Advanced Custom Fields plugin.
So let's get dorsum to creating custom meta boxes for something simple like a testimonial. Start, determine the number and types of fields yous will need. For the sake of simplicity, let's say we demand three fields. One for the testimony itself, one for the name of the person giving the testimony, and ane for a film of the person.
Work in the testimonial-functions.php file, yous volition need to find the department to register and add your new function. This code looks something like this.
Next, I suggest you rename your function to something relevant to your theme and projection.
add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Tin can but happen on the 'cmb2_admin_init' or 'cmb2_init' claw. */ part register_testimonial_metabox() {
I as well suggest y'all rename the prefix.
// Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything y'all'd like here, just yous need to remember what you use, because you lot will exist using information technology again subsequently.
You have the choice between several types of fields. I will utilise :
'type' => 'textarea_small' // for the author field 'type' => 'wysiwyg' // for the testimonial in case we want to include html 'type' => 'file' // for the image of the project or author $cmb_demo->add_field( array( 'name' => __( 'Testimonial Writer', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'writer', //Note, I renamed this to be more appropriate 'blazon' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'proper name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add together the testimonial hither', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to exist more appropriate 'blazon' => 'wysiwyg', 'options' => assortment( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'proper noun' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'prototype', //Annotation, I renamed this to be more advisable 'blazon' => 'file', ) );
These three new fields need to be added to the new function, then it would expect like the following:
add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add together a testimonial metabox. Tin but happen on the 'cmb2_admin_init' or 'cmb2_init' claw. */ function register_testimonial_metabox() { // Showtime with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you lot tin use anything you'd similar here /** * Start field groups here */ $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'writer', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'proper noun' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more than advisable 'blazon' => 'wysiwyg', 'options' => assortment( 'textarea_rows' => five, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Epitome', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'epitome', //Note, I renamed this to be more appropriate 'blazon' => 'file', ) ); }
And that's all! Your last code should look similar:
<?php /** * Include and gear up up custom metaboxes and fields. (Make certain you copy this file outside the CMB2 directory) * * Be sure to supervene upon all instances of 'yourprefix_' with your project's prefix. * http://nacin.com/2010/05/xi/in-wordpress-prefix-everything/ * * @category YourThemeOrPlugin * @package Demo_CMB2 * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later) * @link https://github.com/WebDevStudios/CMB2 */ /** * Become the bootstrap! If using the plugin from wordpress.org, 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'; } add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Tin can but happen on the 'cmb2_admin_init' or 'cmb2_init' claw. */ function register_testimonial_metabox() { // Outset with an underscore to hibernate fields from custom fields listing $prefix = '_yourprefix_'; //notation, you can use anything you'd like here /** * Beginning field groups here */ // This first field group tells WordPress where to put the fields. In the example beneath, information technology is set to evidence upward only on Post_ID=10 $cmb_demo = new_cmb2_box( array( 'id' => $prefix . 'metabox', 'title' => __( 'Homepage Custom Fields', 'cmb2' ), 'object_types' => array( 'folio', ), // Post type 'show_on' => array( 'id' => assortment( ten, ) ), // Specific post IDs to display this metabox ) ); $cmb_demo->add_field( array( 'proper noun' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to exist more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => five, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Epitome', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more than appropriate 'type' => 'file', ) ); }
When finished, you should have a page that looks like the following:
Using CMB2 is a great way to requite your website exactly what you lot demand because the options are truly countless. For case, CMB2 can exist used to create a theme options page with meta boxes for logos, URLs to social media sites, or videos. In the case of building a website for a customer, CMB2 is perfect for customizing the admin and so that the client doesn't take to format the content to lucifer the styles of your theme. And one time the data is entered, yous can display the content with all the styling already in place in your HTML and CSS.
Once you lot have mastered calculation bones fields with CMB2, try adding the repeatable field groups. With these, you volition exist able to add together every bit many types of content equally you want, and so using a loop for each, you can get-go creating slideshows or carousels.
CMB2 has allowed me to have my WordPress sites to the next level and I hope information technology volition do the same for you.
Next step: plugins!
Finding the perfect WordPress plugin that speeds up site development is a lot like trying to find the only typo in a cord of lawmaking – information technology tin accept a while. And these days there are so many plugins out at that place for different tasks that it tin be difficult to determine exactly what functionality a site needs (or doesn't) need, and which plugins effectively deliver that.
Download this ebook for a list of our top recommended plugins for developers!
0 Response to "Using Cmb2 to Add Custom Meta Boxes to Media Uploads"
Post a Comment