How to use Javascript to automatically update the year shown on a Webflow site

Don't make the mistake of having an outdated year on your Webflow site!

Have you ever seen a website that shows the wrong year because someone forgot to update it to the current year? It makes the site feel like it’s outdated or not cared for, which can lead to a sense of mistrust of whoever owns the website. But here’s the good news! There’s an easy way to automate this task so that the year is always the current year.

This post will walk you through how to add JavaScript to your Webflow website to keep the year always up-to-date.

Step 1: Add an ID to the element containing the year

You will need to add an ID to the page element where you would like the year to be displayed. In this example, I’ll add the id “year” to a text span in the footer.

Pro tip: I purposefully add an incorrect year here (or just the word “year”, itself) so that it is easy to see if the script is working properly.

Step 2: Add the JavaScript that will control what year is showing

You’ll need to go to your Webflow site settings and add the following JavaScript code. In my example, this is an element that shows on every page of the site, so we’ll want to add this code to our global custom code settings.

<script>
document.getElementById('year').innerHTML = new Date().getFullYear();
</script> 

And that’s it! Try publishing your website and check if the year is current. Now, there’s one less thing you’ve got to worry about keeping up-to-date!