I have two different pages, with filters. Those two pages, have different layouts and styles.

I have three different filters for one page, where the output and style is the same.

For the “newsfilter” I need a different style. So I guess I need another loop?

How do I output two different loops? My current functions.php is:

function misha_filter_function(){
  $args = array(
   'orderby' => 'date', // we will sort posts by date
   'order' => $_POST['date'] // ASC или DESC
  );

  $args = array(
    'tax_query' => array(
      'relation' => 'AND',
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['ownerfilter'],
      ),
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['locationfilter'],
      ),
    )
  );

  $args = array(
    'tax_query' => array(
      'relation' => 'AND',
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['newsfilter'],
      ),
    )
  );

  $relation = 'AND';
    if( isset( $_POST['timefilter'] ) )
        $args['tax_query'] = array(
            'relation' => $relation,
            array(
                'taxonomy' => 'post_tag',
                'field' => $cat_id,
                'terms' => $_POST['timefilter']
            ),
        );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post(); ?>
    <!-- post -->
    <a href="<?php the_permalink()?>">
      <div class="col-md-3 col-sm-6 ver-item">
        <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
        <div class="thumb" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
        <section>
          <time><?php echo get_the_date();?></time>
          <h3><?php the_title();?></h3>
          <span><!-- underline --></span>
        </section>
      </div>
    </a>

        <?php endwhile;
        wp_reset_postdata(); else :
        echo 'Geen resultaten, probeer het opnieuw.';
    endif;
    die();
  }

add_action('wp_ajax_myfilter', 'misha_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

The filter results of the “newsfilter” need to get a different output and style. How can I do that?

Thanks in advance,

Thomas.

I’ve tried changing the $args to another name, that didn’t work. I’ve also tried adding a complete new function (news_filter_functions instead of misha_filter_function).

I have two different pages, with filters. Those two pages, have different layouts and styles.

I have three different filters for one page, where the output and style is the same.

For the “newsfilter” I need a different style. So I guess I need another loop?

How do I output two different loops? My current functions.php is:

function misha_filter_function(){
  $args = array(
   'orderby' => 'date', // we will sort posts by date
   'order' => $_POST['date'] // ASC или DESC
  );

  $args = array(
    'tax_query' => array(
      'relation' => 'AND',
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['ownerfilter'],
      ),
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['locationfilter'],
      ),
    )
  );

  $args = array(
    'tax_query' => array(
      'relation' => 'AND',
      array(
        'taxonomy' => 'post_tag',
        'field' => $cat_id,
        'terms' => $_POST['newsfilter'],
      ),
    )
  );

  $relation = 'AND';
    if( isset( $_POST['timefilter'] ) )
        $args['tax_query'] = array(
            'relation' => $relation,
            array(
                'taxonomy' => 'post_tag',
                'field' => $cat_id,
                'terms' => $_POST['timefilter']
            ),
        );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post(); ?>
    <!-- post -->
    <a href="<?php the_permalink()?>">
      <div class="col-md-3 col-sm-6 ver-item">
        <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
        <div class="thumb" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
        <section>
          <time><?php echo get_the_date();?></time>
          <h3><?php the_title();?></h3>
          <span><!-- underline --></span>
        </section>
      </div>
    </a>

        <?php endwhile;
        wp_reset_postdata(); else :
        echo 'Geen resultaten, probeer het opnieuw.';
    endif;
    die();
  }

add_action('wp_ajax_myfilter', 'misha_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

The filter results of the “newsfilter” need to get a different output and style. How can I do that?

Thanks in advance,

Thomas.

I’ve tried changing the $args to another name, that didn’t work. I’ve also tried adding a complete new function (news_filter_functions instead of misha_filter_function).

• php
• functions
• loop
• filters
• ajax

2 Answers 2

I have understand that you want return 2 different things with the same function. If what I understood is correct then:

With your javascript ajax function you can pass a var which save the page that need the correct loop and you can check the content of this var in your misha_filter_function() to echo one loop or another.

You can now add different styles for each loop.

I recommend you that you save the html tags of your output in a var. ( $output.=... ) and finally you should use echo $output.

If this is not the answer that you are looking for, you can clarify it in a comment.

I'll try that, but my php isn't that good. Can you explain how I should apply that or make an example for me?

My Ajax is:

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Filteren..'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('Filter'); // changing the button label back
                $('.verleden-container .row .container .row').html(data); // insert data
            }
        });
        return false;
    });

    $('#timefilter').submit(function(){
        var filter = $('#timefilter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('#timefilterbutton').text('Filteren..'); // changing the button label
            },
            success:function(data){
                filter.find('#timefilterbutton').text('Filter'); // changing the button label back
                $('.verleden-container .row .container .row').html(data); // insert data
            }
        });
        return false;
    });
});

What should I alter/add to what file?

Thomas