From 9ece16c681461f71d8c0539662f44e04ec37c3b3 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 3 Aug 2024 12:59:01 +0200
Subject: [PATCH] feat: improve pagination styling and functionality

Updated pagination implementation in `archive-article.php` and `archive-letter.php` to use global `$wp_query` for accurate page counts and improved navigation. Enhanced user experience by adding more pagination options such as `prev_next`, `show_all`, and customizable text for previous and next links.

Added new styles to `style.css` to center pagination, improve link aesthetics, and highlight the current page.

This enhancement provides a more user-friendly interface and consistent appearance across archive pages.
---
 archive-article.php | 15 +++++++++++++--
 archive-letter.php  | 13 ++++++++++++-
 style.css           | 27 ++++++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/archive-article.php b/archive-article.php
index 5b0fbc4..b6cea57 100644
--- a/archive-article.php
+++ b/archive-article.php
@@ -84,10 +84,21 @@
         <?php endif; ?>
     </div>
     <div class="row">
-        <div class="col-md-12">
+        <div class="pagination col-md-12">
             <?php
+            global $wp_query;
+
             echo paginate_links(array(
-                'total' => $loop->max_num_pages,
+                'total' => $wp_query->max_num_pages,
+                'current' => max(1, get_query_var('paged')),
+                'format' => '?paged=%#%',
+                'show_all' => false,
+                'end_size' => 2,
+                'mid_size' => 1,
+                'prev_next' => true,
+                'prev_text' => __('« Prev', 'duck-behavior-journal'),
+                'next_text' => __('Next »', 'duck-behavior-journal'),
+                'type' => 'plain'
             ));
             ?>
         </div>
diff --git a/archive-letter.php b/archive-letter.php
index a93c0b0..e55061a 100644
--- a/archive-letter.php
+++ b/archive-letter.php
@@ -28,10 +28,21 @@
         <?php endif; ?>
     </div>
     <div class="row mt-4">
-        <div class="col-md-12">
+        <div class="pagination col-md-12">
             <?php
+            global $wp_query;
+
             echo paginate_links(array(
                 'total' => $wp_query->max_num_pages,
+                'current' => max(1, get_query_var('paged')),
+                'format' => '?paged=%#%',
+                'show_all' => false,
+                'end_size' => 2,
+                'mid_size' => 1,
+                'prev_next' => true,
+                'prev_text' => __('« Prev', 'duck-behavior-journal'),
+                'next_text' => __('Next »', 'duck-behavior-journal'),
+                'type' => 'plain'
             ));
             ?>
         </div>
diff --git a/style.css b/style.css
index 93dfa91..4286539 100644
--- a/style.css
+++ b/style.css
@@ -133,4 +133,29 @@ a h5 {
     padding: 5px 10px;
     background-color: #f9f9f9;
     border-top: 1px solid #ddd;
-}
\ No newline at end of file
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+}
+
+.pagination .page-numbers {
+    display: block;
+    padding: 10px 15px;
+    margin: 0 5px;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    text-decoration: none;
+}
+
+.pagination a:hover {
+    background-color: #ddd;
+}
+
+.pagination .current {
+    background-color: #007bff;
+    color: white;
+}