There were many times when client asked me to customize the current slider template and add new settings to the slider. There are many great sliders in WordPress plugins repository, but they are not extendable – you can’t add new settings to the slider and change the template or it’s very hard. This time I decided to spend a bit more time and create my own slider which you can extend easily.
It uses bxSlider jQuery library and a Custom Post Type for slides. bxSlider has many options and examples. You can filter out bxSlider options by using devslider_slider_js filter and change them.
How to add slider to your page?
Use [DevSlider] shortocde. Available options are: slidewidth (default: 0), minslides (default: 1), maxslides (default: 1), category (default: all or category slug).
How to change the slider template?
The template file of DevSlider contains the markup and template structure for the front-end. This template file can be found within the /devslider/inc/ directory.
You can edit this template in an upgrade safe way through overrides. Simply copy devslider-template.php to your theme folder.
How to add new settings?
There are two ways. You can use Advanced Custom Fields plugin or WordPress meta boxes.
If you are going to use ACF, then you need to tell that to DevSlider by using devslider_use_wp_meta_boxes filter.
|
1 2 3 4 5 |
// Remove/hide Slide settings meta box from slide page in back-end function my_slider_wp_meta_boxes() { return false; } add_filter('devslider_use_wp_meta_boxes', 'my_slider_wp_meta_boxes'); |
If you are going to use WordPress metaboxes, then you need to add a new meta box by using devslider_slider_settings_metabox action hook. For example, I’ll add a new input field for slide text.
|
1 2 3 4 5 6 7 8 |
function my_slider_settings_metabox($post) { $text = get_post_meta( $post->ID, '_slide_text', true ); echo '<label for="slide-text">'. __('Text', 'devslider') .'</label> <input id="slide-text" name="slide_text" type="text" value="'. esc_attr( $text ) .'" /> '; } add_action('devslider_slider_settings_metabox', 'my_slider_settings_metabox'); |
We also need to hook into devslider_save_slide action hook to save it.
|
1 2 3 4 |
function my_slider_save_slide($slide_id) { update_post_meta( $slide_id, '_slide_text', sanitize_text_field( $_POST['slide_text'] ) ); } add_action('devslider_save_slide', 'my_slider_save_slide'); |
Now in wp-content/themes/yourtheme/devslider-template.php you can use slide text. (If you don’t see this file in your theme, then you can .copy it from the plugin inc folder).
|
1 2 |
$text = get_post_meta( $slide->ID, '_slide_text', true ); echo esc_html( $text ); |
You are welcome to contribute to this slider on GitHub.
Available action hooks
- devslider_loaded
- before_devslider_init
- after_devslider_init
- devslider_enqueue_scripts
- devslider_add_meta_boxes
- devslider_slider_settings_metabox – available argument $post
- devslider_save_slide – available argument $post_id
Available filters
- devslider_slider_js – bxSlider JavaScript code
- devslider_use_wp_meta_boxes – available argument bool – true or false