tailwind-wordpress-template/404.php at main · xowei/tailwind-wordpress-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<?php

/**
 * 404 template file.
 *
 * Displays the fallback page when requested content cannot be found.
 *
 * @package tailwind_wordpress_template
 * @since 1.0.0
 */

if (!defined('ABSPATH')) {
  exit;
}

get_header();
?>

<main
  id="main"
  class="site-main">
  <div class="container mx-auto px-4 py-16">
    <div class="max-w-2xl mx-auto">
      <div class="text-center">
        <header class="page-header mb-8">
          <h1 class="page-title text-6xl font-bold mb-4 text-gray-800">404</h1>
          <h2 class="text-2xl font-semibold mb-4"><?php esc_html_e('Page Not Found', 'tailwind_wordpress_template'); ?></h2>
          <p class="text-gray-600 mb-8">
            <?php esc_html_e('Sorry, the page you are looking for does not exist.', 'tailwind_wordpress_template'); ?>
          </p>
        </header>

        <div class="mb-8">
          <p class="text-lg mb-4"><?php esc_html_e('Try searching:', 'tailwind_wordpress_template'); ?></p>
          <?php get_search_form(); ?>
        </div>

        <div class="mt-8">
          <p class="text-lg mb-4"><?php esc_html_e('Or you can:', 'tailwind_wordpress_template'); ?></p>
          <div class="flex flex-wrap justify-center gap-4">
            <a
              href="<?php echo esc_url(home_url('/')); ?>"
              class="bg-primary-600 hover:bg-primary-700 text-white hover:text-white px-6 py-3 font-semibold transition-colors">
              <?php esc_html_e('Back to Home', 'tailwind_wordpress_template'); ?>
            </a>
            <a
              href="<?php echo esc_url(home_url('/blog')); ?>"
              class="bg-gray-200 hover:bg-gray-300 text-gray-800 hover:text-gray-800 px-6 py-3 font-semibold transition-colors">
              <?php esc_html_e('Browse Posts', 'tailwind_wordpress_template'); ?>
            </a>
          </div>
        </div>
      </div>

      <?php
      $recent_posts = new WP_Query(array(
        'posts_per_page' => 5,
        'post_status'    => 'publish',
      ));

        if ($recent_posts->have_posts()) :
      ?>
        <div id="related-posts-section" class="related-posts-section max-w-2xl mx-auto mt-16 pt-6">
          <h2 class="text-xl font-normal text-primary-600 mb-4 border-l-4 border-primary-600 pl-4 py-1 leading-none">
            <?php
            echo sprintf(__('Latest Posts', 'tailwind_wordpress_template'));
            ?>
          </h2>

          <div class="recent-posts-list">
            <?php
            while ($recent_posts->have_posts()) :
              $recent_posts->the_post();

              $button_classes = 'w-8 h-8 ' .
                'bg-gray-100 hover:bg-gray-200 border border-transparent p-1 ' .
                'transition-all duration-200 flex items-center justify-center ' .
                'focus:outline-none focus:ring-2 focus:ring-primary-600 '.
                'group-hover:border-primary-600 group-hover:text-primary-600 group-hover:bg-white';
            ?>
              <article class="recent-post-item group border-b border-gray-200 last:border-b-0 p-2 hover:bg-gray-50 transition-colors duration-200 hover:text-primary-600">
                <a href="<?php echo esc_url(get_permalink()); ?>" class="block">
                  <div class="flex items-center gap-4">
                    <h3 class="flex-1 truncate font-normal text-lg">
                      <?php the_title(); ?>
                    </h3>
                    <div class="flex-shrink-0 flex items-center gap-2 text-sm group-hover:opacity-60">
                      <time datetime="<?php echo esc_attr(get_the_date('c')); ?>">
                        <?php echo get_the_date('Y.m.d'); ?>
                      </time>
                      <span class="<?php classnames_echo($button_classes); ?>" aria-label="<?php esc_attr_e('Next Page', 'tailwind_wordpress_template'); ?>">
                        <svg class="w-full h-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 5l7 7-7 7" />
                        </svg>
                      </span>
                    </div>
                  </div>
                </a>
              </article>
            <?php
            endwhile;
            wp_reset_postdata();
            ?>
          </div>
        </div>
      <?php
        endif;
      ?>
    </div>
  </div>
</main>

<?php
get_footer();
?>