0

I'd like to display categories as buttons.

When I click the button I'd like to display a list of the post in that category

The post have a title, thumbnail image, content(text)

In the list of posts I'd like to display the title, image, content and maybe the date.

I'd like to display the post without page reload using ajax.

I think I'm mostly there but I can't display all the content from the posts.

Displaying categories:

    <ul>
          <?php

            $cat_args = array(
              'orderby'     => 'name',
              'order'       => 'ASC',
              'hide_empty'  => 1
            );


            $cats = get_categories($cat_args);

            foreach($cats as $cat){
              echo '<li><a href="#" data-slug="' . $cat->term_id . '" class="js-category-button">' . $cat->name . '</a></li>';
            }
          ?>
    </ul>

The jQuery is in a seperate file.

    $atj('.js-category-button').on('click', function(e){
      e.preventDefault();
      var catID = $atj(this).data('slug');
      var ajaxurl = 'http://my-site.co.uk/wp-admin/admin-ajax.php';
        $atj.ajax({
            type: 'POST',
            url: ajaxurl,
            crossDomain : true,
            dataType: 'html',
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                $atj(".the-news").append(response);
                return false;
            }
        });
    })

The php script is in functions.php

    add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
    add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

    function prefix_load_cat_posts () {

      global $post;

      $cat_id = $_POST[ 'cat' ];

      $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 3,
        'order' => 'ASC'
      );


      $cat_query = new WP_Query($args);

      if($cat_query->have_posts()) :
        while($cat_query->have_posts()) :
          $cat_query->the_post();


        $response = '<div class="the-post">';
        $response .= '<h1 class="the-title">';
        $response .= '<a href="#">'. get_the_title() .'</a>';
        $response .= '</h1>';
        $response .= apply_filters( 'the_content', get_the_content() );
        $response .= '</div>';


        echo $response;

        endwhile; 

        endif; 

        wp_reset_postdata(); 

        die(1); 
    }    

With the code as it is I have the categories displaying as buttons. If I click them it displays the post title but not the content

How can I display the post content and post thumbnail and date.

1 Answer 1

-2
    add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
    add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

        function prefix_load_cat_posts () {

          global $post;

          $cat_id = $_POST[ 'cat' ];

          $args = array (
            'cat' => $cat_id,
            'posts_per_page' => 3,
            'order' => 'ASC'
          );


          $cat_query = new WP_Query($args);

          if($cat_query->have_posts()) :
            while($cat_query->have_posts()) :
              $cat_query->the_post();


            $response = '<div class="the-post">';
            $response .= '<h1 class="the-title">';
            $response .= '<a href="#">'. get_the_title() .'</a>';
            $response .= '</h1>';
            $response .= apply_filters( 'the_content', get_the_content() );
             $response .= '<a href="#">'. the_post_thumbnail() .'</a>';
            $response .= '</div>';


            echo $response;

            endwhile; 

            endif; 

            wp_reset_postdata(); 

            die(1); 
        }



<script>
jQuery(document).ready(function () {
 jQuery('.js-category-button').on('click', function(e){
  e.preventDefault();
  var catID = jQuery(this).data('slug');
  var ajaxurl = 'http://localhost/wordpress/wp-admin/admin-ajax.php';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        crossDomain : true,
        dataType: 'html',
        data: {"action": "load-filter", cat: catID },
        beforeSend: function () {
            jQuery(".the-news").html('<p></p>')
        },
        success: function(response) {
            jQuery(".the-news").append(response);
            return false;
        }
    });
})

}); 
</script>



<ul>
      <?php

        $cat_args = array(
          'orderby'     => 'name',
          'order'       => 'ASC',
          'hide_empty'  => 1
        );


        $cats = get_categories($cat_args);

        foreach($cats as $cat){
          echo '<li><a href="#" data-slug="' . $cat->term_id . '" class="js-category-button">' . $cat->name . '</a></li>';
        }

      ?>
      <div class="the-news">

    </div>
</ul>     
4
  • 1
    Hi Nirav. Welcome here and thanks for your answer. Can you please explain what your code does, and how and why it answers the question? This site is not a code snippets repository, but a Q&A site, it is much better if you answer questions, instead of just posting code. Thanks!
    – gmazzap
    Oct 29, 2015 at 9:29
  • Your answer is pretty useless. Please explain properly what your code does, how it works and where and how it should be used Oct 29, 2015 at 12:27
  • @PieterGoosen manners, please :) It might not be well presented, but it's still someone's effort and it's better to encourage to improve than insult it.
    – Rarst
    Oct 29, 2015 at 12:55
  • @Rarst sorry, that came out wrong, it should have being Your answer is pretty useless for someone that does not understand code by itself Oct 29, 2015 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.