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.

-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>     
| improve this answer | |
  • 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 '15 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 – Pieter Goosen Oct 29 '15 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 '15 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 – Pieter Goosen Oct 29 '15 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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