I am trying to set up a Wordpress portfolio page with multiple checkbox filtering options. The js-code and some HTML is from MixItUp (http://codepen.io/patrickkunka/pen/iwcap).
<div class="row">
<!-- Filter categories -->
<div class="col-md-4">
<form class="controls" id="Filters">
<?php
$count1 = 0;
// all products of category with sortable
function enc8($c){ return utf8_encode($c); }
$terms1 = get_terms( product_group );
$count1 = count($terms1);
echo '<fieldset>';
if ( $count1 > 0 ){
foreach ( $terms1 as $term1 ) {
$termname1 = strtolower($term1->name);
$termname1 = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' & ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$termname1);
echo '<div class="checkbox"><input type="checkbox" value=".'.$termname1.'"/><label> '.$term1->name.'</label></div>';
}
}
echo '</fieldset>';
?>
<a class="btn btn-small btn-default" id="Reset">Reset</a>
</form>
</div>
<div class="col-md-4">
<form class="controls" id="Filters">
<?php
$count2 = 0;
// all products of category with sortable
function enc8($c){ return utf8_encode($c); }
$terms2 = get_terms( product_category );
$count2 = count($terms2);
echo '<fieldset>';
if ( $count2 > 0 ){
foreach ( $terms2 as $term2 ) {
$termname2 = strtolower($term2->name);
$termname2 = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' & ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$termname2);
echo '<div class="checkbox"><input type="checkbox" value=".'.$termname2.'"/><label> '.$term2->name.'</label></div>';
}
}
echo '</fieldset>';
?>
<a class="btn btn-small btn-default" id="Reset">Reset</a>
</form>
</div>
The first taxonomy filter (product_group) works just fine. However, when I add the second one (product_category) the page partly crashes and Chrome returns the following error message: Failed to load resource: the server responded with a status of 500 (Internal Server Error).
The HTML output looks like this:
<div class="col-md-4">
<form class="controls" id="Filters">
<fieldset>
<div class="checkbox">
<input type="checkbox" value=".class01"><label> Class01</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".class02"><label> Class02</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".class03"><label> Class03</label>
</div>
</fieldset>
<a class="btn btn-small btn-default" id="Reset">Reset</a>
</form>
</div>
<div class="col-md-4">
<form class="controls" id="Filters">
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Page Caching using disk: enhanced (User is logged in)
Served from: mydomain.org @ 2016-02-21 17:03:37 by W3 Total Cache -->
</form>
</div>
Does anyone have an idea what the problem is?
Finally, I figured it out. The problem was that the following function
function enc8($c){ return utf8_encode($c); }
was twice in the code. Combining the two filters to a single function and a bit of renaming some variables was the solution:
<form class="controls" id="Filters">
<?php
$countgroups = 0;
$countcats = 0;
function enc8($c){ return utf8_encode($c); }
$groups = get_terms( product_group );
$countgroups = count($groups);
$cats = get_terms( product_category );
$countcats = count($cats);
echo '<fieldset class="groups"><h4>Produktgruppen</h4>';
if ( $countgroups > 0 ){
foreach ( $groups as $group ) {
$groupname = strtolower($group->name);
$groupname = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' & ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$groupname);
echo '<div class="checkbox"><input type="checkbox" value=".'.$groupname.'"/><label>'.$group->name.'</label></div>';
}
}
echo '</fieldset>';
echo '<fieldset class="cats"><h4>Produktkategorien</h4>';
if ( $countcats > 0 ){
foreach ( $cats as $cat ) {
$catname = strtolower($cat->name);
$catname = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' & ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$catname);
echo '<div class="checkbox"><input type="checkbox" value=".'.$catname.'"/><label>'.$cat->name.'</label></div>';
}
}
echo '</fieldset>';
?>
<a class="btn btn-small btn-default" id="Reset">Reset</a>
</form>
Works like a charm now :)