Docs

[henrycluker]

In Ethos, the “Filter by Topic” functionality on the blog page is done by alphabetical order – is it possible to have this ordered manually?

[Prasant Rai]

Hello There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[henrycluker]

This reply has been marked as private.

[henrycluker]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications!

What you are trying to accomplish requires a template customization, we would like 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( 'orderby' => 'id', '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 foreach ( $categories as $category ) { ?>
        <?php static $i = 1; $selected = ( $i == 1 ) ? 'class="selected"' : ''; ?>

        <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' });
      }
    });
  });

</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/

Hope this helps.

[henrycluker]

This reply has been marked as private.

[henrycluker]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

1] To remove the arrows on the left and right sides, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-flexslider.x-post-slider .flex-direction-nav {
    display: none;
}

2] To resolve this issue, 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/_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, '_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;

  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',
        'ignore_sticky_posts'	=> true
      );
      break;
  }

  ?>

  <?php if ( $is_enabled ) : ?>

    

        <?php $wp_query = new WP_Query( $args ); ?>

        <?php if ( $wp_query->have_posts() ) : ?>

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

            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

              <li class="x-slide">
                <article <?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; ?>

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

        <?php endif; ?>

        <?php wp_reset_query(); ?>

  <?php endif; ?>

<?php endif; ?>

3] Save the file named as _post-slider.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/ethos/

Hope this helps.

[Author]

Posts