modul8_wordpress/index.php at main · modul8dev/modul8_wordpress · 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
<?php
/**
 * Blog Archive Template
 */

get_header(); ?>

<?php if (function_exists('elementor_theme_do_location') && elementor_theme_do_location('archive')) : ?>
    <?php elementor_theme_do_location('archive'); ?>
<?php else : ?>

<!-- Blog Hero -->
<section class="blog-hero" style="padding: 100px 0; background: var(--card);">
    <div class="container">
        <div class="text-center">
            <h1 style="font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem;">
                DevOps Insights & Articles
            </h1>
            <p style="font-size: 1.25rem; color: var(--muted-foreground); max-width: 700px; margin: 0 auto;">
                Stay updated with the latest trends, best practices, and insights from the world of DevOps and infrastructure automation.
            </p>
        </div>
    </div>
</section>

<!-- Blog Posts Grid -->
<section class="blog-posts" style="padding: 80px 0;">
    <div class="container">

        <?php if (have_posts()) : ?>

        <!-- Regular Posts Grid -->
        <div class="posts-grid">
            <div class="grid grid-cols-3" style="gap: 2rem;">

                <?php while (have_posts()) : the_post(); ?>
                <article class="post-card" style="background: var(--card); border-radius: 1rem; overflow: hidden; transition: transform 0.3s ease;">

                    <div class="post-image">
                        <?php if (has_post_thumbnail()) : ?>
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail('medium', array('style' => 'width: 100%; height: 200px; object-fit: cover;')); ?>
                            </a>
                        <?php else : ?>
                            <div style="width: 100%; height: 200px; background: var(--muted); display: flex; align-items: center; justify-content: center;">
                                <span style="color: var(--muted-foreground);">No Image</span>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="post-content" style="padding: 1.5rem;">
                        <div class="post-meta" style="margin-bottom: 1rem;">
                            <span style="color: var(--muted-foreground); font-size: 0.875rem;"><?php echo get_the_date('M j, Y'); ?></span>
                            <?php if (get_the_category()) : ?>
                            <span style="color: var(--muted-foreground); margin: 0 0.5rem;">•</span>
                            <span style="color: var(--primary); font-size: 0.875rem; font-weight: 600;"><?php echo get_the_category()[0]->name; ?></span>
                            <?php endif; ?>
                        </div>

                        <h3 style="margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.3;">
                            <a href="<?php the_permalink(); ?>" style="text-decoration: none; color: inherit;">
                                <?php the_title(); ?>
                            </a>
                        </h3>

                        <p style="color: var(--muted-foreground); margin-bottom: 1rem; font-size: 0.875rem;">
                            <?php echo wp_trim_words(get_the_excerpt(), 20); ?>
                        </p>

                        <div class="post-author" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span style="color: var(--muted-foreground); font-size: 0.875rem;">By <?php the_author(); ?></span>
                        </div>
                    </div>

                </article>
                <?php endwhile; ?>

            </div>
        </div>

        <!-- Pagination -->
        <div class="pagination" style="margin-top: 4rem; text-align: center;">
            <?php
            echo paginate_links(array(
                'prev_text' => '← Previous',
                'next_text' => 'Next →',
                'type' => 'list'
            ));
            ?>
        </div>

        <?php else : ?>

        <div class="no-posts" style="text-align: center; padding: 4rem 0;">
            <h2>No articles found</h2>
            <p style="color: var(--muted-foreground);">Check back soon for new content!</p>
        </div>

        <?php endif; ?>

    </div>
</section>

<?php endif; ?>

<?php get_footer(); ?>