Ethis-1 Filterable Index

I have read several posts but if the answer is there I am overlooking it.

my site, kensmith.fr is using the ethos stack. If I turn on filterable index and have 24,53,55,54,22,19,21,23,29

It does display correctly and the filter is working.

But I want it to default to ALL. Right now it defaults to Events and only shows one post.

Is there a way to default to all? I would like to start by showing all of the new posts

I apologies if this has been answered already but I have search for over a day now.

Hello There,

Thank you for the very detailed post information. Because 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. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

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/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$paged      = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$categories = get_categories( array( 'include' => x_get_option( 'x_ethos_filterable_index_categories' ) ) );

?>

<ul class="option-set unstyled" data-option-key="filter">
  <li>
    <a href="#" class="x-index-filters cf">
      <span class="x-index-filter-label"><?php _e( 'Filter by Topic', '__x__' ); ?></span>
      <i class="x-icon-chevron-down" data-x-icon="&#xf078;"></i>
    </a>
    <ul class="x-index-filters-menu unstyled">
        <?php static $i = 1; $selected = ( $i == 1 ) ? 'class="selected"' : ''; ?>
        <li><a href="#" <?php echo $selected; ?> data-category-id="0"><?php _e( 'All', '__x__' ); ?></a></li>
        
        <?php foreach ( $categories as $category ) { ?> 

        <li><a href="#" <?php echo $selected; ?> data-category-id="<?php echo $category->term_id ?>"><?php echo $category->name; ?></a></li>

        <?php //$i++; ?>
      <?php } ?>
    </ul>
  </li>
</ul>

<div class="x-filterable-index">

  <?php

  foreach ( $categories as $category ) {

    static $j = 1;

    $selected = ( $j == 1 ) ? ' selected' : '';
    $accent   = x_ethos_category_accent_color( $category->term_id, '#333333' );
    $wp_query = new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'cat' => $category->term_id ) );

    echo '<div class="x-filterable-category-group' . $selected . '" data-category-id="' . $category->term_id . '">';

      if ( $wp_query->have_posts() ) :
        while ( $wp_query->have_posts() ) : $wp_query->the_post();
          x_get_view( 'ethos', 'content', get_post_format() );
        endwhile;
      endif;

      echo '<a href="' . get_category_link( $category->term_id ) . '" class="x-btn-filterable x-btn">See All ' . $category->name . ' Posts</a>';

    echo '</div>';

    wp_reset_query();

    //$j++;

  }

  ?>

</div>

<script>

  jQuery('.x-index-filters').click(function(e) {
    e.preventDefault();
    var $this = jQuery(this);
    $this.parent().find('ul').slideToggle(600, 'easeOutExpo');
    if ( $this.hasClass('selected') ) {
      $this.removeClass('selected');
    } else {
      $this.addClass('selected');
    }
  });

  jQuery('.x-index-filters-menu a').click(function(e) {
    e.preventDefault();
    var $this       = jQuery(this);
    var $filter_cat = $this.data('category-id');
    jQuery('.x-index-filter-label').text($this.text());
    if ( ! $this.hasClass('selected') ) {
      $this.closest('ul').find('a').removeClass('selected');
      $this.addClass('selected');
    }
    jQuery('.x-filterable-category-group').each(function() {
      $this = jQuery(this);
      if ( $this.data('category-id') === $filter_cat ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      } else {
        $this.css({ 'display' : 'none', 'visibility' : 'hidden' });
      }
      if ( $filter_cat === 0 ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      }
    });
  });

</script>

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/ethos/
You will have to create these folder path because it does not exist by default.

We would loved to know if this has work for you. Thank you.

Worked great!
I had already used a child theme since one of the videos recommended it. They said even if you think you aren’t going to use it!

Thank you for your help!

You are welcome!

How can we make the “All” category to be selected by default. Now it’s just it’s own little option but is not selected at first. What i want to achieve is the same behaviour and layout as when all is selected. As to list all the category sections with the button on bottom saying “see all (category) posts”

Also, how do i add a matching category title to each block?

Demo page here:
http://ethos.erikeliasson.io/

Hi There,

Please add the following code under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($) {
	$("a[data-category-id='0'], .x-index-filters").trigger('click');
});

Let us know how it goes!

@thai

Thanks! Worked like a charm. However, i added the script in the same view as _index.php.

For anyone that wants the same output, copy the code below:

 <?php

// =============================================================================
// VIEWS/ETHOS/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$paged      = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$categories = get_categories( array( 'include' => x_get_option( 'x_ethos_filterable_index_categories' ) ) );

?>

<ul class="option-set unstyled" data-option-key="filter">
  <li>
    <a href="#" class="x-index-filters cf">
      <span class="x-index-filter-label"><?php _e( 'Filter by Topic', '__x__' ); ?></span>
      <i class="x-icon-chevron-down" data-x-icon="&#xf078;"></i>
    </a>
    <ul class="x-index-filters-menu unstyled">
        <?php static $i = 1; $selected = ( $i == 1 ) ? 'class="selected"' : ''; ?>
        <li><a href="#" <?php echo $selected; ?> data-category-id="0"><?php _e( 'All', '__x__' ); ?></a></li>
        
        <?php foreach ( $categories as $category ) { ?> 

        <li><a href="#" <?php echo $selected; ?> data-category-id="<?php echo $category->term_id ?>"><?php echo $category->name; ?></a></li>

        <?php //$i++; ?>
      <?php } ?>
    </ul>
  </li>
</ul>

<div class="x-filterable-index">

  <?php

  foreach ( $categories as $category ) {

    static $j = 1;

    $selected = ( $j == 1 ) ? ' selected' : '';
    $accent   = x_ethos_category_accent_color( $category->term_id, '#333333' );
    $wp_query = new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'cat' => $category->term_id ) );

    echo '<div class="x-filterable-category-group' . $selected . '" data-category-id="' . $category->term_id . '">';

      if ( $wp_query->have_posts() ) :
        while ( $wp_query->have_posts() ) : $wp_query->the_post();
          x_get_view( 'ethos', 'content', get_post_format() );
        endwhile;
      endif;

      echo '<a href="' . get_category_link( $category->term_id ) . '" class="x-btn-filterable x-btn">See All ' . $category->name . ' Posts</a>';

    echo '</div>';

    wp_reset_query();

    //$j++;

  }

  ?>

</div>

<script>

	jQuery(document).ready(function($) {
		$("a[data-category-id='0'], .x-index-filters").trigger('click');
	});

  jQuery('.x-index-filters').click(function(e) {
    e.preventDefault();
    var $this = jQuery(this);
    $this.parent().find('ul').slideToggle(600, 'easeOutExpo');
    if ( $this.hasClass('selected') ) {
      $this.removeClass('selected');
    } else {
      $this.addClass('selected');
    }
  });

  jQuery('.x-index-filters-menu a').click(function(e) {
    e.preventDefault();
    var $this       = jQuery(this);
    var $filter_cat = $this.data('category-id');
    jQuery('.x-index-filter-label').text($this.text());
    if ( ! $this.hasClass('selected') ) {
      $this.closest('ul').find('a').removeClass('selected');
      $this.addClass('selected');
    }
    jQuery('.x-filterable-category-group').each(function() {
      $this = jQuery(this);
      if ( $this.data('category-id') === $filter_cat ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      } else {
        $this.css({ 'display' : 'none', 'visibility' : 'hidden' });
      }
      if ( $filter_cat === 0 ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      }
    });
  });

</script>

I have som further request. I want to add the corresponding title to each block. Now it only lists all the posts and a button for each category, so it can be kind of confusing.

Also, if i want to restrict posts to show only 3 per category on “blog home page”, that would be great! I know we can adjust the number of posts to show via settings, but restricting them to show only three would make the setting global and also affect archive pages.

Hi there,

Please note that features that are not available of of the box in the theme falls beyond the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

But to get you started, you can edit the query part in the code to set the limits per category:

$wp_query = new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'cat' => $category->term_id ) );

Thank you for your understanding.

@Jade

Thanks for your tip, i managed to get this to work without a hassle, just adding ‘posts_per_page’ => ‘3’ within the array.

$wp_query = new WP_Query( array( 'posts_per_page' => '3', 'post_type' => 'post', 'paged' => $paged, 'cat' => $category->term_id ) );

However, i stumbled upon an issue, upon testing i realize the restriction should only apply to when “all” is selected, as when selecting a single category, it should render the default setting.

Please @staff, can you please help me write the if-condition snippet?

You can still access the demo page here:
http://ethos.erikeliasson.io/

/E

Hi there,

unfortunately, this is really out of our support policy and we can not give further assistance. We suggest that you seek help from paid freelancers in the X Facebook User Group.

Also, kindly open up separate threads for additional questions to be able to focus on the matter without reading from top to bottom of a very long thread.

Thank you for your understanding.