CowDev
12/8/2017 - 10:27 AM
WordPress content filter
Pieces of code to show posts and a filter
/** Filter **/
.filter {
width: 101%;
background: white;
height: 0;
padding-top: 120%;
margin-top: 166%;
position: relative;
margin-left: -10px;
}
.filter .row {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
bottom: 20px;
}
.filter-item {
position: relative;
}
.filter-title {
color: #006e96;
font-size: 13px;
}
.filter-menu {
background: white;
border: 1px solid #006e96;
padding: 10px;
margin-bottom: 20px;
}
.filter-default {
display: block;
cursor: pointer;
font-size: 12px;
}
.filter-default:after {
content: '\25BE';
float: right;
}
.filter__foldout {
display: none;
position: absolute;
top: 98%;
left: 0;
right: 0;
background: white;
margin: 0;
padding: 10px;
list-style: none;
border: 1px solid #006e96;
border-top: 0 none;
}
.filter__foldout.active {
display: block;
z-index: 10;
}
.filter__foldout li {
margin: 0 0 5px;
padding: 0 0 5px;
border-bottom: 1px solid #006e96;
display: block;
font-size: 12px;
cursor: pointer;
}
.filter__foldout li.active {
background: #ee8d30;
font-style: italic;
}
@media screen and (max-width: 982px) and (min-width: 787px) {
.filter {
padding-top: 150%;
margin-top: 141%;
margin-left: 0;
}
}
@media screen and (max-width: 786px) {
.filter {
margin-top: 0;
padding: 20px;
height: auto;
}
.filter .row {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}jQuery(document).ready(function(){
filterOverview();
});
function filterOverview() {
var timer;
jQuery( '.filter__foldout li' ).on( 'click', function(){
clearTimeout( timer );
jQuery(this).parent().find('li').not( jQuery(this) ).removeClass('active');
jQuery(this).not('.clear-all').toggleClass('active');
timer = setTimeout( function(){
reloadPage();
}, 500 );
setActive();
});
setActive();
jQuery( '.filter-default' ).on('click', function(){
jQuery( '.filter__foldout' ).not( jQuery(this).next() ).removeClass('active');
jQuery(this).next().toggleClass('active');
});
}
function reloadPage() {
var values = {};
jQuery('.filter-item').each(function(){
$filter = jQuery(this);
values[ $filter.attr('data-filter') ] = [];
jQuery(this).find('li.active').each(function(){
values[ $filter.attr('data-filter') ].push( jQuery(this).attr('data-value') );
});
});
var url = document.URL.split("?")[0] + '?';
jQuery.each( values, function( key, value ){
if( value[0] != null){
url += key + '=';
jQuery.each( value, function( key, value ){
url += value + ','
} );
url = url.slice( 0, -1 );
url += '&';
}
});
url = url.slice( 0, -1 );
window.location.replace( url );
}
function setActive(){
jQuery('.filter-item').each(function(){
$this = jQuery(this);
if( $this.find('li.active').length > 0 ){
$this.find('.filter-default').text( jQuery('li.active', $this ).text() );
} else {
$this.find('.filter-default').text( 'Maak een keuze' );
}
});
}<?php
function bvdb_aanbod() {
// array of filters (field key => field name)
$GLOBALS['my_query_filters'] = array(
'oppervlakte' => null,
'verkoopprijs' => null,
'type' => null
);
// set up variable
$meta_query = [];
$tax_query = [];
// loop over filters
foreach( $GLOBALS['my_query_filters'] as $key => $name ) {
// continue if not found in url
if( empty($_GET[ $key ]) ) {
continue;
}
// get the value for this filter
$value = explode(',', $_GET[ $key ]);
if( $key == 'oppervlakte' || $key == 'verkoopprijs' ){
// append meta query
$meta_query[] = array(
'key' => $key,
'value' => $value,
'compare' => 'BETWEEN',
'type' => 'numeric'
);
} else {
// append meta query
$tax_query[] = array(
'taxonomy' => $key,
'terms' => $value,
'operator' => 'IN',
'field' => 'slug',
);
}
}
$args = array(
'post_type' => 'post',
'orderby' => 'title',
'order' => 'ASC',
'category_name' => 'woningaanbod',
'posts_per_page'=> -1
);
$taxes = array(
'relation' => 'AND'
);
if( count( $tax_query ) > 0 ){
foreach( $tax_query as $query ){
$taxes[] = $query;
}
$args[ 'tax_query' ] = $taxes;
}
$meta = array(
'relation' => 'AND'
);
if( count( $meta_query ) > 0 ){
foreach( $meta_query as $query ){
$meta[] = $query;
}
$args[ 'meta_query' ] = $meta;
}
$aanbod = new WP_Query( $args );
ob_start(); ?>
<div class="archive-page full-width">
<?php if( $aanbod->have_posts() ): ?>
<div class="post-wrapper blog-masonry">
<?php $rowcount = 0; ?>
<?php while( $aanbod->have_posts() ): $aanbod->the_post(); $rowcount++; ?>
<section <?php post_class( 'post-loop' ); ?>>
<header class="entry-header">
<h2 class="loop-entry entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
<div class="post-thumbnail wrap">
<a href="<?php the_permalink(); ?>">
<?php if( has_post_thumbnail() ) the_post_thumbnail('medium_large'); ?>
</a>
</div>
<div class="entry-content">
<?php if( get_field('oppervlakte', $aanbod->ID ) ){ ?><p><span class="aanbod-data"><span class="aanbod-label">Oppervlakte: </span><span class="aanbod-content"><?php echo get_field('oppervlakte', $aanbod->ID ); ?> m<sup>2</span></span><br /><?php } ?>
<?php if( get_field('verkoopprijs', $aanbod->ID ) ){ ?><span class="aanbod-data"><span class="aanbod-label">Verkoopprijs: </span><span class="aanbod-content">€ <?php echo number_format( get_field('verkoopprijs', $aanbod->ID ), 0, '.', '.'); ?>,-</span></span><br /><?php } ?>
<?php if( $terms = get_the_terms( $aanbod->ID, 'post_tag' ) ){ ?><span class="aanbod-data"><span class="aanbod-label">Woningtype: </span><span class="aanbod-content"><?php $counter = 0; foreach( $terms as $term ){
if( $counter > 0 ){
echo ', ';
}
echo $term->name;
$counter++;
} ?></span></span>
<?php } ?></p>
</div>
</section>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>
</div>
<?php return ob_get_clean();
}
add_shortcode( 'woningaanbod', 'bvdb_aanbod' );
function bvdb_filter() {
ob_start(); ?>
<div class="filter bvdb-filter">
<div class="row">
<h3>Woningfilter</h3>
<div class="filter-item span8" data-filter="oppervlakte">
<span class="filter-title">Oppervlakte</span>
<div class="filter-menu">
<span class="filter-default">Maak een keuze</span>
<ul class="filter__foldout">
<li class="clear-all">Geen keuze</li>
<li data-value="45,65" <?php echo ( isset( $_GET['oppervlakte'] ) && strpos( $_GET['oppervlakte'], '45,65' ) !== false?'class="active"':"") ?>>45 tot 65 m<sup>2</sup></li>
<li data-value="66,100" <?php echo ( isset( $_GET['oppervlakte'] ) && strpos( $_GET['oppervlakte'], '66,100' ) !== false?'class="active"':"") ?>>66 tot 100 m<sup>2</sup></li>
<li data-value="101,150" <?php echo ( isset( $_GET['oppervlakte'] ) && strpos( $_GET['oppervlakte'], '101,150' ) !== false?'class="active"':"") ?>>101 tot 150 m<sup>2</sup></li>
<li data-value="151,200" <?php echo ( isset( $_GET['oppervlakte'] ) && strpos( $_GET['oppervlakte'], '151,200' ) !== false?'class="active"':"") ?>>151 tot 200 m<sup>2</sup></li>
<li data-value="201,255" <?php echo ( isset( $_GET['oppervlakte'] ) && strpos( $_GET['oppervlakte'], '201,255' ) !== false?'class="active"':"") ?>>201 tot 255 m<sup>2</sup></li>
</ul>
</div>
</div>
<div class="filter-item span6" data-filter="verkoopprijs">
<span class="filter-title">Verkoopprijs</span>
<div class="filter-menu">
<span class="filter-default">Maak een keuze</span>
<ul class="filter__foldout">
<li class="clear-all">Geen keuze</li>
<li data-value="0,250000" <?php echo ( isset( $_GET['verkoopprijs'] ) && strpos( $_GET['verkoopprijs'], '0,25000' ) !== false?'class="active"':"") ?>>tot € 250.000</li>
<li data-value="250000,300000" <?php echo ( isset( $_GET['verkoopprijs'] ) && strpos( $_GET['verkoopprijs'], '250000,300000' ) !== false?'class="active"':"") ?>>€ 250.000 - € 300.000</li>
<li data-value="300000,350000" <?php echo ( isset( $_GET['verkoopprijs'] ) && strpos( $_GET['verkoopprijs'], '300000,350000' ) !== false?'class="active"':"") ?>>€ 300.000 - € 350.000</li>
<li data-value="350000,450000" <?php echo ( isset( $_GET['verkoopprijs'] ) && strpos( $_GET['verkoopprijs'], '350000,450000' ) !== false?'class="active"':"") ?>>€ 350.000 - € 450.000</li>
<li data-value="450000,9999999" <?php echo ( isset( $_GET['verkoopprijs'] ) && strpos( $_GET['verkoopprijs'], '450000,9999999' ) !== false?'class="active"':"") ?>>€ 450.000 en meer</li>
</ul>
</div>
</div>
<div class="filter-item span8" data-filter="status">
<span class="filter-title">Status</span>
<div class="filter-menu">
<span class="filter-default">Maak een keuze</span>
<ul class="filter__foldout">
<li class="clear-all">Geen keuze</li>
<?php foreach( get_terms( array( 'taxonomy' => 'post_tag', 'hide_empty' => true ) ) as $term ):
$curTerm = ( isset( $_GET[ 'status' ] )? explode( ',', $_GET[ 'status' ] ) : array() ); ?>
<li class="filter__foldout__term <?php echo (in_array( $term->slug, $curTerm )?"active":""); ?>" data-value="<?php echo $term->slug ?>">
<?php echo $term->name ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
<?php return ob_get_clean();
}
add_shortcode( 'woningfilter', 'bvdb_filter' );