I embedded some code to generate post filters referencing an article at / as displayed below:
<form class='post-filters'>
<select name="orderby">
<?php
$orderby_options = array(
'post_date' => 'Order By Date',
'post_title' => 'Order By Title',
'rand' => 'Random Order',
);
foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $_GET['orderby'], $value )."
value='$value'>$label</option>";
}
?>
</select>
<select name="order">
<?php
$order_options = array(
'DESC' => 'Descending',
'ASC' => 'Ascending',
);
foreach( $order_options as $value => $label ) {
echo "<option ".selected( $_GET['order'], $value )."
value='$value'>$label</option>";
}
?>
</select>
<input type='submit' value='Filter!'>
</form>
Consequently, the page the same code is embedded only returns a blank page showing no code in the source view. I also used Search & Filter plugin only to get the same blank page.
I cannot resolve this issue alone. Please someone help me correct the code.
After editing front-page.php based on the comments given:
<?php echo get_template_part('head') ?>
<body <?php body_class(); ?>>
<?php get_header(); ?>
<main>
<div id="main">
<div class="outer">
<ul class="breadcrumb"><?php breadcrumb() ?></ul>
<form class="post-filters"><select name="orderby"><?php
$orderby_options = array(
'post_date' => 'Order By Date',
'title' => 'Order By Title',
'rand' => 'Random Order'
);
$orderby = isset( $_GET['orderby'] ) ? sanitize_text_field( $_GET['orderby'] ) : 'default value';
foreach($orderby_options as $value => $label):
echo '<option '.selected($orderby, $value, false).' value="'.$value.'">'.$label.'</option>';
endforeach;
?>
<input type="submit" value="Filter">
</form>
<div class="inner">
<?php
$filter = array('parent' => 0, 'hide_empty' => 0, 'exclude' => (5));
$categories = get_categories($filter);
shuffle($categories);
if($categories):
foreach($categories as $category):
$catName = $category->cat_name;
$catFilter = array(
'category_name' => $catName
);
echo '<div class="section"><section><h2 data-aos="fade-up">'.$catName.'</h2>'.category_description(get_cat_ID($catName)).'<div class="wrapper">';
$catquery = new WP_Query($catFilter);
if($catquery->have_posts()):
while($catquery->have_posts()): $catquery->the_post();
if(has_post_thumbnail()){
echo '<div class="item" data-aos="fade-down"><a href="'.get_the_permalink().'"><h3>'.get_the_post_thumbnail().'<span class="date">'.get_the_date().'</span></h3>'.'<dl><dt>'.get_the_title().'</dt><dd>'.get_the_content().'</dd></dl></a></div>';
}else{
echo '<div class="item" data-aos="fade-down"><a href="'.get_the_permalink().'"><h3>No Image Available<span class="date">'.get_the_date().'</span></h3>'.'<dl><dt>'.get_the_title().'</dt><dd>'.get_the_content().'</dd></dl></a></div>';
}
endwhile;
endif;
echo '</div></section></div>';
wp_reset_postdata();
endforeach;
endif;
?>
</div>
<div class="banner-ads" data-aos="fade-down"><section><?php the_ad_group(12); ?></section></div>
<?php
$catObj = get_category_by_slug('news');
$catName = $catObj->name;
echo '<div class="inner" id="'.$catName.'"><div class="wrapper"><h2 data-aos="fade-up">'.$catName.'</h2>';
$catquery = new WP_Query('category_name="news"');
if($catquery->have_posts()):
while($catquery->have_posts()): $catquery->the_post();
if(has_post_thumbnail()){
echo '<dl data-aos="fade-right"><dt style="background: url('.get_the_post_thumbnail_url().')"></dt>';
}else{
echo '<dl data-aos="fade-right"><dt><span>No Image Available</span></dt>';
}
echo '<dd>'.'<span class="date">'.get_the_date().'</span><br class="sp">';
$tags = get_the_tags();
foreach($tags as $tag){
$tagName = $tag->name;
echo '<span class="tag">'.$tagName.'</span>';
}
echo get_the_content().'</dd></dl>';
endwhile;
endif;
echo '</div></div>';
?>
</div>
</div>
</main>
<?php get_footer(); ?>
</body>
I embedded some code to generate post filters referencing an article at https://premium.wpmudev/blog/add-post-filters/ as displayed below:
<form class='post-filters'>
<select name="orderby">
<?php
$orderby_options = array(
'post_date' => 'Order By Date',
'post_title' => 'Order By Title',
'rand' => 'Random Order',
);
foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $_GET['orderby'], $value )."
value='$value'>$label</option>";
}
?>
</select>
<select name="order">
<?php
$order_options = array(
'DESC' => 'Descending',
'ASC' => 'Ascending',
);
foreach( $order_options as $value => $label ) {
echo "<option ".selected( $_GET['order'], $value )."
value='$value'>$label</option>";
}
?>
</select>
<input type='submit' value='Filter!'>
</form>
Consequently, the page the same code is embedded only returns a blank page showing no code in the source view. I also used Search & Filter plugin only to get the same blank page.
I cannot resolve this issue alone. Please someone help me correct the code.
After editing front-page.php based on the comments given:
<?php echo get_template_part('head') ?>
<body <?php body_class(); ?>>
<?php get_header(); ?>
<main>
<div id="main">
<div class="outer">
<ul class="breadcrumb"><?php breadcrumb() ?></ul>
<form class="post-filters"><select name="orderby"><?php
$orderby_options = array(
'post_date' => 'Order By Date',
'title' => 'Order By Title',
'rand' => 'Random Order'
);
$orderby = isset( $_GET['orderby'] ) ? sanitize_text_field( $_GET['orderby'] ) : 'default value';
foreach($orderby_options as $value => $label):
echo '<option '.selected($orderby, $value, false).' value="'.$value.'">'.$label.'</option>';
endforeach;
?>
<input type="submit" value="Filter">
</form>
<div class="inner">
<?php
$filter = array('parent' => 0, 'hide_empty' => 0, 'exclude' => (5));
$categories = get_categories($filter);
shuffle($categories);
if($categories):
foreach($categories as $category):
$catName = $category->cat_name;
$catFilter = array(
'category_name' => $catName
);
echo '<div class="section"><section><h2 data-aos="fade-up">'.$catName.'</h2>'.category_description(get_cat_ID($catName)).'<div class="wrapper">';
$catquery = new WP_Query($catFilter);
if($catquery->have_posts()):
while($catquery->have_posts()): $catquery->the_post();
if(has_post_thumbnail()){
echo '<div class="item" data-aos="fade-down"><a href="'.get_the_permalink().'"><h3>'.get_the_post_thumbnail().'<span class="date">'.get_the_date().'</span></h3>'.'<dl><dt>'.get_the_title().'</dt><dd>'.get_the_content().'</dd></dl></a></div>';
}else{
echo '<div class="item" data-aos="fade-down"><a href="'.get_the_permalink().'"><h3>No Image Available<span class="date">'.get_the_date().'</span></h3>'.'<dl><dt>'.get_the_title().'</dt><dd>'.get_the_content().'</dd></dl></a></div>';
}
endwhile;
endif;
echo '</div></section></div>';
wp_reset_postdata();
endforeach;
endif;
?>
</div>
<div class="banner-ads" data-aos="fade-down"><section><?php the_ad_group(12); ?></section></div>
<?php
$catObj = get_category_by_slug('news');
$catName = $catObj->name;
echo '<div class="inner" id="'.$catName.'"><div class="wrapper"><h2 data-aos="fade-up">'.$catName.'</h2>';
$catquery = new WP_Query('category_name="news"');
if($catquery->have_posts()):
while($catquery->have_posts()): $catquery->the_post();
if(has_post_thumbnail()){
echo '<dl data-aos="fade-right"><dt style="background: url('.get_the_post_thumbnail_url().')"></dt>';
}else{
echo '<dl data-aos="fade-right"><dt><span>No Image Available</span></dt>';
}
echo '<dd>'.'<span class="date">'.get_the_date().'</span><br class="sp">';
$tags = get_the_tags();
foreach($tags as $tag){
$tagName = $tag->name;
echo '<span class="tag">'.$tagName.'</span>';
}
echo get_the_content().'</dd></dl>';
endwhile;
endif;
echo '</div></div>';
?>
</div>
</div>
</main>
<?php get_footer(); ?>
</body>
2 Answers
Reset to default 1It turns out the cause of this lingering filter problem was to do with the way WordPress was set up as well as the argument of WP_Query. Once I changed the Your Homepage Displays setting to the latest posts and renamed front-page.php to be index.php, the filter began working and the blank page no longer showed.
Concerning the post filter, declaring the orderby parameter as part of the argument of WP_Query got it working. The code for the filter is as follows:
<form class="post-filters">
<select name="orderby">
<?php
$orderby_options = array(
'post_date' => 'Order By Date',
'post_title' => 'Order By Title',
'rand' => 'Random Order'
);
foreach($orderby_options as $value => $label):
echo '<option '.selected($_GET['orderby'], $value, false).' value="'.$value.'">'.$label.'</option>';
endforeach;
?>
</select>
<input type="submit" value="Filter">
</form>
You are removing necessary parts of the code, you started opening form and select HTML elements, but you never close them, use the full code:
<form class='post-filters'>
<select name="orderby">
<?php
$orderby_options = array(
'post_date' => 'Order By Date',
'post_title' => 'Order By Title',
'rand' => 'Random Order',
);
foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $_GET['orderby'], $value )." value='$value'>$label</option>";
}
?>
</select>
<select name="order">
<?php
$order_options = array(
'DESC' => 'Descending',
'ASC' => 'Ascending',
);
foreach( $order_options as $value => $label ) {
echo "<option ".selected( $_GET['order'], $value )." value='$value'>$label</option>";
}
?>
</select>
<select name="thumbnail">
<?php
$order_options = array(
'all' => 'All Posts',
'only_thumbnailed' => 'Posts With Thumbnails',
);
foreach( $order_options as $value => $label ) {
echo "<option ".selected( $_GET['thumbnail'], $value )." value='$value'>$label</option>";
}
?>
</select>
<input type='submit' value='Filter!'>
</form>
Then if you want to remove things you think you don't need, you can turn on the Debug to see what is falling and why you are getting a blank page, in this case, you are getting a blank page because your code is pretty incomplete and many things should be failing.
selected()by default echoes the output and in yourselected()calls, the third parameter should befalse. E.g.selected( $_GET['orderby'], $value, false )– Sally CJ Commented Jul 8, 2019 at 2:02$_GET['orderby'] ?? 'default value'if you're on PHP 7. Or better, assign them to custom variables - e.g.$orderby = isset( $_GET['orderby'] ) ? sanitize_text_field( $_GET['orderby'] ) : 'default value';and use$orderbyin theselected()call. – Sally CJ Commented Jul 8, 2019 at 2:33