Run JavaScript on Load and Resize in WordPress

Some layouts in WordPress need a value that only the browser knows, such as the height of the footer, and the value changes when the window is resized. This snippet runs JavaScript on load and resize, without jQuery, and passes the result to CSS as a custom property.

The example leaves room under the content for a fixed footer on wide screens. The breakpoint lives in CSS, so the JavaScript only measures.

The snippet

JavaScript, for the footer:

(function () {
	'use strict';

	// ===== Config =====
	var footerSelector = '.footer'; // The element to measure.
	// ===== End of config =====

	var root = document.documentElement;

	// Put the values you need into CSS variables; CSS decides what to do with them.
	function dpcUpdate() {
		var footer = document.querySelector(footerSelector);
		root.style.setProperty('--dpc-footer-height', (footer ? footer.offsetHeight : 0) + 'px');
		root.style.setProperty('--dpc-viewport-width', root.clientWidth + 'px');
	}

	// Resize fires many times per second: update at most once per frame.
	var queued = false;
	function dpcQueueUpdate() {
		if (queued) {
			return;
		}
		queued = true;
		window.requestAnimationFrame(function () {
			queued = false;
			dpcUpdate();
		});
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', dpcUpdate);
	} else {
		dpcUpdate();
	}
	window.addEventListener('load', dpcQueueUpdate); // Images and fonts can change heights.
	window.addEventListener('resize', dpcQueueUpdate);
})();

CSS, for the header:

/* Space under the content for a fixed footer, on screens wider than 991px. */
@media (min-width: 992px) {
	.main {
		margin-bottom: var(--dpc-footer-height, 0px);
	}
}

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions with Template set to All, and tick Header and Footer under Script location. Set Header Mode to CSS and paste the CSS, set Footer Mode to Javascript and paste the JavaScript, then publish. Scripts Organizer prints Header and Footer code only with the Conditions trigger on the front end, not with Everywhere.

The script runs in the footer, after the elements it measures are on the page.

How it works

dpcUpdate() reads the height of the element in footerSelector and the page width, and writes them to --dpc-footer-height and --dpc-viewport-width on the <html> element.
It runs once when the page is ready, again on load (images and web fonts can change heights) and on every resize.
Resize fires many times per second, so updates are queued with requestAnimationFrame and run at most once per frame.
CSS reads the variables with a fallback, var(--dpc-footer-height, 0px), so the layout is fine before the script runs and when JavaScript is off.

The older version of this post needed jQuery, which block themes do not load, set the styles from JavaScript with the breakpoint in JavaScript, and ran its code on every resize event.

Customise it

Your elements: change footerSelector and the .main selector in the CSS to the classes in your layout.
More values: add lines to dpcUpdate(), for example the header height for a sticky header offset, and use them in CSS with var().
Window width minus a fixed amount needs no JavaScript at all: width: calc(100% - 480px); in CSS does it.
For other ways to react to the screen size see jQuery Breakpoints on load and resize.

Gotchas

If the measured element can change height without a resize, for example an accordion in the footer, use a ResizeObserver on it and call dpcQueueUpdate() from it.
Pick a selector that matches one element. querySelector() uses the first match.
Keep this out of the block editor: Conditions code only loads on the front end, which is what you want here.

In the Scripts Organizer library Import it with one click from Scripts Organizer.