Response title
This is preview!
Filtering Wordpress posts by category without reload (jquery?)
in Using jQuery
•
10 years ago
I've been looking around for a way to filter my posts on http://www.waziproject.com/wazimagazine/ without reloading the page. I've had a look at jquery / json & ajax and / or a combination of these. Without avail...
The Isotope and Quicksand plugins only allow for the use of 5 categories apparently.
So my question is if anyone can help me out to turn the following (see code below) into a list of filters that don't require refresh/reload of the page...
The Ajax solution
I believe the following answer is the closest I can get to a solution: Using ajax on categories and wordpress loops
The Isotope and Quicksand plugins only allow for the use of 5 categories apparently.
So my question is if anyone can help me out to turn the following (see code below) into a list of filters that don't require refresh/reload of the page...
The Ajax solution
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>
- </div>
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?
The Isotope plugin solution
This is the closest I’ve come to actually managing to filter my posts by category without reloading the page!
That being said… I did run into some problems. I can’t seem to get the filters to work, yet I did use the coding as mentionned here. Basically in my loop.php I put this:
Then I added the rest of the code at the end of my loop.php file. Yet it doesn’t filter.
The website looks like this when the isotope plugin is activated: website with isotope plugin.
But the filters don’t work.
Also, I would like to know how to implement the plugin’s filters but maintain the intended look for the website, which is as follows: website without isotope plugin.
Thank you very much in advance for your help!
Regards, Arnaud
The Isotope plugin solution
This is the closest I’ve come to actually managing to filter my posts by category without reloading the page!
That being said… I did run into some problems. I can’t seem to get the filters to work, yet I did use the coding as mentionned here. Basically in my loop.php I put this:
- <div id="queryMenu">
- <ul id="options">
- <li><a href="#" data-filter="*" class="current">SHOW ALL</a></li>
- <li><a href="#" data-filter=".business_work" class="current">Business & Work</a></li>
- <li><a href="#" data-filter=".development_sustainability" class="current">Development & Sustainability</a></li>
- <li><a href="#" data-filter=".education" class="current">Education</a></li>
- <li><a href="#" data-filter=".health_medecine" class="current">Health & Medecine</a></li>
- <li><a href="#" data-filter=".human_rights" class="current">Human Rights</a></li>
- <li><a href="#" data-filter=".law_order" class="current">Law & Order</a></li>
- <li><a href="#" data-filter=".media_information" class="current">Media & Information</a></li>
- <li><a href="#" data-filter=".nations" class="current">Nations</a></li>
- <li><a href="#" data-filter=".political_economy" class="current">Political Economy</a></li>
- <li><a href="#" data-filter=".research_innovation" class="current">Research & Innovation</a></li>
- </ul>
- </div>
Then I added the rest of the code at the end of my loop.php file. Yet it doesn’t filter.
The website looks like this when the isotope plugin is activated: website with isotope plugin.
But the filters don’t work.
Also, I would like to know how to implement the plugin’s filters but maintain the intended look for the website, which is as follows: website without isotope plugin.
Thank you very much in advance for your help!
Regards, Arnaud
1
