WordPressのカスタム投稿のアーカイブページで記事をカテゴリーで絞り込みしたい

WordPressのカスタム投稿のアーカイブページで記事をカテゴリーで絞り込みできるボタンを作成したいです。
こちらのコードを参考に実装をしているのですが、urlが変わるだけで記事が絞り込みされません。

php
1//archive-blog.php
2<?php
3$event = array(
4  'post_type' => 'blog',
5  'post_status' => 'publish',
6  'order' => 'desc',
7  'orderby' => 'date',
8  'posts_per_page' => '-1',
9);
10$the_query = new WP_Query($event);
11if ($the_query->have_posts()) :
12?>
13
14<form method="get" action="">
15          <select name="orderby" id="orderby">
16            <option value="date" <?php //echo selected($_GET['orderby'], 'date'); 
17                                  ?>>
18              Newest
19            </option>
20            <option value="title" <?php //echo selected($_GET['orderby'], 'title'); 
21                                  ?>>Alpha</option>
22          </select>
23
24          <input id="order" type="hidden" name="order" value="<?php echo (isset($_GET['order']) && $_GET['order'] == 'ASC') ? 'ASC' : 'DESC'; ?>" />
25
26
27          <?php
28          $terms = get_terms([
29            'taxonomy' => 'category',
30            'hide_empty' => false
31          ]);
32          foreach ($terms as $term) : ?>
33            <label>
34              <input type="checkbox" name="category[]" value="<?php echo $term->slug ?>" />
35              <?php echo $term->name ?>
36            </label>
37          <?php endforeach ?>
38
39          <button type="submit">ボタン</button>
40        </form>
41
42        <ul>
43          <?php
44          if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
45              $meta = get_post_meta(get_the_ID());
46              $title = get_the_title();
47              $date = get_the_date('Y.m.d');
48              $image = get_the_post_thumbnail_url($post->ID);
49              $cat = get_the_category(get_the_ID());
50          ?>
51              <li>
52                <a href="#">
53                  <div>
54                    <?php if (!empty($cat)) : ?>
55                      <p class="tags"><?= $cat[0]->name ?></p>
56                    <?php endif; ?>
57                    <?php if (!empty($image)) : ?>
58                      <img src="<?= $image ?>">
59                    <?php else : ?>
60                      
61                      <img src="<?= $image ?>">
62                    <?php endif; ?>
63                  </div>
64                  <div>
65                    <div>
66                      <p><?= $title ?></p>
67                    </div>
68                    <p class="date"><?= $date ?></p>
69                  </div>
70                </a>
71              </li>
72          <?php
73            endwhile;
74          else :
75          endif;
76          ?>
77        </ul>
78

js
1const archiveOrderby = document.getElementById('orderby');
2const archiveOrder = document.getElementById('order');
3
4if (archiveOrderby && archiveOrder) {
5
6  const setOrder = () => {
7
8    const orderBy = archiveOrderby.options[archiveOrderby.selectedIndex].value;
9
10    if ('title' === orderBy) {
11      archiveOrder.value = 'ASC';
12    } else {
13      archiveOrder.value = 'DESC';
14    }
15
16  }
17
18  archiveOrderby.addEventListener('change', setOrder);
19
20  setOrder();
21}