Отображение всех категорий на одной странице(WordPress)

Что нужно написать в functions.php и в мои шаблоны, чтобы при клике на одну
из категорий выходили посты(записи), которые относятся к данной категории.

Мой шаблон всех категорий (categories.php)⠀⠀
При клике(на текст) на любую из категорий
должен появляться шаблон blocks.php
с записями из категории на которую кликнули.

Ссылка на готовый результат(Codepen):
https://codepen.io/Viperx/pen/VwypmrR
Шаблон (categories.php):⠀
⠀⠀⠀
ul{
list-style:none;
margin:0;
padding:0;
border:1px solid black;
text-align:center;
display:grid;
grid-template-columns: repeat(4, 23.5%);
gap:2vw;
}

ul a{
text-decoration:none;
color:red;
}

.category_img{
width:100%;
height:10vw;
}

.category_Block{
display: inline-block;
padding:15px;
font-size:20px;
}
⠀⠀⠀
<ul class ="main_category">

<li class ="category_Block">
<a class ="category_Link" href="">ДОМА</a>
<img class="category_img" src="https://i.ibb.co/r0pDp7p/102-b.jpg">
</li>

<li class ="category_Block">
<a class ="category_Link" href="">ОДЕЖДА</a>
<img class="category_img" src="https://i.ibb.co/bRrmLPd/image.jpg">
</li>

<li class ="category_Block">
<a class ="category_Link" href="">ЕДА</a>
<img class="category_img" src="https://i.ibb.co/jy6Mzcp/d5d11c91b095686fcaa0f14cf8bbb7fa-600x450-large.jpg">
</li>

<li class ="category_Block">
<a class ="category_Link" href="">КРАСКИ</a>
<img class="category_img" src="https://i.ibb.co/6mtbQSt/vidy-i-tipy-krasok-dlya-risovaniya-foto-1-870x400.jpg">
</li>

</ul>
⠀⠀⠀⠀⠀⠀
Мой шаблон (blocks.php), где будут выводиться
все посты (title и thumbnail) ⠀⠀⠀
При клике на блок нас будет переправлять
к самому посту(записи) с контентом

Ссылка на готовый результат(Codepen):
https://codepen.io/Viperx/pen/qBprqpJ
Шаблон (blocks.php): ⠀⠀
⠀⠀⠀
.Blocks{
display:grid;
grid-template-columns: repeat(5, 18%);
gap:2vw;
}

.one{
display:grid;
grid-template-columns: repeat(1, 100%);
background:gray;
position:relative;
}

.preview{
width:100%;
}

.post_Link{
position:absolute;
width:100%;
height:100%;
}

.title{
text-align:center;
font-size:16px;
padding:5px;
font-family:arial;
text-transform: uppercase;
}

a:hover{
border:2px solid red;
}
⠀⠀⠀
<div class="Blocks">

<div class="one">
<a class ="post_Link" href=""></a>
<div class="title"> 1 пост </div>

<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a>
<div class="title"> 2 пост </div>

<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a>
<div class="title"> 3 пост </div>

<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a>
<div class="title"> 4 пост </div>

<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a>
<div class="title"> 5 пост </div>
<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

</div>
⠀⠀⠀
Искала инфу в инете, но ничего не нашла.
В голову пришла крайне костыльная идея:
Это создать 4 страницы в админке WordPress
и установить им 4 разных шаблона с одинаковым html
и уже в этих шаблонах писать цикл меняя значение
'category' в $myposts = get_posts([

Но я так не хочу, так как чувствую что это неправильно.
Ведь у нас получается 4 страницы, 4 шаблона и 4 цикла
с разными значениями 'category' в $myposts = get_posts([

А что если категорий будет 50? ⠀⠀⠀⠀⠀
Это придется создавать 50 страниц в админке
WordPress, 50 шаблонов и циклов =(