Docs

[Dariya]

Hi Team,

I have searched the archive but could not find a similar question.

How can I make my featured posts in Carousel to appear “random”? Right now they appear in the same ‘consecutive’ order (i.e. the newest first and the older ones last), but I would like them to appear randomly. And no, I cannot use the “random” feature instead of “featured”, because I need to have full control over which posts appear in carousel (we have some posts without pictures and I don’t want them to appear in carousel).

Thanks so much in advance!

Daria

[Rahul]

Hey There,

Thanks for writing in!

To make the post carousel random, head over to Appearance > Customize > Ethos > POST CAROUSEL > Display and select the option Random.

You can even make your posts to Carousel by marking its option under the current post. See attached!

Hope this helps!

[Dariya]

Hi Rahul,

Sorry your answer is incorrect (or maybe you did not understand my question unfortunately).

The “Featured” Carousel posts are the ones you can manually select/unselect/ decide to feature in the carousel bar. Yes, you can select them as shown on your screenshot. But here’s the issue with this option – they are shown in a static, consecutive order – from newest to the oldest one. They are not randomized, they always show up the same in the carousel bar.

The “Random” Carousel posts are the ones that are shown in a random order but the problem with this option is that ALL posts are shown – including posts without pictures. Therefore there is no manual control/oversight with this option.

What I need is the cross between the two: I would like to use the “featured” posts but in a “random” (not static/ consecutive) order.

Does this make sense?

Thanks so much!

[Rupok]

Hi Daria,

Sorry for the confusion. So you want to show the featured posts but randomly, right? Unfortunately it’s not possible. You can show either the Featured posts or all posts in random. You should set the exact number of post as featured that you are setting to show as “Post per page” – http://prntscr.com/cwsutl

So if you set 7 post, then the one will be ignored and that’s how it works.

Hope this makes sense.

[Dariya]

Hi Rupok,

Thanks. Can you please advise why is it not possible? I am sure there is a code for that. Perhaps something similar to the below code I got from your team before (this code was for another feature than had to do w/Carousel):

Thank you!

<?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’ );
$display = x_get_option( ‘x_ethos_post_carousel_display’ );

switch ( $display ) {
case ‘most-commented’ :
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => $count,
‘orderby’ => ‘comment_count’,
‘order’ => ‘DESC’
);
break;
case ‘random’ :
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => $count,
‘orderby’ => ‘rand’
);
break;
case ‘featured’ :
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => $count,
‘orderby’ => ‘date’,
‘meta_key’ => ‘_x_ethos_post_carousel_display’,
‘meta_value’ => ‘on’
);
break;
}
/* remove all posts without thumbnail */
$args[‘meta_key’] = ‘_thumbnail_id’;
$args[‘meta_compare’] = ‘EXISTS’;

?>

<?php if ( $is_enabled ) : ?>

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

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

<?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’ ); ?>

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

<?php wp_reset_query(); ?>

<script>

jQuery(document).ready(function() {
jQuery(‘.x-post-carousel’).slick({
autoplay: true,
autoplaySpeed: 2000,
speed : 500,
slide : ‘li’,
slidesToShow : <?php echo x_get_option( ‘x_ethos_post_carousel_display_count_extra_large’ ); ?>,
slidesToScroll : 1,
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>

<?php endif; ?>

[Rue Nel]

Hello There,

Sorry for the confusion. You can display featured post in the post carousel with a random order. Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?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' );
$display    = x_get_option( 'x_ethos_post_carousel_display' );

switch ( $display ) {
  case 'most-commented' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand',
      'meta_key'       => '_x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled ) : ?>

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

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

    <?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; ?>

    <?php wp_reset_query(); ?>

    <script>

    jQuery(document).ready(function() {
      jQuery('.x-post-carousel').slick({
        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; ?>

3] Save the file named as _post-carousel.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/ethos/

What has changed in the code? It is just the orderby line. It was changed from date to rand;

case 'featured' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand',
      'meta_key'       => '_x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );

Please let us know if this works out for you.

[Dariya]

Hi Rue Nel,

Yep, it worked woohooo!!! Thank you sooooo much!
You guys are really awesome! 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts