ggpromarket_wordpress/catalog.php

<?php
/*
 * Template Name: Каталог
 * */
 get_header();
?>
<h1 class = "header-title">Магазин готовых шаблонов</h1>
</div>
</header>
<main>
    <div class = "wrapper wrapper-flex-catalog">
        <aside>
            <form class="form-sidebar" method = "POST">
                <fieldset class = "value">
                    <legend>Стоимость:</legend>
                    <div class = "range-div">
                        <input class = "range"  name = "cost" type = "range" min = "0" max = "15000" id = "range" value = "8700" step = "1" oninput="change()"><br> <!--TO DO привязать к полям max min-->
                    </div>
                    <div class = "cost-label">
                        <label class = "first-label">
                            <input type = "number" name = "min-value-range" id = "min-range" value = "0">
                            <span>ОТ:</span>
                        </label>
                        <label class = "second-label">
                            <input type = "number" name = "max-value-range" id = "max-range" max = "15000" value = "8700" oninput="changeMax()">
                            <span>ДО:</span>
                        </label>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class = "title-grid">Сетка:</legend>
                    <label class = "radio">
                        <input class = "radio" type = "radio" name = "grid" value = "adaptive" checked>
                        <span class = "radio__text">Адаптивная</span>
                    </label>
                    <label class = "radio">
                        <input class = "radio" type = "radio" name = "grid" value = "fixed">
                        <span class = "radio__text">Фиксированная</span>
                    </label>
                    <label class = "radio">
                        <input class = "radio" type = "radio" name = "grid" value = "flex" disabled>
                        <span class = "radio__text">Резиновая</span>
                    </label>
                </fieldset>
                <fieldset>
                    <legend>Особенности:</legend>
                    <label class = "checkbox">
                        <input class = "checkbox" type = "checkbox" name = "feature" value = "slider">
                        <span class="checkbox__text">Слайдер<br></span>
                    </label>
                    <label class = "checkbox">
                        <input class = "checkbox" type = "checkbox" name = "feature" value = "block-of-features">
                        <span class="checkbox__text">Блок преимуществ<br></span>
                    </label>
                    <label class = "checkbox">
                        <input class = "checkbox" type = "checkbox" name = "feature" value = "news">
                        <span class="checkbox__text">Новости<br></span>
                    </label>
                    <label class = "checkbox">
                        <input class = "checkbox" type = "checkbox" name = "feature" value = "gallery">
                        <span class="checkbox__text">Галерея<br></span>
                    </label>
                    <label class = "checkbox">
                        <input class = "checkbox" type = "checkbox" name = "feature" value = "basket" disabled>
                        <span class="checkbox__text">Корзина<br></span>
                    </label>
                </fieldset>
                <input class = "button form-button" type = "submit" value = "Показать">
            </form>
        </aside>
        <div class="wrapper-flex-template-catalog">
            <div class = "flex-template">
                <section class = "ready-template">
                    <h1 class = "visually-hidden">Готовые шаблоны</h1>
                    <div class = "sorting">
                        <h2>Сортировать:</h2>
                        <ul class = "sorting-by">
                            <li class = "sorting-by-elements active-sort"><a>По цене</a></li>
                            <li class = "sorting-by-elements"><a href = "#">По типу</a></li>
                            <li class = "sorting-by-elements"><a href = "#">По названию</a></li>
                            <li><a class = "sort-down active-sort-order"></a></li>
                            <li><a class = "sort-up"  href = "#"></a></li>
                        </ul>
                    </div>
                    <div class = "template">
                        <ul class = "template-list">
                            <?php
                            $current_page = get_query_var('paged') ? get_query_var('paged') : 1;

                            $posts = new WP_Query([
                                'post_type'        => 'catalog',
                                'posts_per_page'   => 4,
                                'paged'            => $current_page,
                                'suppress_filters' => true,
                            ]);

                            if($posts->have_posts()) : while($posts->have_posts()): $posts->the_post();
                                    ?>
                                    <li class="template-item">
                                        <span class = "buttons-template">
                                            <i></i>
                                        </span>
                                        <?php
                                        the_post_thumbnail();
                                        ?>
                                        <div class = "template-describe">
                                            <div class = "template-discribe-wrapper">
                                                <h3>
                                                    <?php the_title(); ?>
                                                </h3>
                                                <span> <?php  the_excerpt();  ?> </span>
                                                <a class = "button button-red button-buy-template"
                                                   href="<?php the_permalink(); ?>"
                                                >
                                                    Посмотреть
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                <?php
                              endwhile;
                            endif;


                            // Сброс данных до нормального состояния
                            wp_reset_postdata();

                            echo "<div class='breadcrumbs'>" . paginate_links(array(
                                    'total'     => $posts->max_num_pages,
                                    'current'   => max( 1, get_query_var( 'paged' ) ),
                                    'prev_next' => false,
                                    'type'      => 'list'
                                )) . "</div>";
                            ?>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </div>
</main>
<?php
get_footer();
?>