Filtering WP_Query Dynamically on the Front-End

Here’s what I did recently on a site, which should be easily adapted for your case. I was using jQuery for a number of things on this site, so relied on that.

While WP has some great AJAX handling, it was simpler in this instance for me to just use jQuery’s AJAX load() method. If your current page has an element div#loaded-content-area and you want to fill it with the part of another web page’s div#content-to-load then you simply need to run the jQuery:

$("div#loaded-content-area")
.load("http://www.example.org/page-of-data/ #content-to-load");

So, to solve your problem I would make sure I label the key content within my taxonomy-term template in the theme with ID="content-to-load" (or whatever ID suits you, of course).

Load the list of term permalinks in your displayed page and attach a click handler to each which passes the href attribute from the permalink as jQuery’s .load URL. Then clicking on a term will cause jQuery to fetch the content that you want from the term page and display it within the current page without a refresh.

This approach has a couple of advantages:

1 – Progressive Enhancement. If for any reason a browser doesn’t have JavaScript, then the term page will just load as normal instead.

2 – No need for clever fiddling with a query: The term pages do it all for you.

Related Posts:

  1. query multiple taxonomies
  2. Sort the main query in subcategories/terms?
  3. Why get_posts() not returning only selected category posts from Custom Post Type?
  4. WP_Query inside foreach loop returning same value for all options when filtered using ajax
  5. WordPress loop: Show only a Custom Post Type Taxononmy TERM
  6. Retrieve custom post types by custom taxonomies with WP_Query
  7. Query for specific taxonomy that executes a particular loop depending on volume of posts?
  8. display post count in archive page that have relation with another taxonomy term
  9. Dropwdown: Get taxonomy terms from posts that share preselected terms from 3 other taxonomies
  10. Ajax load more inside custom post type taxonomy
  11. Display all Custom taxonomy terms and their relevant custom posts
  12. Get posts of an specific term of a custom taxonomy
  13. How to pass taxonomy terms to WP_Query along with $args?
  14. How to Get The Taxonomy Term in Custom Post Type Loop Inside a Wp Query
  15. Display all posts in a custom post type, grouped by a custom taxonomy
  16. Custom Taxonomy with Custom Post Type Finds No Posts
  17. Custom Taxonomies Terms as Post Title for Custom Post Types upon Publishing
  18. Retrieve single term slug
  19. Custom query – alternate posts by category
  20. How to filter post data with AJAX on page?
  21. WP_Query -> sort results by relevance (= most tags / taxonomy terms in common)
  22. How can I add programmatically custom taxonomy terms to a custom type post when saving posts?
  23. post count is wrong when using same taxonomy for 2 different CPT
  24. Glossary with Custom Post Type
  25. how to group custom post type posts by custom taxonomy terms
  26. Separate Custom Post Type Taxonomy by Comma
  27. Get child terms of current term of the current post
  28. Multiple Archive Pages for Custom Post Types AND Taxonomies
  29. List all custom post type posts from a given category?
  30. Exclude current post when getting related post on custom post type and taxonomy
  31. Display Posts of a Category in Alphabetical Order (Custom Post Type)
  32. Ordering Custom Post Types with WP_Query
  33. Querying CPT with Two Taxonomies
  34. Custom Query to display posts with custom field
  35. Get taxonomy description based on variable
  36. Output the content of a term organised by each of the CPT?
  37. Querying Term Posts in Loop
  38. How to check the terms in single custom post type template
  39. Filter by custom taxonomy slug on a custom post type
  40. Taxonomy Archive: Display only one post per term from separate custom taxonomy
  41. Pagination : How to remove /page/x/ after a ‘POST’ action on a form returning to page 1
  42. Show listings from Impress Listing plugin in random order using taxonomy and terms
  43. How do I display tags for a custom post type single page?
  44. wp_query check if integer exists in custom field’s array
  45. Wrong request query on cpt and tax
  46. Search / Filter posts on Title/Content OR Tags
  47. Show posts from two or more custom taxonomy terms
  48. Custom-Posttype & Custom Taxonomy WP_Query
  49. Issue on Creating Custom Tax Term Dynamically From Another CPT Meta-box On Publish
  50. What’s the WP way to load remaining custom posts?
  51. Query Custom Post Type Taxonomy term with multiple parameters
  52. How to get custom posts sub category link
  53. Pagination with custom query, custom search form, single and pages, ajax and no plugins
  54. Displaying custom-taxonomy-terms sorted by parent/child-hierarchy?
  55. Query posts with double taxonomy
  56. Adding predefined terms to a taxonomy
  57. Using page slug in wp_query
  58. Custom query – get_the_terms not work
  59. Custom taxonomy wp_query woes.
  60. Select2 AJAX and WP Query Returns ALL and does not filter
  61. Different options per post type in WP_Query
  62. How to show all taxonomies within custom post type loop
  63. Custom Category Walker with Image, Fallback to Most Recent Post in Category Image
  64. get_terms() returns Trying to get property of non-object error for custom taxonomy
  65. how to count the current posts terms
  66. How to query Posts from a custom post type which contains a custom taxonomy?
  67. Query Posts that have Custom Taxonomy
  68. Custom Taxonomy Terms in Menu lead to which page?
  69. Foreach loop returning more than one item when querying taxonomy
  70. Add custom post type taxonomy tag to article class
  71. Custom Taxonomy dont save in a frontend form for post a custom post
  72. Loop for custom-post-type comparing taxonomy terms for “related” posts?
  73. Custom taxonomy not saving correctly
  74. Get_the_term_list inexplicably adds values in foreach
  75. custom taxonomy pagination 404 error
  76. Ordering by meta value not working
  77. Not saving custom taxonomy while using ajax
  78. Return multiples taxonomies with wp_get_object_terms
  79. Excluded Custom Taxonomy Term Posts Displaying in loop
  80. Display Custom Post Type Based on Taxonomy With WP_Query()
  81. WP_Query for custom taxonomies showing posts from non-specified terms?
  82. How to display custom post type pagination buttons when processing AJAX request
  83. Query a custom taxonomy in a function to create an csv file
  84. Saving Child Terms on front end not setting parent
  85. Displaying WordPress posts from post and custom post type in custom taxonomy
  86. Get posts associated with custom taxonomy alternate way
  87. Get list of CPT posts in *current* post’s taxonomy term
  88. Loop with Custom Post Type and Taxonomies
  89. tax_query showing no results
  90. How to load more custom type posts through AJAX & LOAD MORE POSTS button
  91. Exclude Custom Post Type from shared Custom Taxonomy
  92. Remove Custom Taxonomy Slug only without removing Custom post type slug in permalinks
  93. Get a list of categories ids
  94. How to display elements of different post types?
  95. taxonomy terms array not working
  96. Attaching multiple custom taxonomies to one CPT?
  97. Get X posts with the same terms as the current post (custom post type and custom taxonomy)
  98. Get term link of shared taxonomy between multiple post types
  99. Load posts via AJAX without draft status
  100. WP Query – Can’t get posts with specific taxonomy