All About Web Co. logo
All About Web Co.

How to Automatically Update Copyright Year. Complete Guide

Author: Serhiy Manuilo, Publication Date: Apr 30, 2023, Last Updated: Jun 15, 2024
by Serhiy Manuilo, Jun 15, 2024
The article image: "How to Automatically Update Copyright Year. Complete Guide"

Any task that can be automated must be automated. The copyright notice year is not an exception. Automation is good. It is especially good when your website grows. The bigger website is, the more effort you spend maintaining and evolving it.

To automatically update the copyright year, retrieve the copyright text from the copyright HTML element in the website footer. Replace the existing copyright year with the current year using the “new Date().getFullYear()” JavaScript code, and then inject the updated copyright text back into its HTML element.

Let’s dive into details and see how to do this for different scenarios.

Right before we start: this article aims to cover the topic in general. If you built your website with a constructor, you might be interested in reading more specific guides I’ve written for WordPress, Wix, Squarespace, Webflow, Weebly and Blogger copyright. However, don’t neglect reading this one to get some helpful insights.

Updating the copyright year on a website annually is a common practice but not legally required. Copyright protection is automatic upon original work creation, and the notice is more of a communication tool. While some websites automate the year update, others use a range of years to indicate when the content was created or last updated.

Check out this post to learn more about the copyright stuff: Copyright Footer - Examples, HTML, Symbol, Format and More

To get the copyright symbol use any of the following options:

Plain text©
MacOS shortcutOption + G
Windows shortcutAlt + 0169
HTML entity name©
HTML decimal code©
HTML hex code©

Note: the last three work only for HTML templates. HTML copyright code won’t be printed as a symbol when it’s part of plain text.

How to Automatically Update the Year with HTML and JavaScript

The Auto-Update Algorithm

Code implementation of dynamically changing copyright year may vary based on a website rendering type (e.g., Server Side Rendering, Single Page Application, Static Site Generation), a framework (e.g., React, Angular, Vue, Svelte, Next, Laravel), or a programming language.

However, the algorithm remains the same regardless of the details:

  1. Calculate the current year
  2. Get the copyright notice text
  3. Inject the current year value into the copyright notice text
  4. Render the copyright notice text

Let’s see how it works for a basic scenario with pure HTML and Javascript. Nowadays, it’s a rarely used approach, modern web development utilizes a broad spectrum of frameworks and concepts. Nonetheless, it’s a good entry point to understand the basics.

<body>
  <!-- Page body content HTML -->
  <footer>
    <!-- Footer content HTML -->
    <p id="copyright">
      Copyright &copy; 2022 - 2024 allaboutweb.co
    </p>
  </footer>
  <script>
    window.addEventListener('load', onLoad);

    function onLoad () {
      const copyrightEl = document.getElementById('copyright');

      if (copyrightEl) {
        const currentYear = new Date().getFullYear();
        const copyrightText = `Copyright &copy; 2022 - ${currentYear} allaboutweb.co`;

        copyrightEl.innerHTML = copyrightText;
      }
    }
  </script>
</body>

Analyzing Code Examples and Alternative Solutions

Let’s see what we do in this code snippet to get a clear picture of how it works:

  1. We put <script>...</script> tag right before the closing </body> tag
  2. We define the onLoad function inside the script tag. This function manages auto updating logic:
    1. We select the copyright paragraph <p id="copyright">...</p> element by its id attribute and assign it to the copyrightEl constant variable const copyrightEl = document.getElementById('copyright');
    2. We check if this element exists before modifying it if (copyrightEl)
    3. We calculate the current year value and assign it to the currentYear constant variable const currentYear = new Date().getFullYear();
    4. We assign a new copyright text with an injected currentYear value to the copyrightText constant variable const copyrightText = `Copyright &copy; 2022 - ${currentYear} allaboutweb.co`;. Where &copy; is a special HTML code for copyright symbol ”©”, you can also use Decimal code &#169; and Hex code &#xA9; as an alternative;
    5. We set the new text value as an inner HTML of the copyright element copyrightEl.innerHTML = copyrightText;
  3. We set a listener for the load event and assign onLoad function as its handler window.addEventListener('load', onLoad);. As soon as a page finishes loading, the event handler executes. You can read more about it here

OK, now it’s clear!

Although does it make sense to rewrite the entire text instead of its particular piece? Well, this is a lightweight operation and there’s no big difference in implementation, so it’s just a matter of personal choice.

In any case, here’s an alternative way to do the same job:

<body>
  <!-- Page body content HTML -->
  <footer>
    <!-- Footer content HTML -->
    <p>
      Copyright &copy; 2022 - <span id="current-year">2024</span> allaboutweb.co
    </p>
  </footer>
  <script>
    window.addEventListener('load', onLoad);

    function onLoad () {
      const currentYearEl = document.getElementById('current-year');

      if (currentYearEl) {
        const currentYear = new Date().getFullYear();

        currentYearEl.textContent = currentYear;
      }
    }
  </script>
</body>

So, what’s next? How can we make this code a little bit better?

As you can see, we put the automation script right before the closing </body>. Is it valid? Yes, but that is not considered as best practice.

What we can to is move the script into the <head /> tag. That is a bit better but having it as a separate file would be even better.

Let’s say we have the following file structure:

- root
  - src
    - js
    - css
  index.html

In the first step, we create a JS file named copyright-year-auto-update.js and put it into the root/src/js directory, with the file content:

window.addEventListener('load', onLoad);

function onLoad () {
  const currentYearEl = document.getElementById('current-year');

  if (currentYearEl) {
    const currentYear = new Date().getFullYear();

    currentYearEl.textContent = currentYear;
  }
}

As you can see, we don’t use the <script /> tag here, because it’s not an HTML file anymore.

After that, we need to link the file to the index.html <head /> tag:

<head>
  <!-- HEAD content -->
  <title>How to Automatically Update Copyright Year. Complete Guide</title>
  <script src="/js/copyright-year-auto-update.js" type="text/javascript"></script>
</head>

Now, we import the script content from the /js/copyright-year-auto-update.js file that we’ve just created, instead of mixing it up with HTML code.

You’re probably reading this article because you want to find a way to dynamically change the copyright year, and I’m pretty sure you’ve already seen some solutions over the Internet. The most popular one is a script that uses document.write browser API.

Well, that’s not the best way to do the task. Why? Let’s ask the HTML specification.

Here is what it says:

This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string ). In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. Users agents are explicitly allowed to avoid executing script elements inserted via this method. And to make matters even worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

Simply put: if you use this feature, at best auto-update won’t break anything, and at worst you might end up with bugs, errors or even crashes.

In my opinion, the potential risks are not worth the potential benefits in this particular case.

By the way, here’s an example of the code snippet I just mentioned:

<p>
  &copy;
  <script>document.write(new Date().getFullYear())</script>
  John Doe. All rights reserved.
</p>

Does it work? Yes!

It calculates the current year new Date().getFullYear() and injects the result document.write(new Date().getFullYear()) directly into the HTML document.

Should you use it? It’s up to you.

At the end of the day, you might not experience any problem and you’re already aware of potential threats.

Differences Between Methods: Window load event vs. “document.write”

So, what is the difference between Window load event code snippet and the one with the document.write method?

When we use the load event window.addEventListener('load', onLoad); the copyright year updates as soon as the whole page has loaded. It means the old year value renders first, and right after, the year changes to the actual one. This transition happens immediately, so users most likely won’t notice it.

element.innerHTML operates on a specific part of an HTML document, while document.write - on the entire HTML document, it can completely replace it and bring security issues while a page is loading, which makes it hard to debug. The copyright notice is part of the footer block which appears on every page of a website. So, solving a small problem using “document.write” might become a big problem for the whole website if this API brings side effects.

The web development landscape is diverse and all possible cases can’t be covered comprehensively in one article.

  1. Consider Hiring a Software Engineer. If you’re not tech-savvy, hiring a software engineer can be a smart choice. They can tailor a solution to your specific needs and ensure a seamless update of the copyright year.

  2. Exploring AI-Powered Tools: Alternatively, you can harness the power of AI tools like ChatGPT. AI can help with coding tasks, making it a viable option. When using AI, remember to be clear and specific in your requests, providing all necessary details. Here’s a prompt example:

    I have a website built using Squarespace, and I’ve added a copyright notice to the footer using a Custom code block to apply custom styles. I’ll give you the code I use. Extend it to make the copyright year update automatically considering Squarespace API specifics.

    { Put your code here }

The easiest way to auto-update the copyright year in WordPress is to install the Dynamic Copyright Year plugin. You don’t need to do anything else as soon as the format of your copyright notice matches the one in the plugin description.

You can use the Auto Copyright Year Updater plugin as an alternative but it requires using the Shortcode block, which might be problematic sometimes.

If you are skeptical about installing yet another plugin, I have a solution for that, you can find it in the guide below.

Detailed guide (plugins + custom HTML): How to Automatically Update the Copyright Year in WordPress

In Wix, the copyright year can be automatically updated with Wix Velo API in 3 steps:

  1. Create a copyright notice with the copyright ID
  2. Enable Development Mode and set up the $w.onReady(() => { ... }) listener with the automation script
  3. Use $w('#copyright') to find and get the copyright notice HTML element and update its text with the current year value new Date().getFullYear()

Step-by-step process described in this guide: Wix Copyright Footer. Add, Edit and Auto Update the Year

TThere are three ways to add custom code to change the copyright year in Squarespace dynamically:

The best option is to implement a copyright notice with Code Block, where you can combine CSS styles, HTML code and JS code with the current year calculation in one place.

Detailed guide: Squarespace Copyright Footer. Add, Edit, Auto Update the Year

In order to dynamically change the copyright year, you need to have a paid plan that provides the code customization feature. Navigate to the site Settings, then Custom code and put the code snippet from the guide below into the Header code text area.

Detailed guide: How to Automatically Update the Copyright Year in Webflow

To automatically update the copyright year in Blogger, remove the default copyright notice and create a new HTML/JavaScript gadget with custom HTML code with JS automation script.

You can find the code snippets and detailed explanation of how to implement it here: Blogger Copyright Footer. Add, Edit and Auto Update the Year

In order to change the copyright year dynamically in Weebly, you need to add the Embed code block to the site footer, then click on the Edit Custom HTML button and add copyright notice HTML code with JS script that calculates the current year.

However, a paid plan is required to be able to edit the footer block. There’s a way to bypass this limitation, you can read more about in this guide: How to Automatically Update Copyright Year on Weebly

As I mentioned earlier, modern web development is based on heavy usage of different frameworks. They aim to simplify the development process. You may see it in the examples below, auto-updating logic is way more primitive than pure HTML and JavaScript.

Dynamic Copyright Year in React / NextJs / GatsbyJs

Implementation file: CopyrightNotice.tsx

import React from 'react';

const CopyrightNotice = () => {
  const currentYear: number = new Date().getFullYear();

  return <p>Copyright &copy; 2022 - {currentYear} allaboutweb.co</p>;
}

export default CopyrightNotice;

Usage file: Footer.tsx

import React from 'react';
import CopyrightNotice from 'components/CopyrightNotice';

const Footer = () => {
  return (
    <footer>
      <CopyrightNotice />
    </footer>
  ); 
}

export default Footer;

Implementation file: copyright-notice.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "copyright-notice",
  templateUrl: "./copyright-notice.component.html",
})

export class CopyrightNotice {
  currentYear = new Date().getFullYear();
}

Implementation file: copyright-notice.component.html

<p>Copyright &copy; 2022 - {{ currentYear }} allaboutweb.co</p>

Usage file: footer.component.html

<footer>
  <copyright-notice />
</footer>

Implementation file: CopyrightNotice.vue

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
    };
  },
};
</script>

<template>
  <p>Copyright &copy; 2022 - {{ currentYear }} allaboutweb.co</p>
</template>

Usage file: Footer.vue

<script>
import CopyrightNotice from "/components/CopyrightNotice.vue";

export default {
  components: {
    CopyrightNotice,
  },
};
</script>

<template>
  <footer>
    <CopyrightNotice />
  </footer>
</template>

Implementation file: CopyrightNotice.svelte

<script>
  const currentYear = new Date().getFullYear();
</script>

<p>Copyright &copy; 2022 - {currentYear} allaboutweb.co</p>

Usage file: Footer.svelte

<script>
  import CopyrightNotice from "./CopyrightNotice.svelte";
</script>

<footer>
  <CopyrightNotice />
</footer>

Implementation file: CopyrightNotice.astro

---
const currentYear = new Date().getFullYear();
---

<p>Copyright &copy; 2022 - {currentYear} allaboutweb.co</p>

Usage file: Footer.astro

---
import CopyrightNotice from "./CopyrightNotice.astro";
---

<footer>
  <CopyrightNotice />
</footer>

Usage file:

<footer>
  <p>Copyright &copy; 2022 - <?php echo date('Y'); ?> allaboutweb.co</p>
</footer>

Implementation file: functions.php

function currentYear() {
  return date('Y');
}

add_shortcode('year', 'currentYear');

Usage file:

<footer>
  <p>Copyright &copy; 2022 - [year] allaboutweb.co</p>
</footer>

Summary

Automatically updated copyright year is a small part of automation that a little simplifies the website owner’s life. It’s a relatively easy task that shouldn’t take more than 10 minutes. However, there’s room for mistakes and for the sake of optimization, you may bring problems instead of benefits if you do it wrong (use of document.write).