Have you ever scrolled to the bottom of a web page and noticed that the footer says, "© 2019", but the current year is 2021? It looks unprofessional, especially because it doesn't take much to make that copyright year "dynamic" so that it will update automatically each January 1. That way, you won't have to remember to update it manually yourself.

"I don't know who needs to hear this, but do not hardcode the copyright year into your footer."

-A tweet I saw

I can't remember who tweeted that, but it reminded me that my copyright year was, indeed, hard-coded into my footer. I had quickly added the year to each of the pages on my site one evening, thinking I would update the year to pull in dynamically "later."

The reality is that "later" could mean anywhere between next week and never, so before January hits and I inevitably forget to update the copyright year in my footer, I figured I'd take a minute to do so now.

And you know what? A minute is all it took.

TL;DR:

There are several ways to add a dynamic copyright year into the footer of your site, but here's one easy method using HTML and JavaScript.

Add the below snippet to each html file in your site, just above the closing </body> tag:

<footer> 
  &copy; <span class="year"></span> by [your name / company here] 
</footer>

<script>
const footerYear = document.querySelectorAll(".year");
footerYear.forEach(copyright => {
  copyright.innerHTML = new Date().getFullYear();
});
</script>

Your footer should now look something like this:

Adding a Dynamic Footer to a Single-Page Site

If your site only has one page, such as a personal portfolio site with menu links that anchor down to each section on the page, adding a dynamic footer only takes two—yes, TWO—lines of code.

Start by adding a simple <footer> section to the bottom of your page, just above the closing </body> tag:

<footer>&copy;<span id="year"></span> by [your name / company here]</footer>

The span ensures that the copyright will stay on the same line as the rest of the text, as a div would break the line into three.

Replace "your name / company here" with your own information.

Just below the footer, add this line of JavaScript:

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

In the first part, document.getElementById("year"), the js is searching your html file for an element with an id of "year". That would be the span tag that we just created.

Once it finds that span tag, .innerHTML tells the js to replace the HTML content in that tag (which is currently empty), with whatever comes after the = sign.

JavaScript has many built-in "Date" methods, one of which can retrieve the current year: new Date().getFullYear();. If you were to console log that method like this: console.log(new Date().getFullYear()), you would see 2021 return in the console at the time of this writing, as that is the current year. Therefore, the value that comes after the = sign is 2021.

After the browser runs the getFullYear() method and finds the current year, it will replace the HTML content of the span tag with that year, so the new tag would look like this if you check your html in the browser: <span id="year">2021</span>

That's it! You're done! If you'd like, you can add some additional copy after your name, like "All rights reserved."

Adding a Dynamic Footer to a Multi-Page Site

If you have multiple pages on your site, you probably don't want to add the same line of JavaScript to every single page manually, but rather paste it into a script.js file that you have linked to all of your pages.

However, if you use the code above, you might find that your copyright year isn't pulling in correctly. Why is that?

In the example code above, we are assuming one single page with one single footer element that has a <span> with an id of "year". If we add that same footer to all the other pages on our site and then ask the js file to apply the copyright year to the element with the id "year", the js file gets confused because there are multiple elements with an id of "year" – one on each page that is linked to our js file.

An HTML id is meant to identify a unique element, so it should only exist once, even across multiple pages of the same site. If you want to apply some js that will act upon multiple similar elements across your site, you should use a class instead of an id.

In case you have come to this article and jumped straight down to the "Multi-Page Site" section without reading the "Single-Page Site" section above, I will repeat some of the same explanations that I used in the "Single-Page" section.

Add this <footer> section to the bottom of each of your .html pages, just above the closing </body> tag:

<footer> 
  &copy; <span class="year"></span> by [your name / company here] 
</footer>

The span ensures that the copyright will stay on the same line as the rest of the text, as a div would break the line into three.

Replace "your name / company here" with your own information.

On your script.js file (or whatever you named your js file), add the following code to the bottom of the page:

const footerYear = document.querySelectorAll(".year");
footerYear.forEach(copyright => {
    copyright.innerHTML = new Date().getFullYear();
});

A few things are going on here. First, document.querySelectorAll(".year") finds all of the elements with a class of "year" throughout the html pages that are linked to your js file. These would be the span tags that we just created. This process will return an array of all of those span tags, which we have assigned to a variable called footerYear.

We can't just replace the innerHTML of footerYear with something, because footerYear is an array rather than an element. Instead, we will need to loop through the array and perform the innerHTML replacement on each element in turn.

There are a few ways to loop through an array, but I used this method:

footerYear.forEach(copyright => {

This first line is basically saying, "Hey, for each item in the array called footerYear, I'm going to do something." Each item is given a sort of placeholder name called "copyright" in this example, though you can use whatever placeholder you want, like "x" or "el" (for element) or even "orange." It doesn't matter, as long as you're consistent in the following line:

copyright.innerHTML = new Date().getFullYear();

Now, we are telling the js to take each of the "copyright" elements and replace the innerHTML with whatever comes after the = sign.

JavaScript has many built-in "Date" methods, one of which can retrieve the current year: new Date().getFullYear();. If you were to console log that method like this: console.log(new Date().getFullYear()), you would see 2021 return in the console at the time of this writing, as that is the current year.

After the browser runs the getFullYear() method and finds the current year, it will replace the HTML content of each of the span tags in our array with that year, so each span tag will now look like this if you check it out the html in your browser: <span class="year">2021</span>

Lastly, don't forget to close out your loop with });

And there you have it! Adding a dynamic copyright year to your footer now will save you time in the future and prevent your site from looking outdated and unprofessional. Just set it and forget it!