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:

<div class="tag-groups-large-image-post-template">
 <header>
  <div style="position:relative; margin:5px;" class="tg-box-shadow tg-border-radius-10">
   <a href="{permalink}" rel="bookmark"><img src="{image_src|100%xauto}" alt="{image_alt}" />
   <div style="position:absolute; bottom:0; left:20px; text-align:left; padding: 5px 25px 5px 5px;">
    <h3 class="tag-groups-outline" style="font-size:24px; line-height:32px; color:#fff;">{post_title}</h3>
   </div>
   </a>
  </div>
 </header>
</div>
Share