This plugin provide an input box to filter a specified DOM element (like `.products li` or `item`) and hide
those who does not contain the inputed text. User start writing into the input box and the plugin start
filtering the DOM elements, hiding those who does not contain filter text.

The plugin work with a shortcode which let the user customize the target DOM element, the text displayed as
placeholder into the input box, the effect to hide the items (slide or fade) and a class to be applied to the
filter input box (for styling purpuoses).

It is possible to integrate the filter into the Woocommerce product page: in this case the customization can
be made via configuration page (filter class and effect).

This plugin require Redux Framework plugin to work. TGMPA plugin is provided to install required plugin
on activation.

Feature list

This section describes the features of the plugin.

1. Ease of use via shortcode button generator
1. Customizable shortcode parameters:
* input box text
* search target DOM element
* search type
* filter effect DOM element
* filter effect type
* custom class
1. Animate.css effect for content hide an show
1. Woocommerce product page integration customizable via configuration page
1. ReduxFramework-made configuration page
1. TGM-Plugin-Activation dependancy installer
1. Built on WordPress Plugin Boilerplate by Tom McFarlin.


This section describes how to install the plugin and get it working.

1. Upload `wp-live-content-filter` folder to the `/wp-content/plugins/` directory
1. Activate the plugin through the `Plugins` menu in WordPress
1. If needed install Redux Framework plugin

Shortcode use

This section describes how to use the plugin shortcode.

This is the minimal user of the shortcode

`[wp-lcf search_element=”.list li”]Write your custom placeholder here[/wp-lcf]`

In this way the plugin display a text box which let the user write a text used to filter the
specified DOM elements (”.list li”).

When user start writing the plugin search into ALL THE CONTENT of the specified DOM elements.
When the inputed text is found the element remain visible, otherwise the element will be hidden.

Here is and example of advanced use with all parameters:

`[wp-lcf search_element=”.list li .title” search_type=”startWithText” effect_element=”.list li” effect_in=”fadeIn” effect_out=”fadeOut” class=”my-input-style”]Write your custom placeholder here[/wp-lcf]`

  • `search_element`: specify the element where the search will be performed.
  • `search_type` (optional): specify the type of search performed to hide or show elements: can be `startWithText`,
    `endWithText` or `containText`. Default value: `containText`.
  • `effect_element` (optional): specify the target element to be filter (hidden or shown).
    If not specified `search_element` will be used.
  • `effect_in` (optional): effect applied when showing elements (see <> for other values).
    Default value: fadeIn.
  • `effect_out` (optional): effect applied when hiding elements (see <> for other values).
    Default value: fadeOut.
  • `class` (optional): class applied to filter input box, for styling purpuoses.
  • `placeholder text`: the text displayed as placeholder of the filter input box

The plugin provide a shortcode generator button into TinyMCE content editor.

Woocommerce integration

To enable the filter input box into Woocommerce product page you have to go to the WordPress WP Live Contet
Filter configuration page and set to yes the `Enable integration` flag.

This will enable the customization option into the configurationa page too.


1.2.1 – 18/02/2015

  • Minor bug fix
  • Documentation update

1.2 – 16/02/2015

  • Added search type parameter
  • Added separate search target and effect target parameters
  • Javascript optimization
  • Documentation update

1.1 – 10/02/2015

  • Added separate hide and show effects parameters
  • Added Animate.css animation effects
  • Minor mispelling corretions
  • Documentation rewrite.

1.0 – 25/01/2015

  • First release.