Dynamic Filter Selection on Page Load with Query String Parameters

Introduced in v3.1.0, you now have the ability to have custom filters selected on the frontend (on page load) by adding custom query string parameters in the URL. This opens up many new possibilities which now allows you to serve custom filtered content to custom audiences.

How does this work?

The query string parameter is scf_select and the value for this parameter is supposed to be the filter tags separated by a comma.

Example:

scf_select=Tag 1,Tag 2

This will select Tag 1 and Tag 2 automatically on page load.

Note:

  1. Don’t add any extra spaces before or after the comma.
  2. Copy the tag as it is from the meta box tag input.
  3. The default selected filters applied in the metabox won’t work when the query filters are applied.

Any errors/typos in either the tag name or adding extra spaces anywhere in between (except if it’s within the tag name) would cause this functionality to not work as expected.

How to apply this in a URL?

A URL with applied SCF query parameter (with filter tags from the example before) would look like:

https://yoursite.com/scf-page/?scf_select=Tag 1,Tag 2

Or if you already have a query string parameter for some other task, then you need to append it with an ampersand (&) instead of a question mark (?)

Continuing from the above example, it would look like:

https://yoursite.com/scf-page/?other_parameter=some_value&scf_select=Tag 1,Tag 2

You can then send this URL to someone or link it at someplace to have custom filters activated by default.

If you are also using Anchor links in that URL…

Anchor links (Eg: #section) always go after query string params, so if you want to auto-scroll to a section using anchor links and also use the query params, add the anchor link after the full query string in the URL.

Example:

https://yoursite.com/scf-page/?scf_select=Tag 1,Tag 2#section

Was this page helpful?