JavaScript: automatically update the year in your footer
Why This Matters
You spend weeks tuning the layout, fixing tricky bits of CSS, and agonising over button colours, yet it’s the tiny details that always come back to bite you. The year in your website’s footer seems harmless enough, but after January rolls round, how many of us actually remember to update it? Nothing says “I haven’t touched this site since the last leap year” like an out-of-date copyright. It’s a small oversight, but it quietly chips away at your credibility. Clients notice. New visitors notice. Even Google sometimes notices.
If you run more than one site, or oversee projects for clients, updating every single footer becomes a tired annual ritual. It sounds like a simple job until you realise you’ve missed one, and then a web-savvy client points it out. Wasted time, unnecessary emails, and yet another niggle on your to-do list in the new year.
Would you rather spend that energy actually shipping new work? Or, at least, save yourself from embarrassment?
Common Pitfalls
This is one of those issues that never seems urgent until you’re called out for it. The biggest misfires when people try to automate the footer year include:
- Editing every page manually: You do it in January (sometimes February) for “just a few pages,” only to find out months later there are more lurking in other folders or test pages.
- Assuming your CMS can do it for you (it can’t): Some hope Squarespace or WordPress will handle the year magically, but most themes don’t support automatic updates out of the box.
- Misplacing code snippets: People drop JavaScript in odd corners where it only works on some pages, or not at all, leaving some footers updated and others stuck in the previous year.
- Breaking the HTML: A bit too much tinkering with IDs or markup, and suddenly the year vanishes altogether.
- Platform quirks: Some template editors restrict where you can paste code, leading to frustration or invisible errors if you put scripts in the wrong spot.
It’s a silly thing to trip up on, but it happens all the time.
Step-by-Step Fix
There’s no magic, but there is a reliable process. Follow these steps and your footer will always show the correct year, updating on every page automatically.
1. Prepare your HTML footer
Open your website’s code editor, template panel, or wherever you normally edit your footer. You’ll need to add this line to show the copyright symbol, year, and whatever link or credit you want:
<p>
© <span id="currentYear"></span>
<a href="https://www.yourwebsite.co.uk" target="_blank">Website by You</a>
</p>
Replace the link and description as needed for your project. Resist the temptation to rename that id="currentYear"; talking back to code snippets always ends badly.
Pixelhaze Tip
Squarespace users: Drop this into a Footer Code Block if your template supports it, or your global header/footer section in site settings. If you’re on WordPress, check your footer.php or site-wide widget.
2. Add the JavaScript code
Time to teach your site what year it is. Pop this JavaScript anywhere your platform allows you to run scripts site-wide. Usually, that’s in a header, footer code injection, or after the footer HTML.
<script>
var currentYear = new Date().getFullYear();
document.getElementById("currentYear").innerHTML = currentYear;
</script>
That’s all you need. One variable, one line to update the HTML. No frameworks. No drama.
Pixelhaze Tip
If your website platform has a dedicated “header injection” panel (often found under Advanced or Custom Code), paste your script there. That ensures it loads on every page, not just some of them.
3. Test it everywhere
Don’t assume that because it works on your homepage, it’ll work everywhere else. Page builders and templates can load content in unexpected ways. Open your site’s other key pages, refresh, and check the footer. Make sure the year appears where you expect and isn’t missing, doubled-up, or showing a blank.
Pixelhaze Tip
Right-click, “Inspect”, and check for errors in the console if things go wrong. Most problems come down to a typo in the ID or the code running before the footer’s loaded (in which case put the script at the bottom of your page, after the HTML).
4. (Optional) Customise the look, not the span
You can add extra text, swap out the link, or tweak your CSS to style the year and link however you’d like. Just avoid changing the <span id="currentYear"></span> part. That’s what your JavaScript uses.
Example:
<p class="copyright">
© <span id="currentYear"></span> MySite™. All Rights Reserved.
</p>
Pixelhaze Tip
If you want to add a copyright range (for example, 2017-2024), adjust your HTML like this:
© 2017-<span id="currentYear"></span>
This way you only update the “start” year if your business changes hands or rebrands.
5. Platform quirks and workarounds
Not every website builder works well with custom code. If you’re using a site host that limits JavaScript (Wix free plans, some legacy Blogger templates), test thoroughly or check their app store for built-in footer plugins.
Squarespace lets you use snippet code in header or footer sections. On WordPress.com, you’ll need a business plan or higher to access full code injection. On classic WP installs, you decide where code goes in your theme files or widget areas.
Pixelhaze Tip
If your platform won’t allow code injection, use a third-party footer include service, or make a recurring note to update the footer manually. It isn’t worth trying to force the system for this single detail.
What Most People Miss
People often notice the so-called “little things.” A broken navigation or missing image gets reported right away, but an outdated footer year quietly signals neglect for a longer period. You don’t get immediate feedback; you just get a vague sense that your site gets less trust.
Automating your footer year brings more consistent polish to your site and prevents recurring manual work. Take some time today to address these small edits, and you’ll save hours in the future (plus avoid a mild existential crisis every January).
A common mistake is only updating the homepage and missing sub-pages, hidden landing pages, or blog templates. Make sure you implement code in the global area rather than only on the page you’re working on.
The Bigger Picture
Solving this small detail introduces you to the benefits of automation. Each manual edit you replace with a one-line script is one less tedious admin job every year. The time saved on footers is time you can use to launch new ideas, write blog posts, or realistically, address the other tasks you may be postponing.
This minor improvement, repeated over time, has real impact. Your site looks better maintained, your brand feels sharper, and clients or visitors won’t worry they’re seeing a neglected site.
Even small changes like this help establish better habits for your workflow. Automate where possible, double-check what can’t be automated, and aim to make each year smoother than the last.
Wrap-Up
No need to nervously open each website on New Year’s Day to edit a silent “2023” into “2024.” Once you set up your automated year update, your footer keeps itself tidy every January without any fuss. This is a minor change with a surprisingly large impact on your brand’s appearance and—importantly—your peace of mind.
Put this system in place, and you won’t get called out for a stale copyright again.
“Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.”
Frequently Asked Questions
Where exactly should I put the JavaScript code if I use Squarespace/WordPress?
Squarespace: Use Settings → Advanced → Code Injection; paste the script into the Footer field.
WordPress (self-hosted): Edit the footer.php or use a plugin (like Insert Headers and Footers) to add site-wide scripts.
WordPress.com: Business plan or above required for code injection.
Can I customise the copyright text?
Of course. Adjust anything around the <span id="currentYear">, but don’t rename or remove that single span. The script needs it to work.
What if my site has multiple footers or custom templates?
Give each footer year span a unique ID (e.g., currentYear-blog, currentYear-store), then duplicate the script for each. Or use a JavaScript class selector for all instances.
Does this work with any website builder?
This works as long as your site supports adding custom HTML and JavaScript. Builders with locked-down free plans (Wix, Shopify Lite, Blogger) may not allow script injection, so check first.
What if next year I want to show a start year (e.g., 2015-2025)?
Just hard code the start year, then add the updated span for the current year, like this:
© 2015-<span id="currentYear"></span>
Why not just use a plugin?
Plugins are available, but for this job, a small snippet does the task with less overhead and fewer updates to manage. Simpler solutions mean there’s less to go wrong.
For web professionals, automations like this one save time, reduce stress, and keep clients satisfied. Fixing the footer year is a simple win—set it, forget it, and move forward.