WP Live Content Filter Demo

Simple demo

This is the simplest way to use the shortcode.

[wp-lcf container_selector=".list1" filter_selector="li"]Write something here[/wp-lcf]

produce the following filter box (the list is ot generated from the plugin!).

  • Abarth
  • Basel
  • B Engineering
  • Centenari
  • Bertone
  • Casalini
  • Covini
  • DR
  • Effedi
  • Faralli & Mazzanti
  • Ferrari
  • Fornasari
  • Giottiline
  • Lamborghini
  • Lancia
  • Maserati
  • Pagani
  • Picchio

Full text search

This example show how to display a filter box for a “full text” filter (or “contain text”) and with customization of showing and hiding effect for the filtered elements.

[wp-lcf container_selector=".list2" filter_selector="li a" filter_type="containText" effect_selector="li"]Write something here[/wp-lcf]

produce the following filter box

Search with text beginning

This is for a “begin with text” filtering…

[wp-lcf container_selector=".list3" filter_selector="li a" filter_type="startWithText" effect_selector="li"]Write something here[/wp-lcf]

produce the following filter box

Woocommerce integration

The Woocommerce filter parameters are customizable from the configuration page.

Check Woocommerce integration by click to the Woocommmerce Shop page in the sidebar menu.

Filtering grid elements

This example show ho to use the plugin to filter a grid of elements. There’s a sort icon that let you to sort the elements (“filter_selector”) and rearrange items (“effect_selector”) in a sorted order, and a layout change button to change layout of the items (list or grid).

[wp-lcf container_selector=".grid4" filter_selector=".item a" effect_selector=".item" sort_button="yes" layout_button="yes" layout_type="grid"]Write something here[/wp-lcf]

produce the following filter box

Abarth (1949–present)
Basel (1990–present)
B Engineering (2001–present)
Centenari (1991–present)
Bertone (1912–present)
Casalini (1969–present)
Covini (1978–present)
DR (2006–present)
Effedi (1979–present)
Faralli e Mazzanti (2006–present)
Ferrari (1947–present)
Fornasari (2001–present)
Giottiline (2006–present)
Lamborghini (1963–present)
Lancia (1906–present)
Maserati (1914–present)
Pagani (1992–present)
Picchio (1989–present)

Ordering button and filter presets and layout change button

[wp-lcf container_selector=".list5" filter_selector="li a" filter_type="containText" sort_button="yes" clear_button="yes" layout_button="yes" layout_type="list" effect_selector="li" filter_presets="Ferrari,Maserati"]Write something here[/wp-lcf]

produce the following filter box

  • Ferrari
  • Maserati

Table-based data multiple filtering


<table class="table1">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Department</th>
<th>Position</th>
</tr>
<tr>
<td>[wp-lcf container_selector=".table1" filter_selector="tbody tr td:first-child" effect_selector="tbody tr" filter_type="startWithText" filter_group="group1" clear_button="yes" layout_type="table" sort_button="yes"]Name[/wp-lcf]</td>
<td>[wp-lcf container_selector=".table1" filter_selector="tbody tr td:nth-child(2)" effect_selector="tbody tr" filter_type="startWithText" filter_group="group1" clear_button="yes" layout_type="table" sort_button="yes"]Surname[/wp-lcf]</td>
<td>[wp-lcf container_selector=".table1" filter_selector="tbody tr td:nth-child(3)" effect_selector="tbody tr" filter_type="startWithText" filter_group="group1" clear_button="yes" layout_type="table" sort_button="yes"]Department[/wp-lcf]</td>
<td>[wp-lcf container_selector=".table1" filter_selector="tbody tr td:nth-child(4)" effect_selector="tbody tr" filter_type="startWithText" filter_group="group1" clear_button="yes" layout_type="table" sort_button="yes"]Position[/wp-lcf]</td>
</tr>
</thead>
<tbody>
<tr>
<td>Robert</td>
<td>Black</td>
<td>Engineering</td>
<td>Director</td>
</tr>
<tr>
<td>Emily</td>
<td>Green</td>
<td>Management</td>
<td>Advisor</td>
</tr>
<tr>
<td>Edward</td>
<td>Brown</td>
<td>Sales</td>
<td>Director</td>
</tr>
<tr>
<td>Mary</td>
<td>White</td>
<td>Engineering</td>
<td>Advisor</td>
</tr>
</tbody>
</table>

produce the following filters

Name Surname Department Position
Robert Black Engineering Director
Emily Green Management Advisor
Edward Brown Sales Director
Mary White Engineering Advisor

Visual Composer Images

The plugin works wit Visual Composer images too. Here is a demo:

Joe Black
Susan White
Bill Green
Albert White
Fred Yellow
Alice Green

And this is the code to render the demo:

[vc_row][vc_column][vc_column_text][wp-lcf container_selector="#grid_vc" filter_selector=".vc_column_container figcaption" effect_selector=".vc_column_container" filter_type="containText" clear_button="yes" sort_button="yes" layout_button="yes" layout_type="grid"]What are you looking for?[/wp-lcf][/vc_column_text][/vc_column][/vc_row][vc_row el_id="grid_vc"][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Joe Black"][/vc_column][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Susan White"][/vc_column][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Bill Green"][/vc_column][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Albert White"][/vc_column][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Fred Yellow"][/vc_column][vc_column width="1/3"][vc_single_image source="external_link" external_img_size="" alignment="center" custom_src="https://placehold.it/180x180" caption="Alice Green"][/vc_column][/vc_row]