Make a Customizr slider display recent posts

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Updated Sep 2015: This snippet now works only with Customizr 3.4.* and Customizr-Pro 1.2.*

Updated June 2015: This snippet now works only with Customizr > 3.3.26 and Customizr-Pro > 1.1.9

Updated June 2015: Fixed conflict with AddThis plugin : better handling of the post excerpt. Thanks to @Claudia Lopez for reporting this.

(> strictly )

In this post I will show you how to make the front-page slider display the last 5 posts tagged in with a certain tag.

Steps:

  1. Follow just the #1,#2 and #4 steps of this tutorial. (In the snippet below we assume you’ve chosen “front-slider” to name your slider). The uploaded image, added to the slider, will be used as default image when posts have no image.
  2. Create a new post, or edit the posts you want, adding the tag “front-slider”. This will give us the control on which post display in the front slider. The displayed image for the post(s), in the slider, will be the featured image, if set, otherwise the first attachment image will be used. If neither of those are available, the abovementioned default image will be used.
  3. Copy the snippet below in your child-theme functions.php .
  4. [Optional] You can also chose to display a different image, than the featured one, for this slider. To achieve that just:
    1. upload a new image (see the slider’s image sizes)
    2. add a custom field named “slide_img” to the post and set its value with the ID of the just uploaded image..
/* Works with Customizr > 3.3.26 and Customizr-Pro > 1.1.9 */
add_filter('tc_core', 'use_custom_slider_class');
function use_custom_slider_class($classes){
  //don't instantiate default class
  unset( $classes['content'][
      array_search(array('inc/parts','slider'), $classes['content'])
    ]
  );
  //instantiate our class
  new TC_Slider_mod;
  return $classes;
}
add_filter('tc_slider_name_id', 'my_slider_of_posts');
function my_slider_of_posts( $slider_name_id ){
  if ( $slider_name_id == 'front-slider' )
    return array(
        'slider'     => 'front-slider',
        'query'      => array(
                      'tag'            => "front-slider",
                      'posts_per_page' => 5,
                      'order'          => 'desc'
                  ),
    );
  return $slider_name_id;
}
 
if ( ! defined('CUSTOMIZR') )
  define('CUSTOMIZR', get_template_directory() );
 
require_once( CUSTOMIZR . '/inc/parts/class-content-slider.php');
class TC_Slider_mod extends TC_slider{
  private $saved_slides;
  private $slider_name_id = false;
  private $layout_value;
  private $img_size;
  private $layout_class;
 
  //override tc_set_slider_hooks()
  function tc_set_slider_hooks() {
    //gets the actual page id if we are displaying the posts page
    $queried_id = $this -> tc_get_real_id();
 
    $slider_name_id = apply_filters('tc_slider_name_id', $this ->tc_get_current_slider($queried_id) );
 
    if ( ! is_array( $slider_name_id ) )
      return parent::tc_set_slider_hooks();
 
    extract($slider_name_id);
    $all_sliders = TC_utils::$inst -> tc_opt( 'tc_sliders');
    $saved_slides = ( isset($all_sliders[$slider]) ) ? $all_sliders[$slider] : false;
 
    //if the slider not longer exists or exists but is empty, return false
    if ( !isset($saved_slides) || ! is_array($saved_slides) || empty($saved_slides) )
        return;
 
    
    add_action( '__after_header' , array( $this , 'tc_slider_display' ) );
    add_action( '__after_carousel_inner' , array( $this , 'tc_slider_control_view' ) );
    //adds the center-slides-enabled css class
    add_filter( 'tc_carousel_inner_classes', array( $this, 'tc_set_inner_class') );
    
    $this -> tc_slider_mod_set_properties( $saved_slides, $slider_name_id, $queried_id );
  }
 
  private function tc_get_current_slider($queried_id) {
   //gets the current slider id
   $_home_slider = TC_utils::$inst->tc_opt( 'tc_front_slider' );
   $slider_name_id = ( tc__f('__is_home') && $_home_slider ) ? $_home_slider : esc_attr( get_post_meta( $queried_id, $key = 'post_slider_key' , $single = true ) );
   return apply_filters( 'tc_slider_name_id', $slider_name_id , $queried_id);
  }
 
  private function tc_get_real_id() {
 
    global $wp_query;
    $queried_id = get_queried_object_id();
    return ( ! tc__f('__is_home') && $wp_query -> is_posts_page && ! empty($queried_id) ) ? $queried_id : get_the_ID();
 
  }
 
  function tc_slider_mod_set_properties( $saved_slides, $slider_name_id, $queried_id ){
 
    $this -> saved_slides   = $saved_slides;
    $this -> slider_name_id = $slider_name_id;
    //gets slider options if any
    $layout_value = tc__f('__is_home') ? TC_utils::$inst->tc_opt( 'tc_slider_width' ) : esc_attr(get_post_meta( $queried_id, $key = 'slider_layout_key' , $single = true ));
 
    $this -> layout_value = apply_filters( 'tc_slider_layout', $layout_value, $queried_id );
 
    //declares the layout vars
    $this -> layout_class = implode( " " , apply_filters( 'tc_slider_layout_class' , ( 0 == $layout_value ) ? array('container', 'carousel', 'customizr-slide') : array('carousel', 'customizr-slide') ) );
 
    $this -> img_size = apply_filters( 'tc_slider_img_size' , ( 0 == $layout_value ) ? 'slider' : 'slider-full');
 
  }
 
  //override tc_slider_display
  function tc_slider_display() {
    if ( ! $this -> slider_name_id )
      return parent::tc_slider_display();
    
    $slider_name_id = $this -> slider_name_id;
    $img_size       = $this -> img_size;
    $saved_slides   = $this -> saved_slides;
    $layout_class   = $this -> layout_class;
 
    $slides = $this -> tc_get_posts_slides( $slider_name_id, $img_size, $saved_slides );
    //returns nothing if no slides to display
    if ( ! isset($slides) || ! $slides )
      return;
 
    extract($slides);
    //define carousel inner classes
    $_inner_classes = implode( ' ' , apply_filters( 'tc_carousel_inner_classes' , array( 'carousel-inner' ) ) );
    ob_start();
    ?>
      <div id="customizr-slider-<?php echo self::$rendered_slides ?>" class="<?php echo $layout_class ?> ">
        <?php if ( 1 == esc_attr( TC_utils::$inst->tc_opt( 'tc_display_slide_loader') ) && apply_filters( 'tc_display_slider_loader' , true ) ): ?>
          <div class="tc-slider-loader-wrapper">
            <div class="tc-img-gif-loader">
              <img data-no-retina src="<?php echo apply_filters('tc_slider_loader_src' , sprintf( '%1$s/%2$s' , TC_BASE_URL , 'inc/assets/img/slider-loader.gif') ) ?>">
            </div>
          </div>
        <?php endif; ?>
        <?php do_action( '__before_carousel_inner' , $slides ) ?>
          <div class="<?php echo $_inner_classes?>">
            <?php
              foreach ($slides as $id => $data){
                $_view_model = compact( "id", "data" , "slider_name_id", "img_size" );
                $this -> tc_render_single_slide_view( $_view_model );
              }
            ?>
         </div><!-- /.carousel-inner -->
         <?php do_action( '__after_carousel_inner' , $slides ) ?>
      </div><!-- /#customizr-slider -->
    <?php
    $html = ob_get_contents();
    if ($html) ob_end_clean();
    echo apply_filters( 'tc_slider_display', $html, $slider_name_id );
  }
 
  function tc_get_posts_slides( $slider_name_id, $img_size, $saved_slides){
    extract($slider_name_id);
    global $wp_query, $wp_the_query, $post;
    $wp_query = new WP_Query($query);
        
    // if you don't want to show the first attachment when featured image isn't set
    // remove the line below
    add_filter('tc_show_single_post_content', '__return_false');
 
    // remove smart load if any
    $smart_load_enabled = method_exists('TC_utils', 'tc_parse_imgs') && method_exists('TC_utils', 'tc_opt') && esc_attr( TC_utils::$inst->tc_opt( 'tc_img_smart_load' ) );
    if ( $smart_load_enabled )
        remove_filter('tc_thumb_html', array(TC_utils::$instance, 'tc_parse_imgs'));
 
    // build our array of slides
 
    //initialize the slides array
    $slides   = array();
    //init slide active state index
    $__loop_index        = 0;
    while ( have_posts() ){
      the_post();
            
      //title
      $title                  = $post->post_title;
      $default_title_length   = apply_filters( 'tc_slide_title_length', 80 );
      $title                  = ( strlen($title) > $default_title_length ) ? substr( $title,0,strpos( $title, ' ' , $default_title_length) ). ' ...' : $title;
      //lead text
      $text                   = $this -> tc_get_post_slides_excerpt( $post->post_excerpt, apply_filters('tc_slide_text_length', 250), '...');
 
      //button text
      $button_text            = __('Read more &raquo;', 'customizr');
      $default_button_length  = apply_filters( 'tc_slide_button_length', 80 );
      $button_text            = ( strlen($button_text) > $default_button_length ) ? substr( $button_text,0,strpos( $button_text, ' ' ,$default_button_length)). ' ...' : $button_text;
 
      //link post id
      $link_id                = get_the_id();
        
      $id                     = $link_id;
      //button link
      $link_url               = $link_id ? get_permalink( $link_id ) : 'javascript:void(0)';
 
      //sets the first slide active
      $active                 = ( 0 == $__loop_index ) ? 'active' : '';
 
      $color_style            = '';
 
      //attachment image
      $alt                    = apply_filters( 'tc_slide_background_alt' , trim(strip_tags( get_the_title() ) ) );
      $slide_background       = $this -> tc_get_thumbnail_data($img_size, $alt);
        //adds all values to the slide array only if the content exists (=> handle the case when an attachment has been deleted for example). Otherwise apply a default slide
      if ( empty($slide_background) && isset($saved_slides[1]) )
        $slide_background   = wp_get_attachment_image( $saved_slides[1], $img_size, false, array( 'class' => 'slide' , 'alt' => $alt ) );
 
      $slides[$id]            = array(
                                'title'               =>  $title,
                                'text'                =>  $text,
                                'button_text'         =>  $button_text,
                                'link_id'             =>  $link_id,
                                'link_url'            =>  $link_url,
                                'active'              =>  $active,
                                'color_style'         =>  $color_style,
                                'slide_background'    =>  $slide_background,
                                'link_target'         =>  '_self'
      );
 
      //increments active index
      $__loop_index++;
    }//end of slides loop
    
    $slides = apply_filters('tc_post_slides', ( !empty($slides) ) ? $slides : false, $img_size);
    // if you chose to not show the first attachment when featured image isn't set
    // remove the line below
    remove_filter('tc_show_single_post_content', '__return_false');
 
    // re-add smart load if removed
    if ( $smart_load_enabled )
      add_filter('tc_thumb_html', array(TC_utils::$instance, 'tc_parse_imgs'));
 
    $wp_query = $wp_the_query;
    
    //returns the slides or false if nothing
    return $slides;
  }// end pf tc_get_the_slides

  function tc_get_thumbnail_data($img_size, $alt){
    $attachment_id = get_post_meta( get_the_ID(), 'slide_img');
    if ( $attachment_id )
      return wp_get_attachment_image( $attachment_id[0], $img_size, false, array('class' => 'slide' , 'alt' => $alt) );
    $thumb = TC_post_thumbnails::$instance -> tc_get_thumbnail_model($img_size);
    $thumb = isset($thumb) && isset($thumb['tc_thumb']) ? $thumb['tc_thumb'] : null;
    return $thumb;
  }

  function tc_get_post_slides_excerpt( $excerpt, $default_text_length, $more ){
    if ( '' == $excerpt ) {
      $excerpt = get_the_content('');      
      $excerpt = strip_shortcodes( $excerpt );
      $excerpt = apply_filters( 'the_content', $excerpt );
      $excerpt = str_replace(']]>', ']]&gt;', $excerpt );
    }
    
    $excerpt = trim(strip_tags($excerpt));
    $end_substr = $excerpt_length = strlen( $excerpt );
    if ( $excerpt_length > $default_text_length ){
      $end_substr = strpos( $excerpt, ' ' , $default_text_length);
      $end_substr = ( $end_substr !== FALSE ) ? $end_substr : $default_text_length;
      $excerpt = substr( $excerpt , 0 , $end_substr );
    }
    return ( $end_substr == $excerpt_length ) ? $excerpt : $excerpt . ' '.$more;
  }
}

Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.

Goodluck and goodbye

Leave a comment

Your email address will not be published. Required fields are marked *

74 thoughts on “Make a Customizr slider display recent posts”