Dynamically filter Wordpress posts with drop down menus (using php and ajax)

Question

Goal. I would like to create a dynamic page that will allow the visitor to select the month and year from the drop-down menu and change the content (messages) on the page in accordance with the selected values.

I am currently using the following code to display messages from a specific category for a specific month and year.

<?php query_posts("cat=3&monthnum=12&year=2011"); ?> <?php if (have_posts()) : ?> <ul> <?php while (have_posts()) : the_post(); ?> <li> <?php the_title(); ?> <?php the_excerpt(); ?> </li> <?php endwhile; ?> </ul><?php endif; ?> 

This works well, but I would like to make a dynamic page so that the visitor can select the month and year from the drop-down menu and change the content according to the selected values. I posted photos of how this will work here: fivepotato.com/images/ex1.png and fivepotato.com/images/ex2.png.

To do this work, I know that I will need to assign the monthnum value to a variable (which is taken from the drop-down list:

 <?php $monthvar = $_POST["month"]; query_posts("cat=3&monthnum=$monthvar&year=2011");?> 

I don’t have much experience with Ajax, but I assume that I will need to use it to have the content filter re-selected from the drop-down menu once a month.

I found similar queries on the following site: askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html

And I found a working example similar to what I would like to do at: http://www.babycarers.com/search?ajax=0&searchref=37609&start=0&lat=&lon=&city=&radius=0&spec1=1&spec2=1&spec3= 1 & spec4 = 1 & spec5 = 1 & spec6 = 1 & spec7 = 1 & inst1 = 1 & inst2 = 1 & inst3 = 1 & inst4 = 1 & inst5 = 1 & inst6 = 1 & inst7 = 1 & minfee = any & maxfee = any & av1 = 1 & keywords = & country = CA & sort = fee & resultsperpage = 10

If anyone could help me with the javascript / Ajax needed for this, I would be very grateful.

Answer 1

Almost 1000 views and not a single comment. Well, I also needed this and decided to do it. I shared the JavaScript and Wordpress code below for people in the distant future. This seems like a lot, but this is because I have defined some jQuery functions that you can use later with .extend . All it does is search for the select element (drop-down list) with the CSS class .content-filter .

Once discovered, it uses the drop-down identifier to set the GET variable to the value currently selected, then redirects to the same URL and adds these GET variables. For example, if the drop-down list identifier was product_filter , and this value was set to date , then it would set the GET variable product_filter=date . This is great because it does not care about your Wordpess details - all it cares about is the select element.

 // A bunch of helper methods for reading GET variables etc from the URL jQuery.extend({ urlGetVars : function() { var GET = {}; var tempGET = location.search; tempGET = tempGET.replace('?', '').split('&'); for(var i in tempGET) { var someVar = tempGET[i].split('='); if (someVar.length == 2) { GET[someVar[0]] = someVar[1]; } } return GET; }, urlGetVar : function(name) { return $.urlGetVars()[name]; }, serializeUrlVars : function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); }, currentUrl : function() { return window.location.href.slice(0,window.location.href.indexOf('?')); } }); // Adds functionality to filter content using a dropdown var ContentFilter = function ($) { $(document).ready(function() { // Return to a scroll position if exists var scroll = $.urlGetVar('scroll'); if (typeof scroll != 'undefined') { $(window).scrollTop(scroll); } // Prepare the filter dropdowns $('.content-filter').each(function(){ var me = $(this); // eg content-filter-product var id = me.attr('id'); // Refresh with selected filter on change var refresh = function() { var GET = $.urlGetVars(); GET[id] = me.val(); // Save scroll position, return to this position on load GET['scroll'] = $(window).scrollTop(); var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET); window.location = newVar; }; me.change(refresh); }); }); }(jQuery); 

Now the wordpress code. We really need to generate select with some sort of identifier and set the class to .content-filter . This code asks for a post or product type message type and makes a select element. It then returns the GET variable for convenience, and if none of them are set, the default value is "latest." Note that the $fields array sets all the orderby values you want to support. You can always access it anywhere in the template using $_GET['product_filter'] or $_GET['post_filter'] depending on your type. This means that only one can exist on any given page, but you want jQuery to not know what to use otherwise. You can extend this code to set a user id or whatever you like later.

 function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) { $dropdown = '<div class="content-filter-wrapper">'; // The dropdown filter id for this post type $filter_id = $post_type_id.'_filter'; // The actual dropdown $dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">'; // The available ways of filtering, to sort you'd need to set that in the WP_Query later $fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random'); $filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest' foreach ($fields as $field_value=>$field_name) { $dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>'; } $dropdown .= '</select></div>'; // Print or return if ($echo) { echo $dropdown; } else { return $dropdown; } } 

Now the interesting part is combining it on the content page. All our work pays off with some sweet and short code:

 // This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist ak_content_filter('product', $product_filter); $args = array('post_type' => 'product', 'orderby' => $product_filter); // This is just an example, you can use get_pages or whatever supports orderby $loop = new WP_Query( $args ); // OR, to avoid printing: $dropdown = ak_content_filter('product', $product_filter, FALSE); // ... some code ... echo $dropdown; 

I used a custom message type of type, but if you use a "post" just replace it. Maybe someone should do this in the plugin if they haven't been: P