Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

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-2").show();
    var ajaxurl = '<?php admin_url( 'admin-ajax.php' ); ?>';
    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(); ?>">
        <hi class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></hi>

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

share|improve this answer
    
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

protected by kaiser Mar 12 '13 at 13:01

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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