Skip to content

Instantly share code, notes, and snippets.

@ramseyp
Created July 17, 2013 00:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ramseyp/6016489 to your computer and use it in GitHub Desktop.
Save ramseyp/6016489 to your computer and use it in GitHub Desktop.
Basic carousel / slider code using flexslider.
<?php
/**
* Basic slider. Uses flexslider.js, theme options framework, a custom post type and custom meta boxes.
*
* @author Pat Ramsey
* @link http://slash25.com
*/
add_image_size( 'slider', 920, 286, true ); // we want a new image size for the slider background
function slide_scripts() {
$css_loc = get_template_directory_uri().'/assets/css/';
$js_loc = get_template_directory_uri().'/assets/js/';
if ( is_front_page() ) : // conditionally load this only on the front page
wp_register_style('flexslide',$css_loc.'flexslider.css', array(), 'screen'); // register the flexslider css
wp_enqueue_style('flexslide'); // enqueue the flexslider css
wp_register_script('flexslider', $js_loc.'jquery.flexslider-min.js', array('jquery'), '2',false); // register the flexslider js
wp_enqueue_script('flexslider'); // enqueue flexslider.js
endif;
}
add_action( 'wp_enqueue_scripts','slide_scripts' );
function s25_load_flexslider_script() {
$slider_show = of_get_option( 's25_show_slider' );
if ( is_front_page() && 1 == $slider_show ) { // Loads only if the theme option "s25_show_slider" is checked and if it's the homepage
$slide_duration = of_get_option( 's25_slider_speed' ); // read the theme option for the duration value
$slide_trans = of_get_option( 's25_slider_transition' ); // read the theme option for the transition value
echo '<script type="text/javascript" charset="utf-8">';
echo 'jQuery(window).load(function() {
jQuery(".flexslider").flexslider({
animation: "fade",
controlNav: false,
controlsContainer: "#slide_btm",
directionNav: true,
slideshowSpeed: '. $slide_duration .',
animationSpeed: '. $slide_trans .',
slideshow: false
});
});
</script>';
}
}
function s25_slides() {
$slider_show = of_get_option( 's25_show_slider' ); // you can turn off or on the whole slider from a theme option checkbox
if ( is_front_page() && 1 == $slider_show ) { // Loads only if the theme option "s25_show_slider" is checked and if it's the homepage
echo '<aside class="slider"><div class="container"><div class="bgwrap row-fluid">';
echo '<div class="flexslider">';
$args = array(
'post_type' => 's25_slide', // uses a custom post type for the slides
'orderby' => 'menu_order', // orders them by the menu order field
'order' => 'ASC', // ASCENDING order
'posts_per_page' => -1 // grabs all published slides
);
$sliderq = new WP_Query( $args);
if ( $sliderq->have_posts() ) { // starts the custom loop
echo '<div class="holder">';
echo '<ul class="slides">';
while ( $sliderq->have_posts() ) : $sliderq->the_post();
$slider_meta = get_post_custom(); // grab all the custom meta from the slide post type
if ( has_post_thumbnail( $sliderq->post->ID )) :
$bg = wp_get_attachment_image_src( get_post_thumbnail_id($sliderq->post->ID), 'slider' ); // uses the featured image for the background
$slide_bg = $bg[0];
endif;
if ( $slider_meta['s25_slide_blurb'][0] != '' ) { $slide_blurb = $slider_meta['s25_slide_blurb'][0]; } else { $slide_blurb = ''; } // if the slide blurb custom field has content, output it, otherwise meh.
if ( 'on' == $slider_meta['s25_show_slide_cta'][0] ) { // if the "Show Call to Action" checkbox is selected:
$slide_cta = '<div class="slidecta"><a href="'. $slider_meta['s25_slide_link'][0] .'">'. $slider_meta['s25_slide_cta_txt'][0] .'</a></div>';
} else { $slide_cta = ''; }
?>
<li class="slide"><div class="wrap" style="background-image: url(<?php echo $slide_bg; ?>);">
<div class="slide_blurb">
<?php echo wpautop($slide_blurb); ?>
<?php echo $slide_cta; ?>
</div>
</div><!-- end .wrap --></li>
<?php
endwhile;
echo '</ul>';
echo '<div id="slide_btm"></div>';
wp_reset_postdata(); // reset the post data. keep things clean, kids
echo '</div>';
}
echo '</div><!-- end .flexslider -->';
echo '</div><!-- end .bgwrap --></div><!-- end .container --></aside>';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment