WordPress Plugin Documentation
Webcasata Content Filter
A tabbed, AJAX-powered content filter for any post type — visitors click a tab and the grid updates instantly, with no page reload.
Overview
Webcasata Content Filter turns any list of content into tabbed, filterable results — posts, pages, or any custom post type (including WooCommerce products), organized into tabs by any taxonomy you choose. Each filter is reusable: build it once, drop it into as many pages as you like with a shortcode or block.
The optional Pro add-on layers on premium templates, a fully custom drag-and-drop layout builder, advanced filtering rules, click analytics, and portable import/export — all documented below alongside the free plugin.
Zero configuration required. Install, activate, create a filter, copy the shortcode — done. Templates, styling, and Pro's advanced tools are there when you want them.
Getting Started
Step 1 — Install & Activate
Upload the plugin via Plugins → Add New → Upload Plugin, then click Activate. A new Content Filter item appears in your admin sidebar.
Step 2 — Start a New Filter
Go to Content Filter → Add New and give it a title — an internal name so you can find it again later (e.g. "Homepage News"). Visitors never see this title.
Step 3 — Choose Post Type & Taxonomy
Pick which content type to pull from — Posts, Pages, Products, or any custom post type your site has. Then choose one taxonomy belonging to it (usually Categories or Tags); this taxonomy's terms become your tabs.
Step 4 — Select Terms
Check off which terms should appear as tabs. Only the ones you check show up — you don't have to include every category on your site.
Step 5 — Set Display Options
Posts per tab, whether to include an "All" tab, which tab is selected by default, the card template, and the pagination style. See Templates and Pagination.
Step 6 — Style It
Colors, spacing, border radius, and typography for tabs and cards, with a live preview before you save. See Styling.
Step 7 — Publish & Copy the Shortcode
Click Update Filter. The shortcode appears in the sidebar of the edit screen — copy it and paste it into any page, post, or widget.
Nothing is lost by saving early. Publish after Step 3 if you like, then come back and refine Display Options or Styling whenever you're ready.
Displaying Your Filter
Shortcode
Every saved filter has its own shortcode. The ID is that specific filter's post ID — copy it exactly as shown rather than retyping it.
[wbcf_filter id="123"]Illustrative example — a 3-tab filter with the Classic template
Gutenberg Block
Search for Webcasata Content Filter in the block inserter. It shows a live preview as you work, and offers optional per-placement overrides in the sidebar:
| Filter | Which saved filter to display — required. |
|---|---|
| Override posts per page | A different post count than the filter's own saved setting, for this placement only. |
| Override template | A different card template than the filter's own saved setting, for this placement only. |
Templates
Five templates ship free; Pro adds five more, plus a fully custom option. All of them respect your Styling settings — the difference is layout.
Classic
Image, category badge, title, meta, and excerpt in a standard card grid.
Cards
Compact cards with an author initial avatar in place of a byline.
Magazine
Editorial-style layout with a larger title treatment.
Minimal
Text-forward, no image — fast-loading, list-like appearance.
News
One full-width entry per row rather than a grid.
Hero PRO
A large featured post above a compact grid of the rest.
Masonry PRO
Pinterest-style variable-height columns.
Timeline PRO
A connected vertical line with entries listed chronologically.
Split PRO
Full-width rows alternating image-left and image-right.
Netflix Style PRO
Square posters with a hover overlay revealing the excerpt.
Want full control instead of a fixed template? Pro's Visual Layout Builder lets you build your own card from scratch.
Pagination
| None | Shows only the first page of results for each tab. |
|---|---|
| Load More button | A button appears when more posts exist; clicking it appends the next page without reloading. |
| Infinite Scroll | The next page loads automatically as the visitor scrolls near the bottom. |
Either style only appears when a tab actually has more posts than its per-page setting.
Styling
Tabs
| Color | Default (inactive) tab text color. |
|---|---|
| Active Color | Color of the selected tab — also used as the accent color elsewhere. |
| Hover | Tab color on mouse hover. |
| Border Radius | Corner rounding on each tab. |
Cards
| Border Radius | Corner rounding on each card. |
|---|---|
| Shadow | None, or a soft drop shadow beneath each card. |
| Gap | Spacing between cards in the grid. |
| Columns | Cards per row on desktop (not shown for always-full-width templates like News). |
Typography
| Font Size | Title font size. |
|---|---|
| Title Color | Post title color. |
| Meta Color | Color for date, author, and comment count text. |
Every field previews live in the admin before you save.
Plugin Settings
Under Content Filter → Settings: a single option, Delete data on uninstall.
Off by default. Turn it on only if you want a full cleanup (all filters and settings) the next time the plugin is deleted — otherwise, your data stays put and reinstalling restores everything.
Visual Layout Builder PRO
Instead of picking a fixed template, build your own card. Select 🎨 Visual Layout (Custom) as the Card Template to reveal the builder, with a live preview alongside it.
Pick Your Elements
Image, category badge, title, date, author, excerpt, comment count, and a button — check what you want.
Drag to Reorder
Rearrange elements top to bottom in any order.
Drag to an Edge
Place two or three elements side by side by dragging onto another element's edge.
Drag to the Middle
Stack one element on top of another — a badge or title overlaid on an image.
Column Ratios
A two-item row offers equal, 30/70, 40/60, 60/40, or 70/30 widths.
Per-Element Options
The gear icon opens alignment, plus word count, button label, or image size where relevant.
Reset to Default restores the standard starting layout at any time.
Advanced Query Rules PRO
A step at the bottom of every filter's edit screen narrows results beyond the taxonomy tab. Add as many rules as you like — all of them must match.
| Author | Only show posts by a specific site author. |
|---|---|
| Taxonomy | Add a second taxonomy/term condition on top of the tab — e.g. combine a Category tab with a specific Region term. |
| Custom Field | Compare any meta field: equals, doesn't equal, greater/less than, contains, or exists/doesn't exist. |
WooCommerce active? Two more rule types appear — see WooCommerce Support.
Analytics PRO
Under Content Filter → Analytics: a card per filter showing which tabs visitors actually click, sorted highest first, with a total and a per-tab "last clicked" timestamp.
A click only counts when a visitor actively switches tabs — not the tab shown on first page load, and not a Load More/Infinite Scroll request for a tab that's already open.
Reset (per filter) or Reset All clears recorded data, useful after testing.
Import / Export PRO
Under Content Filter → Import / Export: move filters between sites as a JSON file.
Export
A single filter, or every filter at once, as a downloadable file.
Import
Upload that file (or paste the JSON) on the destination site. An optional checkbox creates any missing taxonomy terms automatically.
Exports are portable by design: terms are matched by slug and authors by username rather than by database ID, so a filter imports correctly even onto a site with a completely different database. Anything that can't be matched is skipped with a clear note — the rest of the filter still imports.
WooCommerce Support PRO
Products, Product Categories, and any Brand taxonomy already work with no extra setup — they're simply another Post Type / Taxonomy choice in Getting Started. Two things are store-specific:
| On Sale / Featured | Two Advanced Query Rule types, shown only when WooCommerce is active. |
|---|---|
| Price, Add to Cart, Star Rating, Sale Badge | Four extra Visual Layout Builder elements, rendered using WooCommerce's own templates. |
For Developers
Every action and filter hook this plugin (and Pro) expose — with a working code example for each — is documented in docs/DEVELOPER.md inside the plugin folder.
Common Starting Points
wbcf_query_argsChange which posts a filter showswbcf_before_cardInject markup before each cardwbcf_after_cardInject markup after each cardwbcf_locate_templateRegister a template of your ownwbcf_results_htmlFilter the fully-rendered results HTMLwbcf_tab_viewedFires on every genuine tab clickPro adds its own extension points too — wbcfp_layout_element_definitions and wbcfp_render_layout_element let you register a custom Visual Layout Builder element. Full details in docs/DEVELOPER.md.
Frequently Asked Questions
Can one filter use more than one taxonomy for its tabs?
No — each filter's tabs come from a single taxonomy's terms. To combine two taxonomies (e.g. Category and Region), create the tabs from one and add the other as a Taxonomy or Custom Field rule in Pro's Advanced Query Rules.
Does deactivating the plugin delete my filters?
No. Deactivating never touches your data. Even deleting the plugin leaves everything in place unless you've explicitly turned on "Delete data on uninstall" in Settings.
Can I use the same filter in more than one place?
Yes — its shortcode or block can be placed on as many pages as you like, and they all reflect the same saved settings.
Does Pro require a license key?
No — Pro checks that the free plugin is installed and active, and that's it. There's no license-key activation step.
What happens if I deactivate Pro later?
Filters using a Pro-only template or the Visual Layout Builder fall back to the Classic template until Pro is reactivated. Nothing is deleted — your Pro settings pick back up as soon as Pro is active again.