How to Automatically Update Your Website's Footer Copyright Year

Want to learn how to update your website's footer copyright year automatically? This copy and paste code snippet is for you!

How to Automatically Update Your Website's Footer Copyright Year
Photo by Danil Aksenov / Unsplash

Every year countless website owners log into their dashboards to update their website footer with a new copyright year like this one:

Screenshot of thechurchfactory.com's Footer

If you haven't already now is the perfect time to make it dynamic with JavaScript! (😱 Don't worry, it's copy and paste βœ‚)

To do that we're going to drop in a bit of JavaScript. If you haven't heard of it before, JavaScript is a coding language that's used to "script" things in web browsers. It can be added virtually anywhere that allows you to insert HTML.

Let's break down what the following code does:

  • Opens the "<script>" tag to tell the browser we're giving it some JavaScript
  • Defines a new constant that contains the current date on the user's device
  • Write or prints the full year as text
  • Closes the script tag by saying "</script>" so that the browser knows to start displaying your regular webpage again

Pretty simple, right?

If you just want to copy and go here's the code to do that (just hover over the code and press the "copy" button πŸ–±), but I'm going to share a few more examples in a moment... Β 

<script>
    const copyrightDate = new Date();
    document.write(copyrightDate.getFullYear());
</script>

β€œTalk is cheap. Show me the code.”
― Linus Torvalds
Photo by Mohammad Rahmani / Unsplash

With a Business Name

You may also want to display your church name like this:

If so just copy this and replace Acem Inc. with your chosen name. The quotes are necessary so don't remove the quotes. πŸ™‚

<script>
	const copyrightName = "Acem Inc.";
    const copyrightDate = new Date();
    document.write("Copyright "+ copyrightName + " " + copyrightDate.getFullYear());
</script>

With an Emoji

Maybe you want to use an emoji! Β© Just insert &copy; and you're good to go!

Or copy this example:

<script>
	const copyrightName = "Acem Inc.";
    const copyrightDate = new Date();
    document.write("&copy; " + copyrightName + " " + copyrightDate.getFullYear());
</script>

With All Rights Reserved

Some websites also want to show All Rights Reserved. It's open for discussion if adding it actually provides any legal protection or not. But you may choose that it's better safe than sorry!

And here's the code! πŸ‘©β€πŸ’»

<script>
	const copyrightName = "Acem Inc.";
    const copyrightDate = new Date();
    document.write("Copyright "+ copyrightName + " " + copyrightDate.getFullYear() + " | All Rights Reserved");
</script>
UI Wireframe Saturday
Photo by Med Badr Chemmaoui / Unsplash

For some more creative footer designs, head on over to this Awwwards post which highlights 25 Excellent Creative Website Footers. Awwwards is a great place to find web design trends and learn techniques. If you enjoy web design as much as me you'll surely enjoy it!

25 Excellent Creative Website Footers
From a Web Design Patterns perspective, the Footer is an essential and often undervalued element, which provides a quick entrance to the architecture of contents,...