I'm setting up a filter bar to filter WordPress posts based on what the user selects.
The current code gives each post classes that reflect the criteria I'm targeting. Let's say a post has been posted in February 2019. the post will have "FEB", "2019", and its titles with "_" instead of spaces as additional classes.
When the pages loads, with parameters in the URL, all the articles disappear and it will then only show the ones with the classes that match the $_GET parameters.
Im using JS inside the code as well as echo statements.
For some reason it's not working, if someone can point me to the issue or give me a better alternative to this long code, that would be awesome.
Thanks in advance!
function filterbar(){
$current_ID =$_GET['page_id'];
echo "
<div class='filterbar containerfluid'>
<div class='row'>
<div class='col-12'>";
if (get_locale() == 'en_US') {
echo "<form action='#' method='get'>
<div class='dropdown'>
<select name='month'>
<option value='all'>By Month</option>
<option value='Jan'>January</option>
<option value='Feb'>February</option>
<option value='Mar'>March</option>
<option value='Apr'>April</option>
<option value='May'>May</option>
<option value='Jun'>June</option>
<option value='Jul'>July</option>
<option value='Aug'>August</option>
<option value='Sep'>September</option>
<option value='Oct'>October</option>
<option value='Nov'>November</option>
<option value='Dec'>December</option>
</select>
</div>
<div class='dropdown'>
<select name='year'>
<option value='all'>By Year</option>
<option value='2018'>2018</option>
<option value='2019'>2019</option>
</select>
</div>
<div class='dropdown'>
<select name='category'>
<option value='all'>All</option>
<option value='Excise Tax'>Excise Tax</option>
<option value='Corporate Income Tax'>Corporate Income Tax</option>
<option value='Withholding Tax'>Withholding Tax</option>
<option value='Tax Treaties'>Tax Treaties</option>
</select>
</div>
<input type='text' name='page_id' value=' $current_ID ' style='display: none;'>
<input type='text' name='string' value='all' placeholder='Enter keywords'>
<input type='submit' value='Filter' class='button'></input>
</form>";
} else {
echo "<form action='#' method='get'>
<div class='dropdown'>
<select name='month'>
<option value='all'>شهريا</option>
<option value='Jan'>January</option>
<option value='Feb'>February</option>
<option value='Mar'>March</option>
<option value='Apr'>April</option>
<option value='May'>May</option>
<option value='Jun'>June</option>
<option value='Jul'>July</option>
<option value='Aug'>August</option>
<option value='Sep'>September</option>
<option value='Oct'>October</option>
<option value='Nov'>November</option>
<option value='Dec'>December</option>
</select>
</div>
<div class='dropdown'>
<select name='year'>
<option value='all'>سنويا</option>
<option value='2018'>2018</option>
<option value='2019'>2019</option>
</select>
</div>
<div class='dropdown'>
<select name='category'>
<option value='all'>بالتصنيف</option>
<option value='Excise Tax'>Excise Tax</option>
<option value='Corporate Income Tax'>Corporate Income Tax</option>
<option value='Withholding Tax'>Withholding Tax</option>
<option value='Tax Treaties'>Tax Treaties</option>
</select>
</div>
<input type='text' name='page_id' value=' $current_ID ' style='display: none;'>
<input type='text' name='string' value='الكل ' placeholder='Enter keywords'>
<input type='submit' value='منقي' class='button'></input>
</form>";
}
echo "
</div>
</div>
</div>
";
if(isset($_GET['year']) || isset($_GET['month']) || isset($_GET['string']) || isset($_GET['category']) ){
if($_GET['year'] != 'all' || $_GET['month'] != 'all' || $_GET['string'] != 'all' || $_GET['category'] != 'all' ){
echo "
<script>
jQuery(document).ready(function($){
$( 'article.pressrelease' ).hide();
});
</script>
";
}
if($_GET['year'] != 'all'){
$filteryear = $_GET['year'];
echo "
<script>
jQuery(document).ready(function($){
if($( 'article.pressrelease' ).hasClass(" . $filteryear . ")){
$( 'article.pressrelease' ).show();
}
});
</script>
";
}
if($_GET['month'] != 'all'){
$filtermonth = $_GET['month'];
echo "
<script>
jQuery(document).ready(function($){
if($( 'article.pressrelease' ).hasClass(" . $filtermonth . ")){
$( 'article.pressrelease' ).show();
}
});
</script>
";
}
} } add_shortcode( 'filterbarList', 'filterbar' );
