Styling the Post Archives page

Here's an overview of how to style the post archives page by targeting the CSS classes wrapped around each piece of content.

Please understand that this is just an example — follow accepted best practices for your own project!

Identify the HTML Structure

The post archives page outputs each post wrapped in <div> elements with specific classes:

• Post titles — class post-title
• Publication dates — class publication-date
• Post thumbnails — class post-thumbnail-container
• Post excerpts — class post-excerpt

Create CSS Rules

Define CSS rules targeting those classes in themes/your-theme/custom.css. Targeting classes rather than base elements gives you better control and maintainability:

/* Style for post title links */
.post-title {
    font-size: 1.2em;
    font-weight: bold;
}

/* Style for post publication date */
.publication-date {
    color: #888;
}

/* Style for post thumbnail container */
.post-thumbnail-container {
    margin-bottom: 10px;
}

/* Style for post thumbnails */
.post-thumbnail {
    max-width: 100%;
    height: auto;
}

/* Style for post excerpts */
.post-excerpt {
    margin-bottom: 20px;
}

Apply the Classes in PHP

Modify the post archives layout file in your theme to wrap each piece of content in the appropriate <div>. For example:

foreach ($fileDetailsPage as $fileDetail) {
    $dateFormatted = date('m/d/Y', strtotime($fileDetail['date']));

    echo '<div class="post-title"><a href="' . $postsFolder . '/' . basename($fileDetail['filename'], '.html') . '">' . $fileDetail['title'] . '</a></div>';
    echo '<div class="publication-date">' . $dateFormatted . '</div>';

    echo '<div class="post-thumbnail-container">';
    if (file_exists($fileDetail['image'])) {
        echo '<img src="' . $fileDetail['image'] . '" alt="' . $fileDetail['title'] . '" class="post-thumbnail">';
    } else {
        echo 'Thumbnail not found for ' . $fileDetail['title'];
    }
    echo '</div>';

    echo '<div class="post-excerpt">' . $fileDetail['excerpt'] . '</div>';
}

Test and Adjust

Save your changes and load the archives page in a browser. Adjust the CSS properties to match your design preferences. Because everything is wrapped in named classes, you can restyle any element independently without affecting the rest of the page.