[Seb SParticipant]

Hi,
when I enable the filterable index in Ethos the blog list shows the posts only from the first category.
So this is how it works, right? But I would prefer to show the newest post from all categories as the standard view and let users select just one category with the filterable index (like the typical portfolio-filters). Is it possible?
Thanks. Sebastian

[ChristianModerator]

Hey Seb,

Ethos shows recent posts doesn’t filter posts by default. Please check your Blog options if you have filtered posts (see http://prntscr.com/3p96yb). With the filterable index, it’ll show specified categories though.

Thanks.

[Seb SParticipant]

Hi,
thanks for answering. Please let me explain again:
Let’s say I have two categories A and B.

By default Ethos lists the posts from both categories A and B, sorted by date. OK, fine.

Now I enable the filterable index (for both catebories).
I would expect a posts-list with the newest posts from both categories at the beginning (like default). And by using the filter visitors could select the posts only from category A or B.

But the thing is: After enabling the filterable index the homepage only shows the posts from category A. And with the filter visitors can switch to posts from category B. So coming to my homepage visitors don’t see the newest posts from all categories. They would have to switch with the filter to see other recent news.

Is this really the idea of this nice filterable index? In your demo it’s the same. Coming to the Ethos site it only shows the Fashion news. And you can then switch to Food an so on. I think it would be better, if it showed the recent news from every category as the start-screen and visitors then could filter the desired category. Can I achieve this somehow?

Thanks.
Sebastian

[AlexanderKeymaster]

Hi Sebastian,

The filter is to restrict the posts to a single category. It doesn’t have a way to pull the most recent from each category. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer, or a service like Mircolancer or Tweaky to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Jen HParticipant]

I have been wondering the same thing. I thought by default there would be no filter in place and all posts would show in desc chron order (as standard practice for most WP theme portfolio filters). Then when you select a category filter it filters/refines to display posts from just that category.

In its current form the ethos blog filter is not very good UX. I think if this is how it will be functioning, it would be better to show the categories on initial view (instead of having to click on the filter bar) and highlight the current filtered category.

Also, my blog index only has one post displaying even though I have 2 posts. They are both in the same category, but also have a second category. Eg Post 1 = Category A + Category B and Post 2 = Category A + Category C.

[AlexanderKeymaster]

Hi Jen,

To confirm about the filter: By default it shows all posts. When clicking a category, it filters out all other categories. Only one category can be active at a time.

For the blog filter, you can change that by adding this CSS (Customizer > Custom > CSS)

.option-set a.x-index-filters { display:none; }
.x-index-filters-menu.unstyled { display:block!important; }

That will hide the drop down select, and just show the category labels.

I’m not sure what would cause the post to not appear. Can you please post a link to your site so we can take a look? Also, can you give links to the posts that should be showing up?

[Charlie OParticipant]

I also find it really strange that the default filtered homepage shows the posts that happen to be in the alphabetically/arbitrarily first category. I hadn’t bothered to check whether this was the case in the demo as I thought it would be really obvious that by default posts from all categories are shown and then users can then filter them.

This coupled with the fact that a drop down menu has to be clicked on to see the further possible categories is really bad UX in my opinion. I think I’ll be incorporating this CSS snippet into my site to at least take this drop down out of the equation but I would seriously suggest that a code snippet is also offered to provide this functionality and that in the next update it is changed so that by default posts from all categories are shown in chron order when someone visits the homepage.

[Charlie OParticipant]

Actually now I think about it there also needs to be an ‘ALL / ‘ option prior to the first category so that visitors can unfilter the results as well. This ALL option would obviously just have all posts in chronological order and would be what the filter defaults to when opening the homepage.

[RadModerator]

Hi Guys,

Currently, it only show posts of first category. But you could try this.

1. Create file _index.php under your child theme (/x-child-ethos/framework/views/ethos/_index.php)

2. Paste this code :

<?php

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

$paged      = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$categories = get_categories( array( 'include' => get_theme_mod( '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">Filter by Topic</span>
      <i class="x-icon-chevron-down"></i>
    </a>
    <ul class="x-index-filters-menu unstyled">

    <li><a href="#" class="selected" data-category-id="0"><?php echo __( '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 } ?>
    </ul>
  </li>
</ul>

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

  <?php

  foreach ( $categories as $category ) {

    $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-all="0" 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();

  }

  ?>

</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.data('category-all') === $filter_cat ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      } else {
        $this.css({ 'display' : 'none', 'visibility' : 'hidden' });
      }
    });
  });

</script>

3. Save and upload.

You will have “All” filter, and all posts on every category should show.

Hope this helps.

[Charlie OParticipant]

Thanks so much for providing this fix! It does at least show all the categories by default but wasn’t exactly what I was expecting. I for one was hoping that selecting All would show 10 chron posts on the homepage from various categories in one list.
But I’ve deciphered how the filter function and jQuery works and I see this won’t be really easy to implement (although I would still suggest incorporating it properly in future releases).

However this fix is actually great for me as I was also hoping to one day set up a category grid like I do currently on homeli.co.uk and with this list of all category posts being show, this should now be possible.

Incase this is of interest to anyone else (and incase anyone wants to suggest how I can make my code more elegant) I’ll provide the code I’ve just written for this here.

First I’ve added a class to the category post containers so you can select these divs when filter is set to all (and make the width 45% for columns or whatever else you have in mind with CSS)

Line 42

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

Then I’ve added another if statement to the end of the jQuery to remove this extra class (home-filter-show-all) when a category is selected from the filter list. The class is then added again when the user goes back to show all.

Line 63 onwards

<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.data('category-all') === $filter_cat ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      } else {
        $this.css({ 'display' : 'none', 'visibility' : 'hidden' });
      }
		
      if ( $this.data('category-all') !== $filter_cat ) {
        $this.removeClass ( 'home-filter-show-all' );
      } else {
        $this.addClass( 'home-filter-show-all');
      }

    });
  });

</script>

Also I’ve just created a little PHP snippet to add the Category title above the category post lists as I think this is very useful for users trawling through a potentially long list.

Line 42

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

      if ( $wp_query->have_posts() ) :

to

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

      if ( $wp_query->have_posts() ) :

Hopefully I’ve built up a bit of karma by now so if anyone would care to help me with a few extra things then that’d be great.

1. I’d like to be able to rearrange the order of the categories to a custom order instead of alphabetical. If it could somehow match the order in the nav bar then that would be ideal but I don’t mind maintaining it manually either.

2. I’d like for the category post lists on the show all filter to only show 4 posts while the category filters continue to show the latest 10.

3. As an added bonus the first post in the category post list could have an additional class so emphasis can be added to it. (larger picture/title)

[RadModerator]

Hi Charlie,

1. Not sure what you mean by re-ordering category alphabetically. Does this mean it should get all available categories? If not, you could just manually add your category ID and sort it manually. If yes, then you could just change this line of code :

$categories = get_categories( array( 'include' => get_theme_mod( 'x_ethos_filterable_index_categories' ) ) );

to this

$categories = get_categories(array(
  'orderby'                  => 'name',
  'order'                    => 'ASC',
));

2. I just tried it but doesn’t work well on category loop which filter selection happens before the post loop. It may work on post loop alone though. But since this can take longer and with issues like duplicate post could occur, I just added this as feature request.

3. Sure that is possible,

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

Cheers!

[Yvonne SParticipant]

I agree with everyone else who has posted here asking for the default option on this filter to be “All posts.” Otherwise new posts won’t show up on our blog homepage unless they happen to be in the first category. I was really keen on this feature and felt disappointed when I realised the default wasn’t “all” so I’m glad to see that other people have asked for this feature too!
Trying to follow the suggestions made here seems too complex for me, since I am not a developer but a blogger and my knowledge of code is extremely limited. However, I have found a very easy solution – just make a new category in the WP dashboard – ALL, and then add all posts to that category. It does mean they all appear twice in when filtering, but for me that’s less of an issue than not having them show up on the first page.

[ChristianModerator]

Thanks for your feedback Yvonne. We’ll go through this and might change the behavior in a future release. 🙂

[Kailas EParticipant]

Hi ‘All’,
(sorry for the very weak joke),
Implemented the code and have a shiny new ‘all’ selector in the filter (which being first is the default) however it’s still just showing my ‘art’ category and not ‘all’ in chronological order.
Any ideas on why that might be?

example:
http://www.lamelco.co.uk/
u/p : trebuchet

Ps. Also it’s showing a LOT of posts… is there any way to limit it to 20 or so?

[SupportMember]

Hey Kailas,

Base on our Fix code. The “All” selection will list the posts and will be grouped by category.
Basically, to limit the number of posts, you will need to set it in WP Admin > Settings > Reading > “Blog pages show at most”.
BUT since you are using the fix above, you can add “‘posts_per_page’ => 5” to Line 40:
$wp_query = new WP_Query( array( ‘post_type’ => ‘post’, ‘paged’ => $paged, ‘cat’ => $category->term_id , ‘posts_per_page’ => 5) );
You can change 5 to your desired number.

Thanks

[Author]

Posts