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!
Every year countless website owners log into their dashboards to update their website footer with a new copyright year like this one:
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>
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 © and you're good to go!
Or copy this example:
<script>
const copyrightName = "Acem Inc.";
const copyrightDate = new Date();
document.write("© " + 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>
Footer Design Inspiration
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!
Awwwards