This post was last updated on January 25th, 2017 at 06:56 am
In one of my previous tutorials, I have shown you How To Create CMB2 Switch Button Meta Field Type. Here in this tutorial I will show how to create a Slider field type using CMB2 Custom Metaboxes and Fields for WordPress.
Lets Create CMB2 Slider Field Type
just like my previous tutorial, Slider field is also very simple to build. As usual using CMB2’s built in field creation methods. To define the field markup, you need to hook into the ‘cmb2_render_{field-type}’ action. Based on that, our action to hook into is ‘cmb2_render_slider’.
/* CMB2 Slider Field. Add the code below in a file named slider_metafield.php ------------- */
function cmb2_render_slider( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){
// Only enqueue scripts if field is used.
//$this->setup_admin_scripts();
$slider = '<div class="cmb2-slider"></div>';
$slider .= $field_type_object->input( array(
'type' => 'hidden',
'class' => 'cmb2-slider-value',
'readonly' => 'readonly',
'data-start' => absint( $field_escaped_value ),
'data-min' => $field->min(),
'data-step' => $field->step(),
'data-max' => $field->max(),
'desc' => '',
) );
$slider .= '<span class="cmb2-slider-value-display">'. $field->value_label() .' <span class="cmb2-slider-value-text"></span></span>';
$slider .= $field_type_object->_desc( true );
echo $slider;
}add_action( 'cmb2_render_slider', 'cmb2_render_slider', 10, 5 );
Styling The Slider Field
After defining the field we need to style the field to look like a slider.
/* CMB2 Slider Field Styling. Add the code below in a file named slider_metafield.css ------------- */
.cmb-type-slider .ui-slider-horizontal { height: 1.1em; }
.cmb-type-slider .ui-slider-horizontal.ui-widget-content { border: 1px solid #dddddd; color: #222222;
display: inline-block; margin-right: 25px; vertical-align: middle; width: 98%;}
.cmb-type-slider .ui-slider-horizontal .ui-slider-handle { margin-left: 0; top: -0.445em; }
.cmb-type-slider .ui-slider-horizontal .ui-slider-handle:not([style="left: 0%;"]){ margin-left: -28px; }
.cmb-type-slider .ui-slider .ui-slider-handle {
height: 1.8em; width: 2.2em; background: #fafafa; border: 1px solid #d9d9d9; border-radius: 3px;
box-shadow: 0 0 1px #f0f0f0 inset, 0 1px 7px #ebebeb inset, 0 3px 6px -3px #bbb; cursor: default;
}
.cmb-type-slider .ui-slider .ui-slider-handle:after,
.cmb-type-slider .ui-slider .ui-slider-handle:before {
content: ""; display: block; position: absolute; height: 14px; width: 1px;
background: #E8E7E6; left: 14px; top: 6px;
}
.cmb-type-slider .ui-slider .ui-slider-handle:after { left: 17px; }
.cmb-type-slider .ui-slider-range.ui-widget-header { background: #004a97; }
.cmb-type-slider .cmb2-slider-value-display { margin-top: 8px; float: left; }
.cmb-type-slider .cmb2-slider-field-value-display { float:right; font-weight: 400; font-size: 12px; color: #888; padding-top: .5em; }
Enabling the sliding event for the CMB2 Slider Field
Now we need to use JavaScript to enable the sliding event. So I use some JQuery to accomplish the event.
/* CMB2 Slider Event. Add the code below in a file named slider_metafield.js ------------- */
window.CMB2 = (function(window, document, $, undefined){
'use strict';
$( '.cmb-type-slider' ).each(function() {
var $this = $( this );
var $value = $this.find( '.cmb2-slider-value' );
var $slider = $this.find( '.cmb2-slider' );
var $text = $this.find( '.cmb2-slider-value-text' );
var slider_data = $value.data();
$slider.slider({
range : 'min',
value : slider_data.start,
min : slider_data.min,
step : slider_data.step,
max : slider_data.max,
slide : function( event, ui ) {
$value.val( ui.value );
$text.text( ui.value );
}
});
// Initiate the display
$value.val( $slider.slider( 'value' ) );
$text.text( $slider.slider( 'value' ) );
});
})(window, document, jQuery);
Lets Find How we can integrate CMB2 slider field in to a theme
To integrate the field in to a theme you must know "How to create custom meta boxes with CMB2"
If you know how to create custom meta boxes, then follow the codes below.
Add the following codes in you CMB2 metafields main file.
/** START --- Initialize the CMB2 Metabox & Related Classes */
function initialize_showcase_meta_box() {
require_once('slider_metafield.php'); //CMB2 Slider Field
}
add_action('init', 'initialize_showcase_meta_box', 9999 );
/** LOAD --- Related CSS and JS */
function load_custom_cmb2_script() {
wp_enqueue_style( 'cmb2_slider-css', 'slider_metafield.css', false, '1.0.0' ); //CMB2 Slider Field Styling
wp_enqueue_script( 'cmb2_slider-js', 'slider_metafield.js' , '', '1.0.0', true ); // CMB2 Sliding Event
}
add_action( 'admin_enqueue_scripts', 'load_custom_cmb2_script', 20 );
Now we are ready to use CMB2 Slider Field
$cmb->add_field( array(
'name' => __('Slider Field', 'cmb2'),
'id' => $prefix . 'slider_field_id', //change to your prefix
'desc' => __('Slider Field Description.','cmb2'),
'type' => 'slider',
'min' => '0',
'step' => '2',
'max' => '100',
'default' => '0', // start value
'value_label' => 'Value:',
));
1 Comment
You can post comments in this post.
Hi there
Thank you for this awesome tutorial.
Here i am having a console issue. If you have time and check i would be grateful.
prntscr.com/of3e61
Thanks
Sajib Talukder 5 years ago
Leave A Reply