0

I have a page_template on my front page where I want to show "all post category" by default with a maximum of 5 post, but there will be buttons for each of my category, so when they click on a category, the posts on the page gets removed and the posts for the category are shown. (Ajax style - No page reload)

Also, I would like to have a show more post button at the bottom, so I can see more post of the category I clicked before. (so the maximum increase by +5 each time I click "load more posts")

To load the post category on the category link click, I used this Using ajax on categories and wordpress loops

For my load post button, I was using http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/

Both are working great alone, but I can't get them to work together.

Thanks for any help guys !!

EDIT:

Custom Template

    <div class="category-container">
    <?php $categories = get_categories(); ?>
    <ul id="category-menu" class="category-ul">
        <li id="cat-<?php echo $cat->term_id; ?>">
            <div class="owmvp-btn category-btn">
                <a class="ajax" onclick="cat_ajax_get('0');">
                    <span>All</span>
                </a>
            </div>
        </li>
        <?php foreach ( $categories as $cat ) { ?>
            <li id="cat-<?php echo $cat->term_id; ?>">
                <div class="owmvp-btn category-btn">
                    <a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');">
                        <span><?php echo $cat->name; ?></span>
                    </a>
                </div>
            </li>
        <?php } ?>
    </ul>
</div>






    <script>

    function cat_ajax_get(catID) {
        jQuery("a.ajax").removeClass("current");
        jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
        var ajaxurl = '<?php echo admin_url( "admin-ajax.php" ); //must echo it ?>';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                jQuery("#category-post-content").html(response);
                return false;
            }
        });
    }

    </script>




<div id="category-post-content"></div>

Function.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 () {


    $cat_id = $_POST[ 'cat' ];
    if ($cat_id !== 0){
        $args = array (
            'category' => $cat_id,
            'posts_per_page' => 5,
            'order' => 'DESC'
        );
    }else{
         $args = array (
            'posts_per_page' => 5,
            'order' => 'DESC'
        );
    }

    $posts = get_posts( $args );

    ob_start ();
    global $post;
    foreach ( $posts as $post ) {
    setup_postdata( $post ); ?>

        MY POST HTML IS HERE

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);

   }

EDIT 2: This is for the Load More Button. (Function.php) First I have to gather the new page maximum because I changed category $published_posts = wp_count_posts()->publish; So this line is wrong

function pbd_alp_init() {
    global $wp_query;

    // Add code to index pages.
    if(is_page_template('page-templates/page-home.php')){
        // Queue JS and CSS
        wp_enqueue_script('pbd-alp-load-posts', get_stylesheet_directory_uri() . '/assets/js/load-posts.js', array('jquery'), '1.0', true);

        // What page are we on? And what is the pages limit?
        $published_posts = wp_count_posts()->publish;
        $posts_per_page = 5;
        $max = ceil($published_posts / $posts_per_page);
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;

        // Add some parameters for the JS.
        wp_localize_script(
            'pbd-alp-load-posts',
            'pbd_alp',
            array(
                'startPage' => $paged,
                'maxPages' => $max,
                'nextLink' => next_posts($max, false)
            )
        );
    }
 }
 add_action('template_redirect', 'pbd_alp_init');

Load More.JS

jQuery(document).ready(function($) {
    alert('JS FILE');
    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage) + 1;
    //alert(pageNum);
    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);
    //alert(max);
    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;
    //nextLink = '/news' + nextLink;

    /*alert(nextLink);*/
    //var streetaddress = nextLink.substr(0, nextLink.indexOf('/')); 
    var parts = nextLink.split('.com')
    nextLink = parts[0] + '.com/news' + parts[1]

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
     /*alert('a');
     alert(nextLink + ' - ' + pageNum + ' - ' + max);*/
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('.news-container')
            .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
            .append('<div style="text-align:center;width:100%;"><div id="pbd-alp-load-posts"><a href="#">Load More Posts</a></div></div>');

        // Remove the traditional navigation.
        $('.navigation').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */

    $('#pbd-alp-load-posts a').click(function() {
        // Are there more posts to load?
        if(pageNum <= max) {
            // Show that we're working.
            $(this).text('Loading posts...');

            $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#pbd-alp-load-posts')
                        .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#pbd-alp-load-posts a').text('Load More Posts');
                    } else {
                        $('#pbd-alp-load-posts a').text('No more posts to load.');
                    }
                }
            );
        } else {
            //$('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

EDIT 3: The load more button is only considering the post that are load from my main loop. If I remove my main loop and I only put the category ajax loading, the load more button dosen't act.

  • 1
    So you don't have a programming error. You have a programming need. You are asking us to work for you for free, right? – Andrei Gheorghiu Nov 26 '15 at 0:00
  • You have at least made an attempt, correct? Post that code please. – s_ha_dum Nov 26 '15 at 0:10
  • Haha ive made multiple attemps, ive worked about 5 hours on this. That's why I am posting cause I can't find the solution. There is no direct error cause I am not sure if I am on the right direction with this. Right now ive deleted the code I had for the load more post. I can send you the code I have to load the category. Please check the main post ill edit it. – Antoine Dionne Nov 26 '15 at 0:35

Your Answer

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

Browse other questions tagged or ask your own question.