archive and search

archive.php

@@ -0,0 +1,38 @@
+<?php get_header() ?>
+
+<div class="st-main-grid">
+    <div class="st-article-archives">
+        <?php
+        $count = $wp_the_query->post_count;
+        custom_breadcrumbs();
+        if (have_posts()) {
+            while (have_posts()) {
+                the_post(); 
+                $category = get_the_category()[0];
+                $count++;
+                ?>
+                <article class="st-article-archive-article">
+                    <a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
+                        <?php the_post_thumbnail(); ?>
+                    </a>
+                    <div class="st-article-section-wide-article__text-container">
+                        <a href="<?php echo home_url($category->slug); ?>"
+                            class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
+                        <a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>">
+                            <h3><?php the_title(); ?></h3>
+                        </a>
+                        <p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
+                    </div>
+                    </a>
+                </article>
+                <?php
+            }
+        }
+        
+        wp_reset_postdata();
+        ?>
+    </div>
+    <?php list_pagination($count); ?>
+</div>
+
+<?php get_footer() ?>

front-page.php

@@ -167,7 +167,6 @@
             query_posts($post_section_three_featured_args);
             if (have_posts()) : while (have_posts()) : the_post();
                 $category = get_the_category()[0];
-                $author = get_userdata( $post->post_author );
         ?>
             <article class="st-article-section-wide-article">
                 <a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">

functions.php

@@ -270,4 +270,24 @@ function custom_breadcrumbs() {
            
     }
        
+}
+
+//paginate
+
+function list_pagination($count)
+{
+    global $wp_query;
+    $big = 99999999;
+    $paged = paginate_links(array(
+        'base'      => str_replace($big, '%#%', get_pagenum_link($big)),
+        'format'    => '?paged=%#%',
+        'current'  => max(1, get_query_var('paged')),
+        'mid_size'  => 0,
+        'prev_next' => true,
+        'prev_text' => __('<span class="st-nav-arrow"><</span>'),
+        'next_text' => __('<span class="st-nav-arrow">></span>'),
+        'type'      => 'list',
+        'total'     => $wp_query->max_num_pages
+    ));
+    echo $paged;
 }

header.php

@@ -36,7 +36,7 @@
             <button class="st-nav-btn st-open-nav" aria-label="Open Navigation"><i class="fa fa-bars"></i></button>
         </div>
 
-        <h1 class="st-site-title">Slowtwitch</h1>
+        <a href="<?php echo home_url() ?>" class="st-site-title-link"><h1 class="st-site-title">Slowtwitch</h1></a>
 
         <nav class="st-nav st-main-grid">
             <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>

search.php

@@ -0,0 +1,37 @@
+<?php get_header() ?>
+
+<div class="st-main-grid">
+    <div class="st-article-archives">
+        <?php
+        $count = $wp_the_query->post_count;
+        if (have_posts()) {
+            while (have_posts()) {
+                the_post(); 
+                $category = get_the_category()[0];
+                $count++;
+                ?>
+                <article class="st-article-archive-article">
+                    <a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
+                        <?php the_post_thumbnail(); ?>
+                    </a>
+                    <div class="st-article-section-wide-article__text-container">
+                        <a href="<?php echo home_url($category->slug); ?>"
+                            class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
+                        <a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>">
+                            <h3><?php the_title(); ?></h3>
+                        </a>
+                        <p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
+                    </div>
+                    </a>
+                </article>
+                <?php
+            }
+        }
+        
+        wp_reset_postdata();
+        ?>
+    </div>
+    <?php list_pagination($count); ?>
+</div>
+
+<?php get_footer() ?>

style.css

@@ -47,6 +47,10 @@ h1 {
     transform-origin: top left;
 }
 
+.st-site-title-link {
+    text-decoration: none;
+}
+
 .st-title-scrolled {
     transform: scale(0,0);
 }
@@ -939,11 +943,17 @@ COMPONENTS
 }
 
 @media (min-width: 760px) {
-    .st-article-section-four-oh-four {
+    .st-article-section-four-oh-four,
+    .st-article-archives {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 1em;
     }
+
+    .st-article-archives .breadcrumbs,
+    .st-article-archives .pagination {
+        grid-column: 1/span 2;
+    }
 }
 
 @media (min-width: 1200px) {
@@ -951,7 +961,59 @@ COMPONENTS
         font-size: 4rem;
     }
 
-    .st-article-section-four-oh-four {
+    .st-article-section-four-oh-four,
+    .st-article-archives {
         grid-template-columns: repeat(4, 1fr);
     }
+
+    .st-article-archives .breadcrumbs,
+    .st-article-archives .pagination {
+        grid-column: 1/span 4;
+    }
+}
+
+/* Pagination */
+
+ul.page-numbers {
+    list-style: none;
+    margin: 0;
+    margin-bottom: .75em;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+.page-numbers li {
+    min-width: 40px;
+    display: flex;
+    justify-content: center;
+    background-color: #0b4fa0;
+}
+
+.page-numbers a {
+    text-decoration: none;
+    margin: 0;
+}
+
+.page-numbers a,
+.page-numbers .dots,
+.page-numbers .current {
+    padding: .25em .4em;
+    background-color: #0b4fa0;
+}
+
+.page-numbers .dots,
+.page-numbers .current,
+.st-nav-arrow,
+a.page-numbers,
+.page-numbers a:visited {
+    color: #fff;
+}
+
+@media (min-width: 760px) {
+    ul.page-numbers {
+        justify-content: center;
+        gap: 1em;
+        margin: 1em 0;
+    }
 }