- AJAX PRODUCT BUILDER WORDPRESS HOW TO
- AJAX PRODUCT BUILDER WORDPRESS INSTALL
- AJAX PRODUCT BUILDER WORDPRESS FULL
Make the clicked category the new active filter.The WordPress filter with Javascript!įor me as a front-ender, obviously the most fun part! We’ll be running a filter function when we click on a category link we’ve made before. For testing your code, you can add the_title() in this file for now.
AJAX PRODUCT BUILDER WORDPRESS FULL
I won’t include it in this tutorial, because we’re going straight to the point: filteringįeel free to reach out to me or leave a comment in case you want to see a full setup, that also explains the project-list-item.php file. The include file is just a single item, so you can give it whatever markup you want. You can use include like I did, or use get_template_part(). Make sure our single list items are coming from a separate PHP file. This is a basic WP_Query to pull in all our posts from post-type ‘projecten’. Include('_components/project-list-item.php') Querying over WordPress Posts and Custom Post Types 'projecten', We’ll need this later in our functions to filter on the category slug. We need this because I want to use a-tags for the filters, but anchor tags require a href-tag to be a valid HTML element.Īlso, note that I am using data-slug in my list-item links. We’ll use this to remove the filters and display all the posts again. Notice that our first list item is not within the loop. So how do we get started with WordPress filters? Let’s display our available categories first: A live example of the filters can be found on the website of my clients – almost any website with a post-archive needs filters, am I right? We also need to query over our categories, to be able to display all available categories. To get started, we first need a page that queries all our projects and displays them on that page.
Available WP_Query Arguments WP Query Category Parameters I’ll give a quick overview of all possible arguments so you can see which ones work best in your project. In this example, I will show you how we can filter our custom post type ‘projects’ by category, based on the category slug. You can filter posts and post types by category, tags, and custom taxonomies.
AJAX PRODUCT BUILDER WORDPRESS HOW TO
I assume you have a basic knowledge of javascript and PHP for the syntax and basic WordPress to know how to make a query.
A live example of ajax filters in WordPress can be found on one of my live projects: WordPress setup for posts and custom post typesįiltering posts, pages, or custom post types with ajax all works in the same way. For me, as a front-end developer, the hardest part is making the actual WP_Query if we’re extending this method for combined filters WooCommerce.Ī more advanced ajax filter for Woocommerce will follow soon! Let’s first start with the basics. But it’s actually pretty simple, as WordPress has default ajax functionalities.
AJAX PRODUCT BUILDER WORDPRESS INSTALL
Many developers will quickly install another plugin like facetwp or yith to do things like this. WordPress Filter without page reload using ajax is not a hard thing to do.