Unveiling Original and Updated Dates (Squarespace 7.0)

In the dynamic blogging world, it's not uncommon for bloggers to revisit and revamp their older posts, injecting fresh insights and information. Like many others, we desire a way to communicate these updates to our audience effectively. We want to highlight the original publishing date and showcase when a post received its latest refresh. Unfortunately, Squarespace, in its default settings, doesn't provide a straightforward solution for this.

But fret not! With the power of JavaScript, we can introduce a custom feature to your Squarespace blog, allowing you to elegantly display both the initial publication date and the most recent update. This enhancement ensures readers can easily discern when a post first graced the digital pages and when it received its latest evolution.

Why Update Dates Matter

In the ever-evolving landscape of online content, keeping blog posts current is a good practice and a necessity. Whether it's to correct outdated information, add new insights, or refine the overall message, these updates contribute to maintaining a relevant and trustworthy blog.

Despite Squarespace's user-friendly interface and powerful features, the platform currently lacks a built-in option to display a blog post's original and updated dates. This limitation inspired me to explore a custom solution beyond Squarespace's default settings.

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.

To achieve this, we are going to use JavaScript, a versatile scripting language commonly used in web development. By leveraging JavaScript, we can inject a custom script into your Squarespace site, enabling the display of original and updated dates seamlessly.

Step-by-Step Implementation

Step 1: Code Injection Setup

Scroll to the bottom of your pages, and under Website Tools, select Code Injection.

Step 2: Adding the Main Script

Copy and paste the following script into the Code Injection footer section. This script defines a function to update the blog meta data dynamically.

<!-- –– ADD FIRST PUBLISHED DATE AND UPDATED DATE ON BLOG POSTS ––-->
<!--- Copyright Enny Benzonelli [www.benzonelli.net] ----------------------------->
<!--- Use freely in your code injection. Do NOT re-publish ------------------->
<script>
  function updateBlogMetaDate(publishedDate) {
    var timeElement = document.querySelector(".Blog-meta-item--date");
    
    if (timeElement) {
      var newText = "Published on " + publishedDate + " | Updated on ";
      
      // Check if the text is not already present
      if (!timeElement.innerHTML.includes(newText)) {
        timeElement.innerHTML = newText + timeElement.innerHTML;
      }
    }
  }
</script>
<!-- –– END ADD FIRST PUBLISHED DATE AND UPDATED DATE ON BLOG POSTS ––-->

Save the changes.

Step 3: Customizing the Blog Post

Open the desired blog post in the editor and add a Code block at the top of your blog post. Inside the code block, add the following script, replacing the date accordingly.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    updateBlogMetaDate("20 February 2022");
  });
</script>

Step 4: Save Changes

Save your changes in the individual blog post. You should refresh the page to see the changes.

Conclusion

Following these steps empowers your Squarespace blog to communicate more effectively with your audience. The added visibility into original and updated dates ensures that readers stay informed and engaged with the latest information.