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=""></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.