[Kasia MParticipant]

Hello

Can I set up the theme to show:

1) POST CAROUSEL. I would like to show only posts from chosen category.
2) POST SLIDER. I would like to show 5 recent posts.

Could you tell me how to do that?

Thanks for any help!

Bye!

[Kasia MParticipant]

I’m using Ethos.

[RadModerator]

Hi Kasia,

Thank you for writing in!

Post carousel with category selection isn’t possible option for now. But you could do that by modifying post carousel template.

1. Copy this file /x/framework/views/ethos/_post-carousel.php to your ethos child theme (eg. /x-child-ethos/framework/views/ethos/_post-carousel.php)
2. Edit your _post-carousel.php and paste 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 = get_theme_mod( 'x_ethos_post_carousel_enable' ) == 1;
$count      = get_theme_mod( 'x_ethos_post_carousel_count' );
$display    = get_theme_mod( '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' => 'post__in', 'post__in' => x_intval_explode( get_theme_mod( 'x_ethos_post_carousel_featured' ) ) );
    break;
}

$args['cat'] = '113,3';

?>

<?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 get_theme_mod( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
        slidesToScroll : 1,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo get_theme_mod( 'x_ethos_post_carousel_display_count_large' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo get_theme_mod( 'x_ethos_post_carousel_display_count_medium' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo get_theme_mod( 'x_ethos_post_carousel_display_count_small' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo get_theme_mod( 'x_ethos_post_carousel_display_count_extra_small' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

3. From the given code, find this $args['cat'] = '113,3'; and change its ID to your liking (separated by comma).

Example:

$args['cat'] = '10,30,118,902';

4. Save and upload.

About 5 recent posts’s post slider.

1. Copy this file /x/framework/views/ethos/_post-slider.php to your ethos child theme (eg. /x-child-ethos/framework/views/ethos/_post-slider.php)
2. Edit your _post-slider.php and paste this code :

<?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 );
  } elseif ( $is_archive ) {
    $info = array( 'archive', 'cat', get_queried_object_id() );
  }

  $slider_enabled = get_theme_mod( 'x_ethos_post_slider_' . $info[0] . '_enable' ) == 1;
  $count          = get_theme_mod( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = get_theme_mod( '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' => 'post__in', 'post__in' => x_intval_explode( get_theme_mod( 'x_ethos_post_slider_' . $info[0] . '_featured' ) ) );
      break;
  }

$args['orderby'] = 'date';
$args['order'] = 'desc';

?>

  <?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">View Post</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; ?>

3. Save and upload.

Hope this helps.

[Ragnar HParticipant]

Heyhey! This is great info and something I wanted to ask. However: how would the code be for the POST CAROUSEL if I wanted that to display the most recent posts, as opposed to category. That is: How do I modify the POST CAROUSEL to display the most recent posts?

Also: is it possible to remove the meta data from the POST CAROUSEL and the POST SLIDER, so that it doesn’t display what user posted, and in what category it was?

thanks!
Ragnar

[RadModerator]

Hi Ragnar,

You will simply change $args['cat'] = '113,3'; into this :

$args = array( 'post_type' => 'post', 'posts_per_page' => $count );

And yes, possible just add this code at your child theme’s functions.php

Post Carousel

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>       
            <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

Post Slider

1. Copy /wp-content/x/framework/views/ethos/_post-slider.php to your child theme (eg. /wp-content/x-child-ethos/framework/views/ethos/_post-slider.php)
2. Edit your copied _post-slider.php and remove the meta such as :

<span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>

3. Save and upload.

Hope these helps.

[Ragnar HParticipant]

Excellent! Works great!

One question more.. now when I post in the meta code it only displays the user who posted and the date, which I’m guessing this code does (sorry, I know so little about code):

<span class=”entry-cover-author”><?php echo get_the_author(); ?></span>
<span class=”entry-cover-date”><?php echo get_the_date( ‘F j, Y’ ); ?></span>

Is it possible to add some? For instance, to get an excerpt from the post, or the title, or category…

If so, what would I add?

[Jess LParticipant]

I’m also wanting to add the excerpt (instead of the category & author meta in my case) – is this possible?

[AlexanderKeymaster]

Hi there,

Retrieving the excerpt is possible with this code:

<?php the_excerpt(); ?>

But the carousel wasn’t designed to support it. You could try, but it will likely require additional styling to make it look right. Regretfully at this point we would be talking custom development, which is outside the scope of support we can offer. You may wish to consult a developer, or a service like Mircolancer or WerkPress to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Ragnar HParticipant]

This works great. Thanks for your help!

[Kosher KMember]

You’re Welcome,

Have a great day

[STEVE HParticipant]

Hi, I’m trying to limit the carousel to posts from one category, but when I create the _post-slider.php file in the child Ethos child theme, the carousel disappears, and it doesn’t matter what the customizer settings are (most commented, random, featured). I’m on the latest version of wordpress and X. The website is travel studies.org. All my login information can be found in the private posts on a previous thread: http://theme.co/x/member/forums/topic/adding-authors-name-to-post-as-a-link-to-author-page/#post-87048

Thanks as always for your expert help.

[ZeshanMember]

Hi Steve,

Thank you for writing in!

It could happen because you are using latest X version, while the above code was provided for previous versions. Please try using the following latest 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' );
$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' => 'post__in', 'post__in' => x_intval_explode( x_get_option( 'x_ethos_post_carousel_featured' ) ) );
    break;
}

$args['cat'] = '113,3';

?>

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

By replacing $args['cat'] = '113,3'; with your category IDs as mentioned above.

Hope this helps.

Thank you.

[STEVE HParticipant]

Hi, thanks for the correct code. Now when I use it, the carousel appears when the customizer is set for random and most commented, but when I set if for featured, no posts appear. There are 50 posts in the category id=1, which I set as follows:

$args[‘cat’] = ‘1’;

It doesn’t seem to matter whether I put the “1” in the featured post box or not, no posts appear, just the white space.

Thanks for your help.

[Paul RModerator]

Hi Steve,

Try to replace

$args['cat'] = ’1′;

with this

$args = array('post_type' => 'post','posts_per_page' => $count,'cat1'=>1);

Thanks

[STEVE HParticipant]

With that code, posts now do appear in the carousel when the customizer is set for featured posts. However, it doesn’t look like they are being filtered for category 1. (A post with a different category is showing up in the carousel.) Any other thoughts? And what would I need to change to try out a different category?

Thanks as always for your help.

[Author]

Posts