WordPress Plugin: Flexslider Admin

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:

The Flexslider slider in action, at the top of the “front page” content.
The list of slides in wp-admin
Finally, this is what editing a slide looks like
<?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&#39; );
wp_enqueue_script( 'flexslider', 'https://www.example.com/path/to/flexslider/flexslider/jquery.flexslider.js&#39;, 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' );

view raw
fsa-2017-example.php
hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s