How do I make the oldest post display first in post slider (Ethos Stack)

[JonFrancisThompson]

Hi,

I need help working with the post slider in Ethos. By default, if using featured posts, the slider displays the most recent post first. I would like to display the oldest selected post first instead. I only want to reverse the order in the post slider, and I want the post carousel and recent posts list to continue to display most recent first. All I want to do is make the post slider display the oldest post first while not effecting the rest of the blog posts. Is there a way that I can accomplish this? Thanks!

[ruenel]

Hello There,

Thanks for writing in!

What you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Once 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-SLIDER.PHP
// -----------------------------------------------------------------------------
// Outputs the post slider that appears at the top of the blog.
// =============================================================================

$is_blog    = is_home();
$is_archive = is_category() || is_tag();

if ( $is_blog || $is_archive ) :

  if ( $is_blog ) {
    $info = array( 'blog', NULL, NULL, '_x_ethos_post_slider_blog_display' );
  } elseif ( $is_archive ) {
    $type = ( is_category() ) ? 'cat' : 'tag_id';
    $info = array( 'archive', $type, get_queried_object_id(), '_x_ethos_post_slider_archives_display' );
  }

  $slider_enabled = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_enable' ) == '1';
  $count          = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_display' );

  $blog_slider_is_enabled    = $slider_enabled && $is_blog;
  $archive_slider_is_enabled = $slider_enabled && $is_archive;
  $is_enabled                = $blog_slider_is_enabled || $archive_slider_is_enabled;

  switch ( $display ) {
    case 'most-commented' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'comment_count',
        'order'          => 'DESC',
        $info[1]         => $info[2]
      );
      break;
    case 'random' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'rand',
        $info[1]         => $info[2]
      );
      break;
    case 'featured' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'date',
        'order'          => 'DESC',
        'meta_key'       => $info[3],
        'meta_value'     => 'on',
        'ignore_sticky_posts' => true
      );
      break;
  }

  ?>

  <?php if ( $is_enabled ) : ?>

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

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

      <div class="x-flexslider x-post-slider">
        <ul class="x-slides">

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

              <li class="x-slide">
                <article <?php post_class( 'x-post-slider-entry' ); ?> style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
                  <a href="<?php the_permalink(); ?>">
                    <div class="cover">
                      <div class="middle">
                        <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
                        <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
                        <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
                      </div>
                    </div>
                  </a>
                </article>
              </li>

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

        </ul>
      </div>

      <script>
        jQuery(window).load(function() {
          jQuery('.x-post-slider').flexslider({
            controlNav   : false,
            selector     : '.x-slides > li',
            prevText     : '<i class="x-icon-chevron-left" data-x-icon-s="&#xf053;"></i>',
            nextText     : '<i class="x-icon-chevron-right" data-x-icon-s="&#xf054;"></i>',
            animation    : 'fade',
            smoothHeight : true,
            slideshow    : true
          });
        });
      </script>

    <?php endif; ?>

    <?php wp_reset_query(); ?>

  <?php endif; ?>

<?php endif; ?>

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

You will need to create the folder path because it does not exist in your child theme yet.

Please let us know how it goes.