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' ); |