1

I have an archive page for a custom post type (CPT) on which I'm trying to do two things:

  1. Display a list of terms that are in the taxonomy associated with the CPT,

  2. Use these terms to dynamically change a wp_query that will be displayed on the same page.

For example, my custom post type is 'Read'. I have a custom taxonomy of 'Reading' associated with it, and several terms such as 'Series', 'Messages', 'Special Services', etc.

I would like to use the listed terms as a way to update what is being displayed in the loop (i.e. if someone clicks 'Series', the loop will only show posts that are in 'Series', if they click 'Messages' the loop will then update and show only the posts in 'Messages', etc.).

I've successfully listed the terms using the 'get_terms' function. However, I have no idea how to make these terms dynamically change what is being displayed in the loop (I'm using a new wp_query).

How can I allow a user-selected term to dynamically (via ajax?) update the query being displayed?

I appreciate any help you can give me!

  • 1
    Is just linking the terms to their permalinks a cop out? – Andy Macaulay-Brook Aug 4 '16 at 21:02
  • 1
    Kindof :) I'm really trying to build this page around user experience, and feel that it will be much nicer being able to navigate the posts by changing what is displayed on the page versus forwarding to a different page with each click. This is not too unlike 'portfolio' type pages. – sevenspirits Aug 5 '16 at 13:37
  • 1
    I did something similar a couple of months ago - bear with me while I see if it'll work for your case. – Andy Macaulay-Brook Aug 5 '16 at 13:47
1

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.

  • I really appreciate your response, and will take your suggestions and see if it's the best solution for what I'm trying to do. Hours on Google has given various results, but nothing that completely solves the problem :) – sevenspirits Aug 5 '16 at 20:28
  • Did this work for you? I'm looking for a solution to a very similar problem. – amandathewebdev Sep 1 '16 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.