Update the Date Automatically on Your Webflow Website

The code

 
<script> let yearElements = document.getElementsByClassName('year'); [].slice.call(yearElements).forEach(function (div) {   div.innerHTML = new Date().getFullYear(); });
</script>

Introduction

Most footer’s have the year in the copyright section of the website. It is easy to forget to make the change at the beginning of the year. Instead of adding one more item to our to-do list, we can have it update each year automatically.

Here is what you need to do in your Webflow project.

For starters, my Footer is a component. If you aren’t using components, you need to do use them. Components will save you so much time, especially when you need to make a change, like changing the date to reflect the new year.

I’m assuming your footer has been turned into a component. If it is not, you can click on the section, then click create component. Name it something descriptive, like footer. It doesn’t have to be revolutionary. It just needs to be something you can remember.

Once you have your footer turned into a component follow these steps. Here is a scribe I made. More instructions are to follow below the scribe as well as the code you need to paste in.

Instructions written out

NOTE:These are the same as above, but more detailed

(1) Click on footer in the navigator. Then in the right hand panel, click edit component. This step is crucial, so that you are editing the actual component and not just a field in the component.

(2) Click the plus icon on the left side bar or type “A” to open the Add panel. Scroll down to the advanced section and click on embed. This will put an embed element in your footer. The custom code section will pull up.

(3) Now paste this Javascript code into the code editor.

 
<script> let yearElements = document.getElementsByClassName('year'); [].slice.call(yearElements).forEach(function (div) {   div.innerHTML = new Date().getFullYear(); });
</script>

What this code does, is it updates any div with a class of year to the current year.

(4) Save and close the embed. Make sure the embed is at the bottom of the hierarchy in the navigator. It won’t affect the code and whether it works or not, but it will make the next step easier so that you can see the actual date since the back to instance bar opens at the bottom and gets in the way. At least it does in my project.

(5) Find the date in your footer.

(6) Highlight just the date you want to change.

(7) A menu will popup.

(8) Click the span icon to create a text span.

(9) Add the class of ‘year’ to the span using the style’s panel.

NOTE: The date won’t change. That doesn’t mean something is broken. The date is only going to change on the published site since it is a script.

(10) Publish your site.

(11) View the published site.

The date should have changed to the current year!