How to create a CPT archive layout with a simple but mighty text filter function?

[salilou]

Hi,
I want to create a CPT archive layout with filter function over title, some ACF custom fields und ACF category.
Is there a way to do this with cornerstone?
The archive list should have a simple search text field and a button.
When I enter a text string for example “mozart” and hit the button, then the page should reload and filter the entries like this:
SHOW ALL entries of my-cpt
WHERE title like “%mozart%” OR
my-acf-field-1 like “%mozart%” OR
my-acf-field-2 like “%mozart%” OR
my-cpt-category like “%mozart%”

I think this would be possible with dc:url:params and Wordpress Query String and would be an exciting feature for many cases of flexible search and filter applications.
Thank you & kind regard,
Hannes

[ruenel]

Hello Hannes,

Thanks for writing in! There has been a similar question regarding what you are trying to do. Kindly check out this video first:

Easily setup custom sorting capabilities in WordPress with zero plugins.

Best Regards.

[salilou]

Thanks for the quick reply.
I already know this video and it was the reason why I thought it might be possible.
However, the video only discusses sorting, not filtering with LIKE operators.
So my questions are:

1. Is there a way to use Cornerstone to create the text input field for the text phrase I am looking for?
2. Using Cornerstone, is there a way to build the query string using LIKE operators to compare the text phrase?
   Thank you!

[ruenel]

Hello @salilou,

You can use a combination of the DIV element and the Raw Content element to be able to build an input field like this structure:

You can check out the Input <input> HTML tag here:

• HTML input tag (w3schools.com)

As for the query operator, you can have the param condition used in the video to show or hide a section that contains the query string.

Hope this makes sense.

[salilou]

Thank you. That got me further.
I have the search form now with submit button.
It is a catalog raisonné of modern string music.

I have this query string, but it only shows entries with the searched string in the composers names, the line-up and the year of composing - all of them are ACF custom fields. This works fine, but it shall also search for opus name (“Werktitel” or title of the CPT “werke”).
I guess my query string is wrong, but can’t figure it out.

Query before encoding to HTTP Query string

$query_args = array(
'posts_per_page' => '-1',
'ignore_sticky_posts' => true,
'post_type' => 'werke',
'post_status' => 'publish',
'order' => 'ASC',
'orderby' => 'meta_value',
'meta_key' => 'komponist',
'meta_query' => array(
	'0' => array(
		'key' => 'komponist',
		'value' => '{{dc:url:param key="fsearch"}}',
		'compare' => 'LIKE',
	),
	'1' => array(
		'key' => 'besetzung',
		'value' => '{{dc:url:param key="fsearch"}}',
		'compare' => 'LIKE',
	),
	'2' => array(
		'key' => 'kompositionsjahr',
		'value' => '{{dc:url:param key="fsearch"}}',
		'compare' => 'LIKE',
	),
	'3' => array(
		'key' => 'title',
		'value' => '{{dc:url:param key="fsearch"}}',
		'compare' => 'LIKE',
	),
	'relation' => 'OR',
),

);

HTTP query String

posts_per_page=-1&ignore_sticky_posts=true&post_type=werke&post_status=publish&order=ASC&orderby=meta_value&meta_key=komponist&meta_query[0][key]=komponist&meta_query[0][value]={{dc:url:param key="fsearch"}}&meta_query[0][compare]=LIKE&meta_query[1][key]=besetzung&meta_query[1][value]={{dc:url:param key="fsearch"}}&meta_query[1][compare]=exp_like&meta_query[2][key]=kompositionsjahr&meta_query[2][value]={{dc:url:param key="fsearch"}}&meta_query[2][compare]=exp_like&meta_query[3][key]=title&meta_query[3][value]={{dc:url:param key="fsearch"}}&meta_query[3][compare]=exp_like&meta_query[relation]=OR

I hope you see the cause.
The link is in the secure note.
Thank you!
Hannes

[marc_a]

Hey Hannes,

To query array of meta query your WP query should look like this one:

query_args = array(
    'posts_per_page' => -1, // -1 retrieves all posts
    'ignore_sticky_posts' => true,
    'post_type' => 'werke',
    'post_status' => 'publish',
    'order' => 'ASC',
    'orderby' => 'meta_value',
    'meta_query' => array(
        'relation' => 'OR',
        array(
            'key' => 'komponist',
            'value' => {{dc:url:param key="fsearch"}},
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'besetzung',
            'value' => {{dc:url:param key="fsearch"}},
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'kompositionsjahr',
            'value' => {{dc:url:param key="fsearch"}},
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'title',
            'value' => {{dc:url:param key="fsearch"}},
            'compare' => 'LIKE',
        ),
    ),
);

Please try that WP query and let us know how it goes.

Hope that helps.

[salilou]

Thank you.
Sorry I am still quite new with query strings.
Where shall I insert the query?
Looper > WP Query?
I thought I should first encode it to a http query string, shouldn’t I?
Kind regards,
Hannes

[marc_a]

Hey Hannes,

You need to convert the WP query into an HTTP query like you did on the above posts.

Hope that helps.

[salilou]

Thank you.
I did it with an online tool, that was suggested here in another thread:

WP Query Generator - create custom WordPress queries

But it converts only JSON to HTTP query string, not PHP array to HTTP query string.
Can you suggest a tool to do this or do I have to build it by myself … in the functions.php?
Thank you very much for your help!
The Query Builder is a really powerful tool and by providing this functionality you have given me completely new ideas about what is possible. Unfortunately I didn’t find any explanation in your videos on how to use it in a broader sense.

[marc_a]

Hey Hannes,

Please check this thread on how you can build your http query string using the functions.php.

• Looper Query String: Featured Products

Hope that helps.