Ethos POST CAROUSEL show latest posts

[Diaantsje]

Hello,
I want to display only the latest 5 posts in the Post Carousel. How can i do that?
Thanx

[jade]

Hi Diaantsje,

The Ethos Carousel has three display options out of the box and recent posts is not included in that.

You can find the settings about when you go to X > Theme Options > Ethos > Post Carousel. From there you can easily set the number of posts you want to be displayed in the carousel.

If you really want to have the most recent post displayed on the carousel, you will have to override the default theme code through the child theme.

Please install and activate the child theme. If you do not have the child theme installed yet, you can download it from here. Once you have it installed and activated, please login through FTP then go to wp-content/themes/x-child then create the directory path /framework/legacy/cranium/headers/views/ethos/ then create the file _post-carousel.php inside the ethos directory.

Edit the file and add this code:

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-CAROUSEL.PHP
// -----------------------------------------------------------------------------
// Outputs the post carousel that appears at the top of the masthead.
// =============================================================================

GLOBAL $post_carousel_entry_id;

$post_carousel_entry_id = get_the_ID();

$is_enabled = x_get_option( 'x_ethos_post_carousel_enable' ) == '1';
$count      = x_get_option( 'x_ethos_post_carousel_count' );

$args = array(
  'post_type'      => 'post',
  'posts_per_page' => $count,
  'order'          => 'DESC',
  'orderby'        => 'date',
);

?>

<?php if ( $is_enabled ) : ?>

  <?php $wp_query = new WP_Query( $args ); ?>

  <?php if ( $wp_query->post_count > 0 ) : ?>

    <ul class="x-post-carousel unstyled">

      <?php if ( $wp_query->have_posts() ) : ?>
        <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

          <li class="x-post-carousel-item">
            <?php x_ethos_entry_cover( 'post-carousel' ); ?>
          </li>

        <?php endwhile; ?>
      <?php endif; ?>

      <script>

      jQuery(document).ready(function() {
        jQuery('.x-post-carousel').xSlick({
          speed          : 500,
          slide          : 'li',
          slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
          slidesToScroll : 1,
          rtl            : <?php echo json_encode( is_rtl() ); ?>,
          responsive     : [
            { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large' ); ?> } },
            { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium' ); ?> } },
            { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small' ); ?> } },
            { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small' ); ?> } }
          ]
        });
      });

      </script>

    </ul>

  <?php endif; ?>

  <?php wp_reset_query(); ?>

<?php endif; ?>

Please be aware that the code above will ignore the settings that is set for the Display settings in Ethos.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.