Flexslider is a very powerful jQuery slider toolkit. While there are plugins that can provide a robust interface to manage slides, I needed something a lot simpler.
I ended up writing a plugin to manage all of the slide data as a custom post type in the WordPress backend, but leave the frontend code to the developer:
https://github.com/emrikol/flexslider-admin
I’ve written some example code to show how to integrate this plugin with the default twentyseventeen theme, along with some screenshots:
| <?php | |
| function flexslider_admin_init() { | |
| if ( class_exists( 'Flexslider_Admin' ) ) { | |
| $sizes = array( | |
| array( | |
| 'name' => 'slides', | |
| 'width' => 1120, | |
| 'height' => 630, | |
| 'crop' => true, | |
| ), | |
| array( | |
| 'name' => 'slides-thumbnail', | |
| 'width' => '112', | |
| 'height' => '63', | |
| 'crop' => true, | |
| ), | |
| ); | |
| Flexslider_Admin_Views::add_sizes( $sizes ); | |
| add_filter( 'flexslider_admin_slide_width', function( $width ) { | |
| return 1120; | |
| } ); | |
| add_filter( 'flexslider_admin_slide_height', function( $height ) { | |
| return 630; | |
| } ); | |
| add_filter( 'flexslider_admin_thumbnail_size', function ( $size ) { | |
| return 'slides-thumbnail'; | |
| } ); | |
| } | |
| } | |
| add_action( 'init', 'flexslider_admin_init' ); | |
| function flexslider_init_scripts() { | |
| if ( is_front_page() ) { | |
| $flexslider_vars = array( | |
| 'data' => array( | |
| 'animation' => get_theme_mod( 'fsa-slides_animation', 'fade' ), | |
| 'easing' => get_theme_mod( 'fsa-slides_easing', 'swing' ), | |
| 'direction' => get_theme_mod( 'fsa-slides_direction', 'horizontal' ), | |
| 'slideshowSpeed' => ( get_theme_mod( 'fsa-slides_speed' ) ? get_theme_mod( 'fsa-slides_speed' ) : 7 ) * 1000, | |
| 'animationSpeed' => ( get_theme_mod( 'fsa-slides_animation_speed' ) ? get_theme_mod( 'fsa-slides_animation_speed' ) : .6 ) * 1000, | |
| 'initDelay' => ( get_theme_mod( 'fsa-slides_start_delay' ) ? get_theme_mod( 'fsa-slides_start_delay' ) : 0 ) * 1000, | |
| 'reverse' => get_theme_mod( 'fsa-slides_reverse' ) ? get_theme_mod( 'fsa-slides_reverse' ) : false, | |
| 'pauseOnAction' => get_theme_mod( 'fsa-slides_pause_interaction' ) ? get_theme_mod( 'fsa-slides_pause_interaction' ) : false, | |
| 'pauseOnHover' => get_theme_mod( 'fsa-slides_pause_hover' ) ? get_theme_mod( 'fsa-slides_pause_hover' ) : true, | |
| ), | |
| ); | |
| $flexslider_inline = <<<EOT | |
| jQuery( window ).load( function() { | |
| jQuery( '.flexslider' ).flexslider( { | |
| animation: flexslider_admin.data.animation, | |
| easing: flexslider_admin.data.easing, | |
| direction: flexslider_admin.data.direction, | |
| slideshowSpeed: flexslider_admin.data.slideshowSpeed, | |
| animationSpeed: flexslider_admin.data.animationSpeed, | |
| initDelay: flexslider_admin.data.initDelay, | |
| reverse: flexslider_admin.data.reverse, | |
| pauseOnAction: flexslider_admin.data.pauseOnAction, | |
| pauseOnHover: flexslider_admin.data.pauseOnHover, | |
| } ); | |
| } ); | |
| EOT; | |
| wp_enqueue_style( 'flexslider', 'https://www.example.com/path/to/flexslider/flexslider/flexslider.css' ); | |
| wp_enqueue_script( 'flexslider', 'https://www.example.com/path/to/flexslider/flexslider/jquery.flexslider.js', array( 'jquery' ) ); | |
| wp_add_inline_script( 'flexslider', $flexslider_inline ); | |
| wp_localize_script( 'flexslider', 'flexslider_admin', $flexslider_vars ); | |
| } | |
| } | |
| add_action( 'wp_enqueue_scripts', 'flexslider_init_scripts' ); | |
| function flexslider_admin_add_to_front_page( $content ) { | |
| if ( is_front_page() ) { | |
| ob_start(); | |
| ?> | |
| <div class="flexslider"> | |
| <ul class="slides"> | |
| <?php | |
| foreach ( Flexslider_Admin::get_slides() as $slide_id => $slide ) { | |
| $slide_image_html = get_the_post_thumbnail( $slide_id ); | |
| $slide_title = get_the_title( $slide_id ); | |
| $slide_link = $slide['url']; | |
| if ( ! empty( $slide_link ) ) { | |
| $slide_html = sprintf( '<a href="%s" title="%s">%s</a>', | |
| esc_url( $slide_link ), | |
| esc_attr( $slide_title ), | |
| $slide_image_html | |
| ); | |
| } else { | |
| $slide_html = $slide_image_html; | |
| } | |
| echo sprintf( '<li>%s</li>', $slide_html ); // XSS Ok. | |
| } | |
| ?> | |
| </ul> | |
| </div> | |
| <?php | |
| $content = ob_get_clean() . $content; | |
| } | |
| return $content; | |
| } | |
| add_filter( 'the_content', 'flexslider_admin_add_to_front_page' ); |
