The WP archive template for the CPT Media Coverage for Solo.io

archive-coverage.php

<?php get_header(); 

$year = get_query_var('year');

$posts_args = array(
    'post_type'      => 'coverage',
    'posts_per_page' => -1, // Show all posts
    'orderby' => 'date',
    'order' => 'DESC',
    'date_query' => array(
        array(
            'year'  => $year,
        ),
    ),
    'post_status'    => 'publish'

);


$news_query = new WP_Query($posts_args);

?>
<main>

    <div class="hero image-right">
        <div class="container">
            <?php include COMPONENTS . 'notification-bar.php'; ?>
            <div class="row py-5">
                <div class="d-flex col-md-7 flex-column justify-content-center ps-3 content">            
                    <?php
                        $title = 'Media Coverage';
                        if ($year) {
                            $title .= ': ' . $year;
                        }
                    ?>
                    <h1><?php echo $title; ?></h1>
                </div>
            </div>
	    </div>
    </div>

	<div class="breadcrumb-wrapper">
        <?php include COMPONENTS . 'breadcrumbs.php'; ?>
    </div>

    <section class="listing-section">
        <div class="container">

            <div class="row">
                <div class="col-md-2 flex-column sidebar">
                    <div class="d-md-none">
						<button class="btn btn-primary mb-3 filter-toggle">Show Year Filters</button>
					</div>
                    <div class="year-filter">
                        <?php
                            $years = $wpdb->get_results("SELECT DISTINCT YEAR(post_date) AS year FROM $wpdb->posts WHERE post_type = 'news' AND post_status = 'publish' ORDER BY post_date DESC");

                            if ($year) {
                                $archive_link = remove_query_arg('year', $_SERVER['REQUEST_URI']);
                                echo '<a href="' . $archive_link . '" class="clear-filter mb-3 d-flex align-items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="12" width="13.5" viewBox="0 0 576 512"><path fill="#596979" d="M576 64V448H176L0 256 176 64H576zM254.1 192l17 17 47 47-47 47-17 17L288 353.9l17-17 47-47 47 47 17 17L449.9 320l-17-17-47-47 47-47 17-17L416 158.1l-17 17-47 47-47-47-17-17L254.1 192z"></path></svg>
                                    <span class="ms-2">Clear Filter</span>
                                </a>';
                            }

                            echo '
                            <strong class="mb-1 d-none d-md-block">Filter by Year</strong>
                            <ul class="list-unstyled">';

                            foreach ($years as $year_obj) {
                                $year_link = add_query_arg('year', $year_obj->year, rtrim(get_post_type_archive_link('coverage'), '/'));
                                $active_class = ($year === (string)$year_obj->year) ? 'filtered-year' : '';
                                echo '<li><a href="' . $year_link . '" class="btn btn__solid btn__solid--white ' . $active_class . '">' . $year_obj->year . '</a></li>';
                            }

                            echo '</ul>';
                        ?>
                    </div>
                </div>
                <div class="col-md-10 col-lg-8">
                    <?php

                    if ($news_query->have_posts()) {
                        echo '<div class="row cards p-0 d-flex">';

                        while ($news_query->have_posts()) {
                            $news_query->the_post();
                            $post_title = get_the_title();
                            $post_date = get_the_date('F d, Y');
                            $logo = get_field('_logo');
                            $post_link = get_field('_url');
                            $post_target = '_blank';
                            ?>
                            <div class="col-md-6 mb-4">
                                <a data-type="post" data-title="<?php echo $post_title; ?>" class="notched-card h-100 w-100" href="<?php echo $post_link; ?>" target="<?php echo $post_target;?>">
                                <div class="top-corner-notch">
                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36.9px" height="33.8px" viewBox="0 0 36.9 33.8" enable-background="new 0 0 36.9 33.8" xml:space="preserve">
                                        <g id="Layer_2">
                                            <rect fill="#E1EBEF" width="36.9" height="33.8"></rect>
                                        </g>
                                        <g id="Layer_1">
                                            <path fill="#FFFFFF" d="M36.9,33.8v-0.4c0-2.2-0.9-4.2-2.4-5.7L8.3,2.3C6.8,0.8,4.8,0,2.7,0H0v33.8H36.9z"></path>
                                        </g>
                                    </svg>
                                </div>
                                    <div class="card-interior d-flex flex-column h-100 p-3">
                                        <?php solo_acf_image($logo, 'coverage-logo my-2', ''); ?>
                                        <strong class="h5"><?php echo $post_title; ?></strong>
                                        <p class="date mt-auto mb-0"><?php echo $post_date; ?></p>
                                    </div>
                                </a>
                            </div>
                            <?php
                        }
                        echo '</div>';
                    wp_reset_postdata();}
                    ?>
                </div>
                <div class="col-lg-2 ">
                    <?php get_template_part('components/media-contact'); ?>
                </div>
            </div>
        </div>
    </section>
</main>
<?php get_footer(); ?>