Displaying Constant Contact Archives: Most Recent First

Displaying a Constant Contact Archive on your Website

You may use Constant Contact, the email newsletter service, to contact your subscribers. Some of our clients like to add links to past newsletters on their websites so new subscribers can read them later. But when adding the Constant Contact archive widget to a WordPress website, the posts are listed in the opposite order we might expect. Though you prepare the widget through Constant Contact to display the 10, 20, or 25 most recent posts, on your website, you see the oldest email newsletter first.
Most of us would expect to see the most recent email newsletter first, and older ones after that. The issue has been around for at least four years, and Constant Contact has not yet provided a solution.
constant contact archive newsletters display in unordered list

Fortunately, there is a solution to changing the order of the newsletters in your Constant Contact archive widget.

Flexbox is a useful layout mode in CSS. As you’d expect from the name, it gives us more flexibility over the layout elements. Today, we look at reversing the order of list elements with flexbox.

Reversing the order of list elements with flexbox

The widget code Constant Contact provides to create the automated list looks like this. We can’t change any settings to display the most recent newsletters first:
<script id=”archiveScript” src=”//cdnlink.com/archive-static.min.js”></script>
<div id=”archiveList” data-archive-count=”10″ data-m=”a07efr0ypg60″></div>

How can we use flexbox in this case?

When we inspect the element on the website, it parses out to this:
<div id=”archiveList” data-archive-count=”10″ data-m=”a07efr0ypg60″>
        <li><a href=”https://linktotheemail.com/id=1234″ target=”_blank”>Did You Catch Us on NPR?</a></li>
        <li><a href=”https://linktotheemail.com/id=5678″ target=”_blank”>Canada – Here We Come!</a></li>

With this unordered list, we now have CSS options, and flexbox comes to the rescue!

We added this to the stylesheet:
/*change order of Newsletters on home page, show newest first */
#archiveList ul {
    display: flex;
    flex-direction: column-reverse;
And now our list of Constant Contact newsletters shows the most recent one first instead of the oldest one. 
inversing the order of list elements flexbox column-reverse

Like it? Share it!


Alisa Cognard

Alisa was one of the first team members to join Red Earth Design, Inc. in early 2004. From data entry, she progressed to MySQL database manipulation and PHP coding. Alisa is responsible for all kinds of odds and ends: installing new websites, adding features to them, programming databases, PHP coding, website troubleshooting, website security, and organizational tasks for Red Earth Design.

Leave a Reply

Your email address will not be published. Required fields are marked *