Automatically updating the footer date with JavaScript in Webflow

Many websites still display outdated copyright years, which can make a site seem neglected or abandoned. While manually updating the date every year is possible, it is often overlooked. Automating this small but essential task ensures your website maintains a professional and up-to-date appearance.

In this guide, we will show you how to dynamically update your website's footer copyright date using JavaScript.

‍

Why automate the copyright date update?

‍

Maintains a professional image

An outdated footer can make visitors question whether your website is actively maintained. Keeping it current reassures users of your site’s reliability.

‍

Eliminates unnecessary manual work

If you manage multiple websites, updating each footer manually every year becomes tedious. Automating this process saves time and effort.

‍

Prevents oversights

It's easy to forget to update the date. By automating it, you eliminate the risk of displaying an outdated year.

‍

How to automate the footer date update

‍

Step 1: prepare your HTML

Ensure that your HTML footer includes a `span` element with the class `current-year`:

‍

Step 2: add JavaScript code

Insert the following jQuery script before the closing `</body>` tag:

<script>
$(function() {
  $('.current-year').text(new Date().getFullYear());
});
</script>

‍

Step 3: explanation of the code

- `$(function() { ... })`: ensures the script runs once the page is fully loaded.
- `new Date().getFullYear()`: retrieves the current year dynamically.
- `$('.current-year').text(...)`: updates the text inside elements with the class `current-year` to display the current year.

‍

{{blog_article_cta01}}

‍

Testing your implementation

Once the script is added, refresh your page to verify that the footer displays the correct year. This solution is simple, effective, and requires minimal setup.

‍

Conclusion

Automating the copyright date update is a small yet impactful enhancement that ensures your website remains up-to-date with minimal effort. By implementing this jQuery solution, you enhance your site’s professionalism, save time, and eliminate manual updates.

Just add the class `current-year` to a text block, and the script will handle the rest automatically!