First of all, I should thank you the amazing WordPress theme you’ve developed here!

We’re developing an ethos-stack based website (http://dev.psamlisboa.pt), that needs a custom homepage that features the post slider.

Therefore, I’m in need of getting the post slider showing in this custom page.

Is that possible? I need to make it possibly by any means necessary…

Thanks in advanced 🙂

Kind Regards,

Joel Galvão
intuitiva.pt

Shortcode version: 2.6.1

Thanks for writing in!

This isn’t possible out of the box, but it could be achieved with some custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, to show the slider on your static homepage, copy the file wp-content/themes/x/framework/views/ethos/_post-slider.php in your child theme’s folder /framework/views/ethos/, open the file in a text editor and replace entire code with following:

<?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 || is_front_page() ) :

  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 || is_front_page();

  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',
        'meta_key'       => $info[3],
        'meta_value'     => 'on'
      );
      break;
  }

  if (is_front_page()) {
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand',
      $info[1]         => $info[2]
    );
  }

  ?>

  <?php if ( $is_enabled ) : ?>

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

        <?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-slide">
              <article id="post-<?php the_ID(); ?>" <?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; ?>

        <?php wp_reset_query(); ?>

      </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"></i>',
          nextText     : '<i class="x-icon-chevron-right"></i>',
          animation    : 'fade',
          smoothHeight : true,
          slideshow    : true
        });
      });
    </script>

  <?php endif; ?>

<?php endif; ?>

After that very similar step as above, copy the file wp-content/themes/x/framework/views/ethos/wp-header.php in your child theme’s folder /framework/views/ethos/, open the file in text editor and add following code at the end of the file:

<?php if (is_front_page()): ?>
  <div class="x-container max width"><?php x_get_view( 'ethos', '_post', 'slider' ); ?></div>
<?php endif; ?>

Hope this helps. 🙂

Thank you.

It’s working!

Many thanks on this 🙂

Best Regards,

Thanks.

Thanks for writing in.

Relating to the previous suggestions in this post, you can check on wp-index.php file in wp-content/themes/x/framework/views/ethos and make a copy of it and place it in the same directory in your child theme.

And then in the code, if you want to place contents before the post slider then simple add them before the line:

<?php x_get_view( 'ethos', '_post', 'slider' ); ?>

Hope this helps.