WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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:


$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 } ?>

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:

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;

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(); ?>


   <?php } wp_reset_postdata();

   $response = ob_get_contents();

   echo $response;

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
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
There's an echo missing in var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>'; – Sherbrow Dec 14 '14 at 14:14

protected by kaiser Mar 12 '13 at 13:01

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

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.