Unveiling Original and Updated Dates (Squarespace 7.1)

3 Jun

In a previous post, I described adding this function on Squarespace 7.0 websites. As more and more users are moving to Squarespace 7.1, I have decided to create something similar for the latest version. The structure of Squarespace 7.1 is a bit different, so it needed a different code, but the good thing is that it is more user-friendly, as I managed to keep all the Javascript in the Code Injection section while in the blog post; we only need to add a div. In this guide, I'll walk you through the process of adding a custom date display to your Squarespace 7.1 blog posts. This feature allows you to highlight the original publication date and any subsequent updates, providing a timeline for your readers.

Prerequisites

Before you begin, please make sure your Squarespace account is at least on a Business subscription. Custom code is necessary to add to your website. Also, this code will format the date in the British format D MMMM YYYY. If you need support, please contact me, but I can only answer when time permits. Alternatively, you can always hire me :)

Step-by-Step Implementation

Step 1: Open Your Squarespace Website

Step 2: Open Code Injection

To access Code Injection in the Squarespace editor, you can follow these steps: The easiest way is to click anywhere in the left-side menu bar and press the forward-slash ("/") on your keyboard. This will prompt a search box. Type "Code Injection" and click on the suggested option. OR Scroll to the bottom of your pages, and under Website Tools, select Code Injection. This will take you to the Code Injection section, where you can insert the provided JavaScript code.

Step 3: Insert the Code

Copy the following JavaScript code in the footer section:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check if the blog post contains the custom attribute as a marker
        var hasUpdateMarker = document.querySelector('[data-ebe-plugin="has-updated-date"]');

    if (hasUpdateMarker) {
        // Get the existing time element
        var timeElement = document.querySelector('.dt-published.blog-meta-item.blog-meta-item--date');

        if (timeElement) {
            // Get the original publish date from the data attribute
            var originalPublishDate = hasUpdateMarker.getAttribute('data-original-publish-date');

            // Create a new p element for "Updated on"
            var updatedOnParagraph = document.createElement('p');
            updatedOnParagraph.id = 'ebe-updatedon';
            updatedOnParagraph.textContent = 'Published on ' + originalPublishDate + ' | Updated on ';
            updatedOnParagraph.style.display = 'inline'; // or 'inline-block'

            // Insert the "Updated on" paragraph before the existing date span
            timeElement.insertBefore(updatedOnParagraph, timeElement.firstElementChild);
        }
    }
});
</script>

Step 4: Access the Blog Post

Go back to the Pages panel.
Select the page that contains your updated blog post.

Step 5: Add a Marker and the original date to the Blog Post

In your blog post, insert a Code Block on the top of the page with the following code:

<div data-ebe-plugin="has-updated-date" data-original-publish-date="3 October 2023"></div>

Replace 3 October 2023 with your blog post's original publish date.

Step 6: Save and Preview

Save the changes to your blog post.
Preview your blog post to ensure the custom date display works as expected.

That's it! You've successfully implemented a custom date display for a specific blog post on Squarespace 7.1. Feel free to adjust the code and marker details based on your preferences and content.

Enny Benzonelli

Editor & Designer.

https://www.benzonelli.nz