WordPress Pass PHP Variable and Values to JS Theme or Plugin

The beautiful function wp_localize_script() was built for l11n, however its found as a method for carrying over server-side values into client-side JS.

Your values are now available in your .js file:

console.dir(my_theme_data);

Currently using this in a React theme I’m building for WordPress.

This can also be done with something like:

Responsive Height, Maintain Ratio

Say you have an element #banner with a background-image. On a responsive design that’s width:100%; you’ll notice your image will be auto croped by the viewport change. The solution is simple: background-size: cover; but a pain that follows is the height of the element will not scale down or up with the width change, leaving this weird empty vertical gap or a very cropped image.

Here’s a fix to figure out and change the height end_h based on the current window width, keeping background-image ratio making it responsive/scalable:

This resize happens when your script is loaded, as well as on any browser resize event.