Clean Archives Reloaded in Twenty Sixteen theme

Clean Archives Reloaded is a great archives plugin for those of us who have used WordPress for a long time. I use it on my archives page because it can display a lot of post titles without overwhelming the reader.

Twenty Sixteen is the default WordPress theme for WordPress version 4.4. I’m using Twenty Sixteen now.

Twenty Sixteen is a “mobile-first” responsive theme. Its main menu collapses our of the way for smaller screens yet can be expanded with a touch. The items are spaced for easy tapping.

Google’s Search Console¹ highlights pages that are not mobile-friendly; it flagged my archives page because the post title links and month links were too close together.

Here’s how to take the CSS for Twenty Sixteen’s main menu and apply it to Clean Archives Reloaded.

Modify Clean Archives Reloaded

The HTML structure of Clean Archives Reloaded doesn’t quite match the HTML structure of Twenty Sixteen’s main menu. To simplify the CSS, it was easier to change one line of clean-archives-reloaded.php. I changed

$html .= '<li>' .  mysql2date( 'd', $post->post_date ) . ': <a href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';

$html .= '<li><a href="' . get_permalink( $post->ID ) . '">' .  mysql2date( 'd', $post->post_date ) . ': ' . get_the_title( $post->ID ) . '</a>';

This moves the date inside the anchor tag, simplifying its HTML structure.²

Make Custom CSS

Next, I grabbed the CSS from Twenty Sixteen and searched for all the lines with .main-menu in them and modified those appropriate to Clean Archives Reloaded. Because I only wanted this new CSS to apply to smaller screen widths, I wrapped the CSS in a media query. This makes Clean Archives Reloaded use mobile-friendly formatting at the same screen width that Twenty Sixteen’s main menu.

@media screen and (max-width: 56.875em) {
    .car-list {
        font-family: Montserrat, "Helvetica Neue", sans-serif;
    }
    .car-list ul a {
        box-shadow: none;
    }
    .car-list,
    .car-list ul {
        list-style: none;
        margin: 0;
    }
    .car-list li {
        border-top: 1px solid #e8e8e8;
        position: relative;
    }
    .car-yearmonth, .car-list a {
        color: #1a1a1a;
        display: block;
        line-height: 1.3125;
        padding: 0.84375em 0;
    }
    .car-list a:hover,
    .car-list a:focus {
        color: #007acc;
    }
    .car-list ul {
        display: none;
        margin-left: 0.875em;
    }
    .car-list {
        border-bottom: 1px solid #e8e8e8;
    }
    .car-yearmonth:after {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-family: "Genericons";
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        speak: none;
        text-align: center;
        text-decoration: inherit;
        text-transform: none;
        vertical-align: top;
    }
    .car-yearmonth {
        margin-right: 50px;
        padding-right: 2.25em;
    }
    .car-yearmonth:after {
        content: "\f431";
        position: absolute;
        top: 0.8125em;
        right: 0.625em;
    }
}
.post-sharing a, .car-toggler {
    background: #1a1a1a;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-weight: 700;
    letter-spacing: 0.046875em;
    line-height: 1;
    padding: 0.84375em 0.875em 0.78125em;
    text-transform: uppercase;
}
.car-toggler:hover {
    background: #007acc;
    color: #fff;
}
.car-toggler:focus {    
    outline: thin dotted;
    outline-offset: -4px;
    color: #fff
}
.car-list {
    margin-top: 20px;
}

There are many options for applying this custom CSS, from using a child theme, to using JetPack’s custom CSS module. I use a plugin that loads my custom CSS file.

This is the result.

Success!

Update. I continue to update the CSS and screen capture as Twenty Twelve’s CSS continues to change during development. This is the CSS I’m using here now.

1
Search Console used to be called Webmaster Tools.
2
I wonder if I can convince Alex Mills (Viper007Bond) to make the change in the official release.