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


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


    function cat_ajax_get(catID) {
        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 ?>';
            type: 'POST',
            url: ajaxurl,
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                return false;


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


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'
         $args = array (
            'posts_per_page' => 5,
            'order' => 'DESC'

    $posts = get_posts( $args );

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


   <?php } wp_reset_postdata();

   $response = ob_get_contents();

   echo $response;


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.
        // 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.
                '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;
    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);
    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;
    //nextLink = '/news' + 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(nextLink + ' - ' + pageNum + ' - ' + max);*/
    if(pageNum <= max) {
        // Insert the "More Posts" link.
            .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.

     * 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.
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                        .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? – tao 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.