Pixolette Logo

LSCF

Live Search and Custom Fields

Live Search and Custom Fields(LSCF)

Custom Posts, Custom Fields and Live Filter/Search in one single WordPress plugin

If you have any questions that are beyond of the scope of this documentation, or having some troubles with the plugin,
please feel free to post a ticket here or email us at tickets@pixolette.com.

Version: 2.7.1

Released: January 15, 2021

By: Pixolette

Contact: tickets@pixolette.com

Online Documentation

Quick Start

With Live Search and Custom Fields[LSCF] plugin you can create custom fields and custom posts and a complex search functionality for a WordPress website like in this demo

First of all you have to install LSCF plugin on your WordPress website. Here is a quick tutorial how install the plugin or watch the video below:



LSCF works with Custom Posts, so you can use an already created Custom Post by your theme or create new ones from LSCF page -> Custom Posts tab -> Create new Custom Post button:(in example below we'll create a Custom Post named Properties)


Now you should be able to see your new created custom post in WordPress left sidebar. From now you can add content to your Custom Post.




Full tutorial

TL;DR

You can watch the video and skip the reading.

Introduction

Learn to create custom posts, custom fields and make a live search/filter for you WordPress site.

I. About Live Search and Custom Fields(LSCF)

LSCF is a premium WordPress plugin that provides the easier way to create custom posts, custom fields and generate a live filter using custom posts from your WordPress site. It's builded with AngularJS - a Google framework and it's up at latest WordPress standards.

Features:
  • 1. Create/remove custom posts and custom taxonomies.
  • 2. Display Custom Posts.
  • 3. Create Custom Fields for any Custom Post Type.
    Custom Fields Types:
    • 1. Text field
    • 2. Date field
    • 3. Radio Button field
    • 4. Checkbox field
    • 5. Select field
    • 6. Checkbox \w icons field
    • 7. Variation/Relationship field
  • 4. Display custom fields in any custom post page.
  • 5. Provides shortcodes for any custom field type.
  • 6. Generate a live filter/search using custom posts.
    Options:
    • Live/instant general search
    • Search by taxonomies/categories
    • Search by Custom Fields
    • Range Field - an additional custom field for your filter. Search by numeric values(By "Text" field)
    • Date Interval Field - an additional custom field for your filter. Search between dates (by "Date" field)
    • Featured Field - an additional custom field for your filter. A Featured field for your post listing.
  • 7. Display a live filter by copying the generated shortcode inside WordPres page.
  • 8. Option to populate the posts from a specific category/categories
  • 9. Drag & drop filters ordering and drag & drop the filter field's options ordering.
  • 10. Infinite scrolling.
  • 11. Alternative filtering.
  • 12. Manage checkboxes conditional logic.
  • 13. Advanced posts default ordering
  • 14. Provides for you users an advanced posts sorting options.
  • 15. Custom filter templates supported.
  • 16. Customize the main color from your Filter.

II. Why LSCF?

  • 1. It runs only one database query to display all custom fields (it doesn't matter how many do you have).

        This improvement helps to avoid the database server workload on high-traffic websites.

  • 2. All filter queries are periodically cached - gives a very high performance to live search and posts filter.
  • 3. Browser Rendering is optimized.
  • 4. The files edit and programming skils are not required.
  • 5. Compatible with any custom post type from any theme.
  • 6. Custom Fields management - choose between custom fields that would show up only into filter page or only into post view page.

Manage Custom Posts

LSCF already detects all custom posts types from your theme, but it also comes with an option to add and display the Custom Posts Type on your WordPress site.

Create a Custom Post Type

  • 1. From WordPress sidebar menu go to LSCF plugin page.
  • 2. Go to Custom Posts tab from LSCF menu.
  • 3. From Custom Posts tab find the box "Custom Post Name" and write your new Custom Post Type name.
    Then click "Create new Custom Post" button.
    As an example, we chosen to build a Real Estate Filter, so we are going to create a Custom Post named "Properties".
  • 4. Now you should be able too see your new added custom post type in the right list Custom Posts List (see the screenshot from below).
    Also the new created Custom Post should be visible from now in WordPress sidebar menu.

    NB: Everytime when you create a new Custom Post type, it's very important to reset your permalinks!
    Clicking on post link you may get 404 in case if the permalinks are not reseted.

    To reset your permalink go to: Settings->Permalinks

    First, remember your initial settings of permalinks, so we'll need to switch back to it ( in our example we have the permalinks set as "Post Name" ).

    Switch the permalinks to Plain and then click Save Changes


    Then switch back the permalinks to your initial option(the option that we asked you to remember
    In our example it would be "Post Name").
    Then click Save Changes again.


Remove a Custom Post Type

  • 1.To remove a custom post go to LSCF plugin page. From plugin menu click on Custom Posts tab.
    On Custom Posts List section you will find a list with all custom posts type created with LSCF.
    Each Custom Post has a remove button. Click on X remove button to delete the Custom Post

Custom Fields

Custom Fields works only with Custom Posts created with LSCF.
To add custom fields, make sure first that you have at least 1 custom posts created with LSCF.

Add Custom Fields

  • 1. Go to Add/remove Custom Fields tab from LSCF plugin page.
    It will display a list with all Custom Post created with LSCF. Click on Custom Post to add custom fields.
  • 2. Select a custom field type from Select box and click add button.
  • 3. After all custom fields were added, click Save button from below to save the custom fields.
    In this screenshot you can find an example of custom fields list for our Properties custom post.
  • 4. To check if your custom fields were added, click on your custom post (in our example is "Properties") from WordPress left Sidebar.
    The click Add New
  • 5. Now you should be able to see all Custom Fields added to Custom Post.
    In the screenshot from below you can see a list of custom fields from our Demo Custom Post Properties
  • 6. Check the buttn "Show it up into post's view page" if you want to display the field in post view.
    Leave it empty/unchecked if you need it only in filter section.

Display custom fields

The custom fields are displayed automatically in post page.
Only checked as "Show it up into post's view page" (see previous step) would be displayed


The screenshot from below represents how custom fields are displayed into post page.

Custom Fields shortcode

Display any LSCF custom field into any page, LSCF filter templates or your builder section/element using the LSCF custom field shortcode as below:

[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0"]

Shortcode params:

custom_field_id: Is required. - You can find the LSCF custom field ID under Custom Fields plugin tab. See screenshot as example:



post_id: Is optional - Use this shortcode param to display a LSCF custom field from a specific post.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" post_id="123" ]

title: Is optional | Default: 0.

Possible values:   1 - display custom field title
0 - hide custom field title

Use this param to display the LSCF custom field title.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" post_id="123" title="1" ]

display_in: Is optional | Default: post.

Possible values:   all - display custom field into post and filter template
filter - display custom field into filter template only
post - display custom field into post page only

Use this param to display the LSCF custom field in a specific section: LSCF filter template only or post/page section only or both.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" display_in="filter" title="0" ]

display: Is optional | Default: block.     (Works only with checkbox \w icons and checkbox custom field type )

Possible values:   inline - display checkboxes, checkboxes with icons values in line
block - display checkboxes, checkboxes with icons values in block. Each value will be added in a new independent row

This param works only with LSCF custom field of checkbox and checkbox \w icons type. Display the values in line or in block
Shortcode example:
[lscf_customfield custom_field_id="my_checkbox__pxid_ndgdyapjojywmkw_0" display_in="filter" title="0" display="inline" ]

icons_only: Is optional | Default: 0.     (Works only with checkbox \w icons custom field type)

Possible values:   1 - display the icons only (hide the labels). checkboxes with icons values in line
0 - display checkboxes, checkboxes with icons values in block. Each value will be added in a new independent row

This param works only with LSCF custom field of checkbox \w icons type. Hide the option labels. Display only the icons
Shortcode example:
[lscf_customfield custom_field_id="my_icons__pxid_ndgdyapjojywmkw_0" display_in="filter" display="inline" icons_only="1" ]




Developers - display custom fields into post template via PHP - single.php

Get the LSCF custom field values: use this php function

$lscf_cf = lscf_get_custom_fields( $field_id );
It works only inside while( have_posts() ) loop.

To get the $field_id (Custom Field ID), go to Custom Fields tab from plugin page. Under this section you'll find your custom field ID according to your post list. See screenshot below:


GET DATA from Dropdown, Radio, Text, Date custom field types

$lscf_cf = lscf_get_custom_fields( 'square_ft__pxid_xmnxirlzxsekyhq_1' );
echo $lscf_cf;
GET DATA from Checkbox custom field type

$lscf_cf = lscf_get_custom_fields( 'square_ft__pxid_xmnxirlzxsekyhq_1' );
foreach ( $lscf_cf as $value ) {
    echo $value;
}
GET DATA from Checkbox \w icons custom field type

$lscf_cf = lscf_get_custom_fields( 'square_ft__pxid_xmnxirlzxsekyhq_1' );
foreach ( $lscf_cf as $value ) {
    $img_src = $value['icon'];
    $option_value = $value['opt'];
}

Generate a Custom Posts Filter

To generate a shortcode for your own custom filter go to LSCF page, the click on Custom Filter tab from menu.

  • 1. On Create your Custom Filter section write your filter name and click next
  • 2. Select a Custom Posts type to filter.
  • 3. LSCF allows you to filter the Custom Posts by taxonomies/categories and custom fields (added with LSCF).
    • In case if you want to filter the posts by taxonomies/categories - you need to make sure that they were added already to Custom Post
      See screenshot from below how to add custom taxonomies/categories for your custom post. In our example the chosen Custom Post type is Properties

      Click on Categories to display the post's taxonomies

    • Click on Custom Fields to display all the custom fields from selected Custom Post
  • 4.1 Filter by your post taxonomies. LSCF will detect all posts/custom post taxonomies and will display its terms in the following format as screenshot below.
    Select a name (in our case "Cities") for your terms filter, also you have an option how to display the taxonomy terms in the filter, as: checkbox, radio and dropdown
    4.1.1 - Generate multiple filters using the terms from same taxonomy
    Click on "Display parent categories as new independent filter field" to activate the option. This option is designed to display multiple filters using the terms from same taxonomy.
    Each childs group will became a new filter field. So, in the example below we have the Los Angeles & San Francisco as parent categories with their children.
    So, in the generated filter the "Los Angeles" children and the "San Francisco" children will become as 2 independent filter fields. See screenshot below:
    4.1.2 - Display terms as hierarchical levels
    LSCF supports unlimited levels of hierarchy. It works only with taxonomy terms. You just need to group your taxonomy terms in a hierarchy way as WordPress provides.
    See example below of the WordPress terms aranged in a hierarchical way - it's taken from our hierarchical demo https://lscf.pixolette.com/hierarchical/

    To activate the hierarchical terms display, check the Display subcategories as hierarchical



    4.2 Select the custom fields that would show up into filter sidebar. Choose te display type of each custom field.
  • 5. Additional Filter Fields.

    • Additional Filter field: Search
      It's a live/instant search of Custom Posts. Will search through all Custom Post's title and description



    • Additional Filter field: Range

      It search by a numeric value. Works only with Custom Fields of Text type!
      It detects all Custom Fields of Text type from selected Custom Post.

      Range will work fine with your Text Custom Field even if it has some text+digits..
      For example: A Price field that would be a custom field of Text type will have the following values:
      $ 1200/month - Range will work fine, it will give a correct search results as it will grab 1200 as a number
      12 some text $ 200/month - Range will give a wrong search results as it will grab 12 as a number


      In our example we have 2 Custom Fields of Text type: "Price", and "Square ft."



    • Additional Filter field: Date Interval

      It search between 2 dates. Works only with Custom Fields of Date type!
      It detects all Custom Fields of Date type from selected Custom Post.


  • 6. Set Custom Fields of Text type or of Date type as featured. It will show up on posts listing.


  • 7. Chose a template for your filter, set columns number. More options are available in the Frontend Editor

  • 8. Click on Generate Shortcode to generate your filter's shorcode.

  • 8. Copy generated shortcode to WordPress page to show the Custom Filter.


Generate a live search filter for WooCommerce shop.

With LSCF you can easily create a live search and custom filter for your WooCommerce products

  • 1. Select the Products(WooCommerce) post type from dropdown.


  • 2. Select any categories or attributes from your WooCommerce Product Post.Skip if you don't need them into filter's sidebar

  • 3. Select the custom fields from your WooCommerce product post type. Choose a display option for each custom fiel

  • 4. Add additional field type - Range
    Range Field available option:
  • 5. Add additional field type - Instant Search
    Instant search available options:
  • 6. Click on Generate Shortcode to generate your filter's shorcode.

  • 7. Copy generated shortcode to WordPress page to show the Custom Filter.





Frontend Editor



To open the The Frontend Editor go to generated filter page(frontend), click on Settings. The settings button is showing only for users with "Administrator" role. You need to make sure that you are logged as Administrator

Any change that is made from Frontend Editor is AUTOSAVING - the changes will get updated immediately





  • How to change the filter fields order





    Open the Frontend Editor and from there activate the "Order filter fields" option.


    Drag the fields to reorder as desired


    Drag the field option to reorder them as desired


    After fields ordering and fields options ordering is done, open the Frontend Editor to deactivate the "Order filter fields" option.
    The settings are autosaving each time when a move is made.

  • How to change the template color


    You can easily change the template color from Frontend Editor. Any color change that is made is autosaving and changes get updated immediately.


  • How to change the posts number per page


    Change the posts number from Frontend Editor. The changes are autosaving.


  • How to display posts from a specific category only


    LSCF provides an option to select the categories from which you would like to populate the posts.
    That means you can display only some posts that match a category/categories


  • How to activate Alternative Filtering


    LSCF provides an "Alternative Filtering" option. You can activate it from Frontend Editor->Options.
    This option is designed to disable empty categorie/custom fields(that doesn't has any post) when filtering


  • How to add Sorting options




    The available sorting options are:
    Sort by title, Sort by date and Sort by any LSCF custom field of text type or date type


  • How to switch the template


    LSCF provides couple predefined template that you can choose depending on your needs.
    Click through theme icons to switch the template. Any change that's made gets updated immediately





LSCF Shortcodes

Custom Fields shortcode

Display any LSCF custom field into any page, LSCF filter templates or your builder section/element using the LSCF custom field shortcode as below:

[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0"]

Shortcode params:

custom_field_id: Is required. - You can find the LSCF custom field ID under Custom Fields plugin tab. See screenshot as example:



post_id: Is optional - Use this shortcode param to display a LSCF custom field from a specific post.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" post_id="123" ]

title: Is optional | Default: 0.

Possible values:   1 - display custom field title
0 - hide custom field title

Use this param to display the LSCF custom field title.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" post_id="123" title="1" ]

display_in: Is optional | Default: post.

Possible values:   all - display custom field into post and filter template
filter - display custom field into filter template only
post - display custom field into post page only

Use this param to display the LSCF custom field in a specific section: LSCF filter template only or post/page section only or both.
Shortcode example:
[lscf_customfield custom_field_id="price__pxid_ndgdyapjojywmkw_0" display_in="filter" title="0" ]

display: Is optional | Default: block.     (Works only with checkbox \w icons and checkbox custom field type )

Possible values:   inline - display checkboxes, checkboxes with icons values in line
block - display checkboxes, checkboxes with icons values in block. Each value will be added in a new independent row

This param works only with LSCF custom field of checkbox and checkbox \w icons type. Display the values in line or in block
Shortcode example:
[lscf_customfield custom_field_id="my_checkbox__pxid_ndgdyapjojywmkw_0" display_in="filter" title="0" display="inline" ]

icons_only: Is optional | Default: 0.     (Works only with checkbox \w icons custom field type)

Possible values:   1 - display the icons only (hide the labels). checkboxes with icons values in line
0 - display checkboxes, checkboxes with icons values in block. Each value will be added in a new independent row

This param works only with LSCF custom field of checkbox \w icons type. Hide the option labels. Display only the icons
Shortcode example:
[lscf_customfield custom_field_id="my_icons__pxid_ndgdyapjojywmkw_0" display_in="filter" display="inline" icons_only="1" ]









Create custom template for LSCF

With LSCF you can create unlimited custom templates to fit your theme design and layout. Only HTML and CSS knowledge are required.

Create custom template Steps:

  • 1. Create a folder into your theme directory called lscf-templates. The plugin will detect automatically all templates from that folder.




  • 2. In the created folder(lscf-templates) create a lscf-{your-template-name-goes-here}.html file.
    LSCF will detect only the .html files with name lscf-{some-template-name}.html.
    Here are couple examples of correct template file names: lscf-portfolio.html, lscf-real-estate-articles.html, lscf-photography.html,, etc.



  • 3. Open the new created template file from lscf-templates folder and start editing it.
    All your html code should be inseterted into the main div block:

    <div ng-repeat="post in filterPostsTemplate.posts">
      <!-- All your HTML code hoes here -->
    </div>


  • 4. Activate your new created custom template
    To activate your custom template, go to Frontend Editor and there will be a new section called Custom Themes
    Click on custom template to activate it.




Custom template Data Tags list

All templates Data Tags works only inside this code line:
<div ng-repeat="post in filterPostsTemplate.posts">
  <!-- All your HTML code goes here -->
</div>

Description Tag
Post title short( 6 words+[...] ) {{post.title.short}}
Post title {{post.title.long}}
Post ID {{post.ID}}
Post Content short( 20 words ) {{post.short_content}}
Post Content medium( 55 words ) {{post.content}}
Post Content full {{post.full_content}}
Post Featured Image {{post.featuredImageFull}}
Post Permalink {{post.permalink}}
Post Date {{post.date}}
Custom Date:

d - day ex.: Tuesday
dd - day ex.: Tue
ddd - day ex.: 24
m - month ex.: April
mm - month ex.: 04
mmm - month ex.: 4
y - year ex.: 2018

 {{post.custom_date.d}}
{{post.custom_date.dd}}
{{post.custom_date.ddd}}
{{post.custom_date.m}}
{{post.custom_date.mm}}
{{post.custom_date.mmm}}
{{post.custom_date.y}}
Post Author {{post.author}}
Post Categories <span ng-repeat="category in post.categories"> {{category}} <⁄span>
Featured label( text field that is selected when shortcode is generated ) {{post.featured_label.value}}
WooCommerce Regular Price {{post.woocommerce.regular_price}}
WooCommerce Sale Price {{post.woocommerce.sale_price}}
WooCommerce Sale Percentage {{post.woocommerce.sale_percentage}}
WooCommerce Variation Min Price {{post.woocommerce.variation_min_price}}
WooCommerce Variation Max Price {{post.woocommerce.variation_max_price}}
WooCommerce Price {{post.woocommerce.price}}
WooCommerce Price currency {{post.woocommerce.price_currency}}
WooCommerce product SKU {{post.woocommerce.sku}}
WooCommerce product stock quantity {{post.woocommerce.stock}}
WooCommerce add to cart link {{post.woocommerce.add_to_cart_link}}
WooCommerce Gallery <span ng-repeat="imageUrl in post.woocommerce.gallery"><img src="{{imageUrl}}"><⁄span>



Insert LSCF custom fields data into your custom template

To insert a LSCF custom field data use the following tag:

{{post.customFields.[the LSCF Custom Field ID].value }}


You can get the LSCF Custom Field IDs from plugin backend page(see screenshot below)

Using the LSCF custom fields that are created in the screenshot below, we can get the custom fields data using following tags:
Price: {{post.customFields.price__pxid_ndgdyapjojywmkw_0.value}},
Square ft.: {{post.customFields.square_ft__pxid_xmnxirlzxsekyhq_1.value}}



Retrieve LSCF custom fields values by custom field type:

For custom fields type: Text, Date, Dropdown, Radio use the following format:
{{post.customFields.[the LSCF Custom Field ID].value }}

For custom fields of Checkbox custom field type, use the following code: <span ng-repeat="fieldValue in post.customFields.[the LSCF Custom Field ID].value">{{fieldValue}}<span>

For custom fields of Checkbox \w icons custom field type, use the following code: <span ng-repeat="fieldValue in post.customFields.[the LSCF Custom Field ID].ivalue"><img src="{{fieldValue.icon}}"> {{fieldValue.opt}}<span>

LSCF - Premium WordPress plugin



Feel free to check the Pixolette website WordPress tips and plugins.

Live Demo of LSCF: http://lscf.pixolette.com/

Have troubles? Open a Support Ticket.



Support services will only cover only LSCF plugin setup, trouble using any features, and bug fixes. Regretfully we can't provide support for modifications or 3rd party plugins issues. Thanks for your understanding.