admin-ajax.php

In this tutorial I am about to show you two examples how you can use Select2 when creating fields in WordPress admin. We are going to take a look at a meta boxes example specifically but you can easily use it for fields in taxonomies settings or options pages as well.

In the first example we will use Select2 to create a multiselect dropdown with tags, in the second one we will do the same for posts, but also with an AJAX search.

In this tutorial I am going to guide you step by step through the process of creating WordPress AJAX filters and I am about to show you two examples – at the first one we will create a simple post filter by category and in the second example we will dive deep into WP_Query in order to create a complex search filter with a couple of custom fields.

In our examples we’re also going to use:

• Pure JavaScript on the front-end. I know, many of you guys don’t like jQuery and since it is not a filter for a WooCommerce store and the library isn’t included in the front-end by default, there is no real reason to use it.
• A default “Twenty Twenty” WordPress theme. We can not use latest themes like Twenty Twenty-Four, because the latest themes are block themes and in that case we will need to create a Gutenberg block for our filter which is a completely different story. By the way, if you’re interested in such a block, please let me know in the comments below.

Let’s get straight to the AJAX filter examples now.

In this tutorial I am going to show you how you can implement asynchronous posts loading in WordPress or even an infinite scroll.

Please consider that there are could be two different implementation for the AJAX load more button and it depends on a theme you’re using today. For example:

• If you’re using old-fashioned themes, then you can create a load more button with a little bit PHP and JavaScript code (and that’s exactly what we’re going to do in this tutorial).
• If you’re using block themes (FSE themes), then the whole implementation comes down to a custom block which will represend our load more button. I am going to talk about it as well.

No matter what way you choose, upgrading your AJAX load more button into an infinite scroll is not a big deal.

In this tutorial guys I would like to deconstruct for you how an asynchronous adding products to cart works in WooCommerce and we are also going to create some custom “ajax add to cart” buttons here.