Search
  • Demo Site
  • Test Our Software Live
Search Menu

WordPress Real-Time Post Filter – Masonry Layout

This demo of the Toggle Post Filter uses the light theme with a wide layout for the menu part and a masonry layout for the posts. Toggle labels are WordPress tags, sorted into groups.

The reset button is a standard WordPress Gutenberg button block with the CSS class tg_dpf_toggle_reset_button. We also use a custom template for the posts – see at the bottom of this page.

Search a Recipe

Use the toggle switches or type some text and see all matching recipes below.

Text Search

Meal Type

Preparation

Preparation Time

Post template used for this demo:

<header class="tg-entry-header">
<a href="{permalink}" rel="bookmark"><img src="{image_src|100%xauto}" alt="{image_alt}" style="border: solid 1px #ccc; border-radius:7px;" /></a>
<h3 style="margin:0.8em 0 0;display:inline-block;"><a href="{permalink}" rel="bookmark">{post_title}</a></h3>
<h4 style="font-size:12px; margin:0.5em 0;">{post_date} | {post_category}</h4>
</header>
Share