I’m trying to build a custom post library with multiple filters on a WordPress site. I’m using Elementor builder which has the option for a [custom query filter][1] (which is an convenient way to use wp_query()).
Just a small disclaimer – **this might not be the best approach, I’m open to starting anew.**
My idea is:
– user makes selection on one of the filters
– refresh page and update url parameter with user selection
– get url parameters and modify wp_query that filters the posts
This is what I have so far:
HTML:
<div class=”form-container”>
<div>
<label for=”field1″>Field 1:</label>
<select id=”field1″ onchange=”updateURLParams()”>
<option value=”” disabled selected>Select type</option>
<option value=”type1″>Type 1</option>
<option value=”type2″>Type 2</option>
<option value=”type3″>Type 3</option>
</select>
</div>
<div>
<label for=”field2″>Field 2:</label>
<select id=”field2″ onchange=”updateURLParams()”>
<option value=”” disabled selected>Sort by</option>
<option value=”date_asc”>Date (oldest first)</option>
<option value=”date_desc”>Date (newest first)</option>
</select>
</div>
<div>
<label for=”field3″>Field 3:</label>
<input type=”text” id=”field3″ placeholder=”Enter keywords here” onkeypress=”handleInputKeyPress(event)”>
</div>
</div>
JS:
<script>
function updateURLParams() {
const field1Value = encodeURIComponent(document.getElementById(“field1”).value);
const field2Value = encodeURIComponent(document.getElementById(“field2”).value);
const field3Value = encodeURIComponent(document.getElementById(“field3”).value);
const params = new URLSearchParams(window.location.search);
if (field1Value) {
params.set(“type”, field1Value);
} else {
params.delete(“type”);
}
if (field2Value) {
params.set(“sort”, field2Value);
} else {
params.delete(“sort”);
}
if (field3Value) {
params.set(“keyword”, field3Value);
} else {
params.delete(“keyword”);
}
const newURL = window.location.pathname + “?” + params.toString();
window.history.replaceState({}, “”, newURL);
window.location.reload();
}
function handleInputKeyPress(event) {
if (event.key === “Enter”) {
updateURLParams();
}
}
window.addEventListener(“DOMContentLoaded”, () => {
const params = new URLSearchParams(window.location.search);
const field1Value = params.get(“type”);
const field2Value = params.get(“sort”);
const field3Value = params.get(“keyword”);
if (field1Value) {
document.getElementById(“field1”).value = field1Value;
}
if (field2Value) {
document.getElementById(“field2”).value = field2Value;
}
if (field3Value) {
document.getElementById(“field3”).value = field3Value;
}
});
</script>
Then after the page is refreshed:
function getURLParameters() {
$parameters = array();
if (isset($_GET[‘sort’]) && ($_GET[‘sort’] === ‘date_desc’ || $_GET[‘sort’] === ‘date_asc’)) {
$parameters[‘sort’] = $_GET[‘sort’];
} else {
$parameters[‘sort’] = ‘date_desc’;
}
$validTypes = array(‘type1’, ‘type2’, ‘type3’);
if (isset($_GET[‘type’]) && in_array($_GET[‘type’], $validTypes)) {
$parameters[‘type’] = $_GET[‘type’];
}
if (isset($_GET[‘keyword’])) {
$parameters[‘keyword’] = sanitize_text_field($_GET[‘keyword’]);
}
return $parameters;
}
add_action(‘elementor/query/custom_filter’, function($query) {
$urlParameters = getURLParameters();
$args = array(
‘post_type’ => ‘custom-type’,
);
$validTypes = array(‘type1’, ‘type2’, ‘type3’);
if (isset($urlParameters[‘type’]) && in_array($urlParameters[‘type’], $validTypes)) {
$args[‘tax_query’] = array(
array(
‘taxonomy’ => ‘type_list’,
‘field’ => ‘slug’,
‘terms’ => $urlParameters[‘type’],
),
);
}
if (isset($urlParameters[‘keyword’]) && !empty($urlParameters[‘keyword’])) {
$args[‘s’] = $urlParameters[‘keyword’];
}
if (isset($urlParameters[‘sort’]) && ($urlParameters[‘sort’] === ‘date_desc’ || $urlParameters[‘sort’] === ‘date_asc’)) {
if ($urlParameters[‘sort’] === ‘date_asc’) {
$args[‘order’] = ‘ASC’;
} else {
$args[‘order’] = ‘DESC’;
}
$args[‘orderby’] = ‘date’;
}
$query->query($args);
});
This code fails to run with the error from the title.
What can I do to prevent the error?
Is it safe to bypass the error in this case?
[1]:
[ad_2]