Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Sort post-type by taxonomy drop down with Ajax* Advice only WordPress

  • SOLVED

I am just looking for some advice regarding a fairly ambitious task that I am looking to take a stab at.

I would like to create an Ajax post-type archive that is sortable by taxonomy. I would like it to perform as follows:

I have a post type archive with a few taxonomy drop downs on top. When I select a taxonomy from the drop down, it loads in the same page (with loading gif) and displays the results below. I am not necessarily concerned with url structure and if it stays the same for all searches that would be fine, and perhaps preferred. I suppose in this method if you were to select a second taxonomy, it would create a new query, not taking into account the first one.

An better way of achieving this could be with Scribu's [[LINK href="http://scribu.net/wordpress/query-multiple-taxonomies"]]Taxonomy Drill Down[[/LINK]] plugin that allows for filtered searches within multiple taxonomies. The main problem with using that plugin as is is that it redirects the queries to the respective taxonomy archive templates and all mine are styled quite differently and could confuse the user.

I have very little experience with Ajax and was wondering how indepth and challenging a project like this would be. Also, I'd appreciate any advice, relevant links or alternate techniques to achieving this. Thanks, I look forward to hearing your thoughts.

Answers (2)

2011-05-22

Denzel Chia answers:

Hi,

Using AJAX is not easy, but is very flexible, because you can write your own database query, you can query with any condition you like.

The following is a brief description of how you program it.

1) You will need a template and ajax processing php script. This ajax processing php script must be independent and not required or included in any php scripts such as functions.php

2) In this template, you will load your jQuery script and ajax function in the <head>
Create some select lists that will serve as query variables to trigger the ajax query.
So that return data will be "sort" according to what you want.
A target <div> for ajax return data.

3) In the processing php script, you will need to load wp_config.php and wp-includes/wp-db.php
Create the variables that will $_GET the values posted by your ajax script.
esc_attr() to escape these variables.
Using these values which will act as conditions for database queries, you will make your query using global $wpdb class, and get_results method to make your custom query, you will need to make database table joins and where and sort conditions for your query.
Process the results using setup_postdata() and print results using normal wordpress loop.

4) Your ajax script will "grab" the return data and print it in your target div.

The above theory may sound easy but it is not something you can easily achieve, unless you are familiar with ajax and WordPress $wpdb class.

Hope it will be of some use to you.

Thanks.
Denzel

2011-05-23

shawn answers:

I've been looking into this exact same scenario for some time now and think I have finally come across a decent way of accomplishing this.

First, my idea would require use of the jquery isotope plugin, and there is a great demo of what you are asking for at:
http://isotope.metafizzy.co/demos/combination-filters.html

Basically what you see above is a combination of 'selectors' on the top where you can sort the posts via color, size, and shape. These can just as easily be taxonomy groups with individual tax terms as the selectors.

I have managed to get isotope working with multiple custom taxonomy term groups in order to sort out a custom post-type. This allows me to show all posts for a 'blue, ford, truck' without having to refresh the page.
*blue ford truck represents taxonmies 'color, make, model'.

The only part I don't have completed is adding in the ajax to load more posts if there are not 10 blue ford trucks on the first page.

So basically you would still need to add in the ajax part in order to load more posts, but at least the heavy lifting is already done for the sorting of the multiple taxonomy terms.

There is also another demo for appending more posts to the sorts:
http://isotope.metafizzy.co/demos/adding-items.html

That is the part where I am looking at creating the ajax function in order to load more items to the page.

All in all, isotope seems like a pretty solid candidate for the job at hand.


edit:
check out: [[LINK href="http://teleogistic.net/2011/05/new-wordpress-plugin-boones-sortable-columns/"]]http://teleogistic.net/2011/05/new-wordpress-plugin-boones-sortable-columns/[[/LINK]]

description:
Boone’s Sortable Columns is a new WordPress plugin to make it easier for developers of WordPress plugins and themes to create sortable data tables and lists

This is one seriously powerful plugin that is going to get you 90% of where you need to go. It was just released yesterday, and trust me, Boone is a fantastic coder.


Now you have 2 really great options between Boone's plugin and isotope. Might save you a ton of heavy lifting


Jeremy Phillips comments:

Thanks, nice options that I was not familiar with! For this particular project it seems as if the Isotope plugin could work nicely. Have you attempted to use it with dropdowns or just buttons? Was it difficult to customize?

The Boone’s Sortable Columns would actually come in handy for another need of mine. Think I'll give that a run this weekend.