Filter in Category Archive with Custom Fields

My need is to create a category filter in the archive.php wordpress file, to filter recipes on that page, or combine them with other category or ingredients on a recipes blog.
I access on the archive.php page, clicking on a ingredient in a recipes and the url of that page is
home_url/recipe-with/ingredient/
Now on that page I’ve added this code from ACF tutorials

<div id=”archive-filters”>
<?php foreach( $GLOBALS[‘my_query_filters’] as $key => $name ):

// get the field’s settings without attempting to load a value
$field = get_field_object($key, false, false);

// set value if available
if( isset($_GET[ $name ]) ) {

$field[‘value’] = explode(‘,’, $_GET[ $name ]);

}

// create filter
?>
<div class=”filter” data-filter=”<?php echo $name; ?>”>
<?php create_field( $field ); ?>
</div>

<?php endforeach; ?>
</div>

<script type=”text/javascript”>
(function($) {

// change
$(‘#archive-filters’).on(‘change’, ‘input[type=”checkbox”]’, function(){

// vars
var url = ‘<?php echo home_url(‘property’); ?>’;
args = {};

// loop over filters
$(‘#archive-filters .filter’).each(function(){

// vars
var filter = $(this).data(‘filter’),
vals = [];

// find checked inputs
$(this).find(‘input:checked’).each(function(){

vals.push( $(this).val() );

});

// append to args
args[ filter ] = vals.join(‘,’);

});

// update url
url += ‘?’;

// loop over args
$.each(args, function( name, value ){

url += name + ‘=’ + value + ‘&’;

});

// remove last &
url = url.slice(0, -1);

// reload page
window.location.replace( url );

});

})(jQuery);
</script>

and in the child functions.php I’ve added that code

// array of filters (field key => field name)
$GLOBALS[‘my_query_filters’] = array(
‘recipe_category’ => ‘Recipes’,
);

// action
add_action(‘pre_get_posts’, ‘my_pre_get_posts’, 10, 1);

function my_pre_get_posts( $query ) {

// bail early if is in admin
if( is_admin() ) return;

// bail early if not main query
// – allows custom code / plugins to continue working
if( !$query->is_main_query() ) return;

// get meta query
$meta_query = $query->get(‘meta_query’);

// loop over filters
foreach( $GLOBALS[‘my_query_filters’] as $key => $name ) {

// continue if not found in url
if( empty($_GET[ $name ]) ) {

continue;

}

// get the value for this filter
// eg: http://www.website.com/events?city=melbourne,sydney
$value = explode(‘,’, $_GET[ $name ]);

// append meta query
$meta_query = array(
‘key’ => $name,
‘value’ => $value,
‘compare’ => ‘IN’,
);

}

// update meta query
$query->set(‘meta_query’, $meta_query);

This generates that url when I go to check some category

https://www.blogurl.com/property?Recipes=84,107

and the page is a not found one without possibility to go back to the previous.
Then another problem is that if I add a sub_fields of a custom field in the function.php I can’t show it, in particula I need to show ingredient_name (Text) from ingredients (Repeater). I tryed ingredients_ingredient_name but it doesn’t work. If Text type is not good, I’ve also under reapeater the ingredient_obj (taxonomy) that can be useful in the url, but I will need to show ingredients name in the filter.
In the end I’d like also that the no result page, allow to deselect the filter that bring to the no result, and come back to the previous results. Or if this is not possible, come back simply with browser. This now don’t work.

Theese Are the Custom Fields:
Recipes Category

{
“key”: “field_5752b4d33d004”,
“label”: “Recipe Category”,
“name”: “recipe_category”,
“type”: “taxonomy”,
“instructions”: “”,
“required”: 0,
“conditional_logic”: 0,
“wrapper”: {
“width”: “33%”,
“class”: “”,
“id”: “”
},
“taxonomy”: “category”,
“field_type”: “checkbox”,
“allow_null”: 0,
“add_term”: 1,
“save_terms”: 1,
“load_terms”: 1,
“return_format”: “id”,
“multiple”: 0
},

Ingredients Parent with OBJ and Name subfields

{
“key”: “field_5585b695453f5”,
“label”: “Ingredients”,
“name”: “ingredients”,
“type”: “repeater”,
“instructions”: “”,
“required”: 0,
“conditional_logic”: 0,
“wrapper”: {
“width”: “”,
“class”: “”,
“id”: “”
},
“collapsed”: “field_5620350d903a1”,
“min”: 0,
“max”: 0,
“layout”: “table”,
“button_label”: “Add Ingredient”,
“sub_fields”: [
{
“key”: “field_5620350d903a1”,
“label”: “Ingredient”,
“name”: “ingredient_obj”,
“type”: “taxonomy”,
“instructions”: “”,
“required”: 0,
“conditional_logic”: [
[
{
“field”: “field_56206d699ae9c”,
“operator”: “==”,
“value”: “1”
},
{
“field”: “field_5588b2c5b4dc5”,
“operator”: “!=”,
“value”: “1”
}
]
],
“wrapper”: {
“width”: 20,
“class”: “”,
“id”: “”
},
“taxonomy”: “recipe_ingredient”,
“field_type”: “select”,
“allow_null”: 0,
“add_term”: 1,
“save_terms”: 1,
“load_terms”: 0,
“return_format”: “object”,
“multiple”: 0
},
{
“key”: “field_5585317d9b50b”,
“label”: “Name”,
“name”: “ingredient_name”,
“type”: “text”,
“instructions”: “”,
“required”: 0,
“conditional_logic”: [
[
{
“field”: “field_56206d699ae9c”,
“operator”: “!=”,
“value”: “1”
}
],
[
{
“field”: “field_5588b2c5b4dc5”,
“operator”: “==”,
“value”: “1”
}
]
],
“wrapper”: {
“width”: 20,
“class”: “”,
“id”: “”
},
“default_value”: “”,
“placeholder”: “”,
“prepend”: “”,
“append”: “”,
“maxlength”: “”,
“readonly”: 0,
“disabled”: 0
},

So my needs are:

Generate a correct URL from this script to embed 2 or more custom fields.
Add sub_fields to that filter
Way to come back from No result page

Read more here:: Filter in Category Archive with Custom Fields

Leave a Reply

Your email address will not be published. Required fields are marked *