ajax for filtering posts by category in wordpress loops

4 Views

I’ve been looking around for a way to filter my posts on http://www.waziproject.com/wazimagazine/ without reloading the page.

So my question is if anyone can help me out to turn the following into a list of filters that don’t require refresh/reload of the page…

Read More

I believe the following answer is the closest I can get to a solution: Using ajax on categories and wordpress loops

However, I’m not sure where to implement the code. I’m using the following in my loop.php: 

<div id="queryMenu">
<ul>
    <li><a href="#" id="business_work">Business & Work</a></li>
    <li><a href="#" id="development_sustainability">Development & Sustainability</a></li>
    <li><a href="#" id="education">Education</a></li>
    <li><a href="#" id="health_medecine">Health & Medecine</a></li>
    <li><a href="#" id="human_rights">Human Rights</a></li>
    <li><a href="#" id="law_order">Law & Order</a></li>
    <li><a href="#" id="media_information">Media & Information</a></li>
    <li><a href="#" id="nations">Nations</a></li>
    <li><a href="#" id="political_economy">Political Economy</a></li>
    <li><a href="#" id="research_innovation">Research & Innovation</a></li>
    <li><a href="#" id="reset">All Posts</a></li>
</ul>

Now if I want to apply the coding as mentioned here – Using ajax on categories and wordpress loops – where should I put the different code snippets and is there a lot of tweaking to be done to it?

Thank you very much in advance for your help!

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. A piece of javascript/jquery:

    $("#queryMenu ul li a").click(function(){
    var currentCategory = $(this).attr('id');
    $.ajax({
        type: 'post',
        url: 'ajax-category.php', //sometimes I'm using bloginfo to get current path: url: '<?php bloginfo('template_url'); ?>/ajax.php',
        data: {
            currentCategory: currentCategory
        },
        success: function(data) {
            console.log(data);
        }
    });
});

    Put right path in url. Use $_REQUEST['currentCategory'] inside ajax-category.php to get category ID…