Cornerstone Filter radio button and checkbox and search keyword with ajax
By NetCreative
(version 4)
Working with the latest WP update
Working with the latest Cornerstone update
This component works with the Themeco Cornerstone Theme Builder and won’t function on its own. If you are already a user or wish to become one (and I think you should!), then this filter is for you.
If you are looking for an alternative to premium plugins like Search and Filter Pro or Search WP, then you are in the right place. This is an advanced filter component created using only Cornerstone component parameters, some jQuery, and PHP.
Fields can be displayed as checkboxes or radio buttons. It will filter all the selected posts for your desired post types and supports AJAX.
You have a lot of customization options available, such as order by, order, multiple custom post types, excluded posts, reset button, load more button, and customization of “No Results Found” and “Loading Posts” messages.
To see the limitations, please refer to the ‘Key Features’ section below.
- Intelligent pagination that adapts based on current page position
- Shows head pages (1-5), tail pages (last 5), and a dynamic middle window around the current page
- Eliminates ellipses between consecutive pages for cleaner navigation
- Configurable maxPages threshold to determine when ellipses are needed
- Custom ellipsis characters support
- OR-based search across post titles, content, and excerpts
- ACF field search with automatic fallback to core fields when ACF fields are empty
- Keyword search through AJAX without page reload
- Real-time filtering that preserves search state across page navigation
- Form submission prevention – Enter key triggers AJAX search instead of page reload
- State persistence – Filters and search terms maintained across pagination clicks
- URL parameter sync – Proper URL updates for pagination while keeping forms clean
- Smart button visibility – Load more/less buttons hide appropriately based on results
After purchasing the product, you will receive three ZIP files:
- Cornerstone Search and Filter-v4F.tco.zip
- Info Card-CS Search and Filter-for V4F.tco.zip
- Cornerstone Search and Filter-v4-1.php.zip
Unzip the first two files, Info Card-CS Search and Filter-for V4F.tco.zip and Cornerstone Search and Filter-v4F.tco.zip, and import them into the template section of your Cornerstone Theme Builder.
Do not unzip the third file, Cornerstone Search and Filter-v4-1.php.zip. Instead, go to your WordPress dashboard > Plugins > Add New, click on Upload Plugin, locate the third file on your computer, and upload it. After uploading, make sure it is activated.
What is this plugin able to do?
It uses a query from a php files to filter the posts by post type and displays the results in Cornerstone. This version uses AJAX
You can configure the options inside Cornerstone without the need for extra plugins.
Some Key Features
Paginated List of Posts or Pages
You can set up a page that displays a list of specific posts or pages with built-in pagination. This feature is not limited to archives — it can be embedded in a single layout or any Cornerstone page, giving you flexible control over how content is browsed.
Search Combined with Pagination:
Both features can be used together, allowing you to build a search results page where users can filter content by keyword and then browse results across multiple pages. This ensures scalability for larger collections of posts while keeping the experience smooth and organized inside Cornerstone.
Ajax
You can load your posts using AJAX, and the URL will reflect the parameters to allow you to send an accurate URL to prefilter your search.
Choose between checkbox or radio button.
You can set up the taxonomy to use checkboxes or radio buttons for filtering, and you have full control over the look of your buttons, including shape, color, and hover effects.
Optional "Load More Posts" button.
You can set up this "Load More Posts" button to load a customizable number of posts on click or to load all posts at once. (This feature can be displayed in both single-page and archive page layouts.)
Customized "No Results Found" message or "Loading Posts" message.
You have full control to customize messages such as "No Results Found" or "Loading Posts." For the latter, you can easily add a spinner by including a Lottie animation in the settings.
Filter posts from multiple custom post type
You can choose multiple custom post types and filter their posts. The maximum is 15 custom post types.
Exclude some post ID / order / order by
These features will help you get exactly what you want. You can exclude some posts by ID number, order your results in ascending or descending order, and sort by title, post ID, or even numeric metadata.
Filter in modal for mobile view
To be more responsive, you can choose to display the sort and filter options in a modal view only for mobile devices.
Keyword Search in Metadata and Content
Create a dedicated search page focused on keyword queries. Users can search through post titles, excerpts, and predefined metadata fields (e.g., ACF). By targeting only relevant fields, searches remain fast and accurate, with results displayed dynamically in the designated container for a smooth experience.
The search bar lets you search through the _product_attributes metadata in WooCommerce. In Cornerstone, you can enter the attribute key and find matching values.
A feature to limit the number of taxonomy children
Added a feature to limit the number of taxonomy children, preventing long input lists. With this feature, you can specify after how many taxonomy children a "Display All Categories" button will appear. Additionally, you can choose how many children are displayed on the front end. This enhancement makes the filter more readable.
Choose metadata from a dynamic list of existing data
I also added a feature that I’m very proud of: now, when adding a post type, taxonomy parent, or child, you can choose from a list of existing metadata instead of typing it manually. It might seem like a basic feature, but it wasn’t easy to implement (haha)!
Radio button or checkbox Style
Added a feature to customize radio buttons and checkboxes. You can display them in a row or column, and they can also be styled as fully customizable buttons.
Some Limitations
Ajax Cannot Be Deactivated
The component does not have the ability to turn off Ajax.
One-Time Payment
$24.99USD
$14.99USDComponent Setup Support
3 Months of Support
Quality Checked
*Price in US dollars including all fees
3 months Support
Component Setup Support
Previous Version
Version v.3.1
- Enhanced the dynamic display lists for Post Types, Excluded Posts, Parent & Child Taxonomies, and All Posts.
- The new formats are:
- Post Type: Post Type Label (post type slug)
- Excluded Posts: Post Title (ID) -> post_type
- Parent Taxonomies: Taxonomy Label (taxonomy_slug) -> post_type(s)
- Child Taxonomies: Term Name (term_id) -> Parent Taxonomy Label
- All Posts: Post Title (ID) -> post_type
Version v.3
- Added a feature to customize radio buttons and checkboxes. You can display them in a row or column, and they can also be styled as fully customizable buttons.
- I also added a feature that I’m very proud of: now, when adding a post type, taxonomy parent, or child, you can choose from a list of existing metadata instead of typing it manually. It might seem like a basic feature, but it wasn’t easy to implement (haha)!
Version v.2
- Added a feature to limit the number of taxonomy children, preventing long input lists. With this feature, you can specify after how many taxonomy children a “Display All Categories” button will appear. Additionally, you can choose how many children are displayed on the front end. This enhancement makes the filter more readable.
Version v.1
New name cornerstone-filter-radio-checkbox-search-keyword-with-ajax.tco
- Added a search keyword field that works with meta-query data, such as ACF fields, allowing users to search for specific keywords within the metadata you want to include. The search results will be displayed in the result container.
- To optimize the search process, metadata must be input manually, ensuring the search is restricted to relevant data instead of scanning the entire database.
