3

I want my index.php to be a simple page with a horizontal list of category names on the top. But instead of having the page reload with the list of posts in that loop each time a category is clicked on, I want the set of posts from each category to display instantaneously after every click on a different category. Is this possible in Wordpress?

10

Yes this is possible with WordPress but I would not use index.php but a custom front-page.php template then create a page called home and set it as the front page in options-general.

For your category menu:

<?php

$categories = get_categories(); ?>

<ul id="category-menu">
    <?php foreach ( $categories as $cat ) { ?>
    <li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>

    <?php } ?>
</ul>

Where calling our jQuery ajax function when a category is clicked and passing the cat ID to jQuery in the name of the function.

The html div place holder where your posts will load via ajax:

<div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>"/></div>
<div id="category-post-content"></div>

The jQuery function called via the onclick handler in the menu items:

<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
    jQuery("#loading-animation").show();
    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);
            jQuery("#loading-animation").hide();
            return false;
        }
    });
}
</script>

The WordPress PHP function to return the posts from the category selected.

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' ];
         $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'

    );

    $posts = get_posts( $args );

    ob_start ();

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

    <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
        <h1 class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

        <div id="post-content">
        <?php the_excerpt(); ?>
        </div>

   </div>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
   }

We are using output buffering which helps prevent the function from failing which can happen sometimes with WordPress Ajax.

| improve this answer | |
  • 1
    where does the last bit of code go? I have it working without it at the moment and it loads the category page in but I want to add the last bit of code in as I will need it to show the posts too Thank you – user11328 Dec 21 '11 at 12:05
  • 2
    I know this is an old question, but it has the insane amount of 9k views and gets referred to like in this question. You might want to update that :) – kaiser Nov 10 '14 at 22:03
  • 1
    There's an echo missing in var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>'; – Sherbrow Dec 14 '14 at 14:14
  • I know this is a very old post... but how can we do this with custom posts and custom taxonomies? D: – Cynthia Lara Jan 30 '19 at 1:55

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