This is a repost of original post AJAX Filter Posts By Tag.
There was a lot of interest about that post so I decided to further improve code example and make it more simple.
In this example I will list all posts by taxonomy post_tag using a shortcode, example also includes pagination.
This example will filter all posts by a single tag only, meaning you are not able to filter posts by multiple tags at a same time, I will cover that case in the next tutorial to keep things simpler to understand.
Here you can check working example of Filter WordPress posts by custom taxonomy term with AJAX.
Shortcode is used to display list of available tags and container where posts will be inserted after we get them with AJAX.
Shortcode accepts 4 parameters:
- taxonomy we want to get terms from
- list of comma separated term_id’s, in case you would like to enable filtering by only certain terms
- term_id you would like to be initially selected when page loads
- how many posts will be displayed per page
Usage in WordPress page:
Or if you would like to use it in your template file:
<?php echo do_shortcode('［ajax_filter_posts per_page="1"］'); ?>
Basically this is just a get_terms function from WordPress Codex and some additional markup that is needed to make this work properly.
Each anchor tag contains taxonomy and term slug in data attribute, this is required so we can get these data with jQuery and get results for clicked tag.
If you look at the source you will notice that tag looks for example like:
<a href="?path-to-tag" data-tax="post_tag" data-term="term-slug">
- get_posts($params) which makes AJAX request and returns results
- Binding get_posts function to tag list and pagination
On click we need to get taxonomy, slug and page number. We need these so we can construct WP_Query.
get_posts – make a call and display results
I wanted to keep function very basic, just to get and display data, you can add the fancy stuff yourself.
Firstly we define selectors, then pass the params, do ajax and display result if any.
If there will be error, it will be shown in status div.
3. WP_Query and pagination
First of all, if we want to make pagination work we need to slightly modify WordPress function.
The idea is that when someone clicks on pagination link, from that link we need to extract only page number we want to retrieve.
To make this happen we use WordPress function paginate_links to generate exact markup we need.
Custom pagination markup
The following function will generate page links with following markup:
And it’s very easy to get page number from this link with jQuery (we do that in step 2 – On click…).
We get ‘href’ attribute from clicked link and strip all except numbers to get our page number.
I will not explain to much, you should be able to see from the source what’s going on there.
- Verify nonce
- Sanitize inputs
- Construct WP_Query and do the standard WP loop
- Return result
And you are done
Here you can check working example of Filter WordPress posts by custom taxonomy term with AJAX
Full source code in single file can be found on github: