0

I embedded some code to generate post filters referencing an article at https://premium.wpmudev.org/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>

  • selected() by default echoes the output and in your selected() calls, the third parameter should be false. E.g. selected( $_GET['orderby'], $value, false ) – Sally CJ Jul 8 at 2:02
  • passing the false parameter resulted in the blank page. Something I noticed is the code inspection screen returns the following message just after <select name='orderby'>: Notice: Undefined index: orderby in /Applications/MAMP/htdocs/test/wp-content/themes/wwwares/front-page.php on line 17 – Fizzler Jul 8 at 2:25
  • In that case, in addition to what I've said in my previous comment, use something like $_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 $orderby in the selected() call. – Sally CJ Jul 8 at 2:33
  • I tried assigning the conditional check to $orderby variable in the selected() call. The page was still blank and this time all the code inside <body> was wiped out...?? – Fizzler Jul 8 at 2:49
  • 1
    It turned out the problem was twofold. The blank page issue was resolved once the Your Homepage Displays setting was reset to the latest posts whereas the post filter began working once $orderby was set as the orderby parameter in the argument declaration of WP_Query as pointed out by @SallyCJ. I posted the code for the filter in the answer section. – Fizzler Jul 9 at 7:22
1

It 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>
  • Yes and more specifically, the front page template will not be used if a registered WordPress query var (e.g. orderby) presents in the request URL. Instead, the home.php or index.php template will be used by default. But even if that's the case, the page (e.g. example.com/?orderby=title) shouldn't be blank, unless your theme doesn't have the home/index template or that it contains/causes errors. Also, the third parameter for the selected() should be false in your context. – Sally CJ Jul 10 at 1:10
0

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.

  • Sorry, I did not insert enough blank spaces when submitting the question. I edited the code and now it's showing the code including the closing tags. Turning on the Debug Mode results in the same blank page. – Fizzler Jul 8 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.