I’ve been tinkering with some under the hood updates to one of my favorite WordPress Calling Card themes, in fact it was the first one ever, WP-Dimension.
I’ve not done much to these themes in a long while (like maybe pre-pre-pre-pre pandemic) but was motivated by a rare but welcome issue submitted to the GitHub home.
Fred asked there
since the last WP update my website goes black.
Looks like a problem with “body-is.loading”try to hit bruitdavril.fr and reload the page if it appears (reloading makes it black).
https://github.com/cogdog/wp-dimension/issues/9
any idea ?
I of course went to check the site and got immediately distracted by how beautiful Fred had set up this home page for a music studio outside of Paris
I could not find an issue in Chrome but definitely saw it in Firefox, where a reload came back to a black page. The console reported an error of Promised response from onMessage listener went out of scope which told me… not much.
But I had an inkling as the theme has based on the HTML5Up Dimension template I had started with when I first crafted the theme in 2017. I do not see any kind of versioning indicated in the HTML5UP themes but on inspection of the index.html source code in a new version I saw that it was using 2 different JavaScript libraries than the one I had built off of.
I downloaded the new file, and using one of those amazing features of BBEdit, the editor I have used without regret for all web pages I made since 1992, I used the built in diff tool (It’s under the Search menu and then Find Differences) I could compare the new index.html to the one in the Dimension template I had kept locally when I made the theme. Luckily almost nothing structurally was changed in the template, mainly it used new ones called breakpoints.min.js and browser.min.js in lieu of one strange one in the old version called skel.js.
My hunch was that some jQuery called on the page loading in the old files was not kosher. Sure enough, when I made the test changes locally and also on my own calling card using the theme, it seemed to avoid the glitches Fred reported.
But a bunch of CSS was off kilter. This was sadly because I had customized the CSS in the original assets/css/main.css file so I did some dissection to move anything that was custom to the child theme CSS. It took a bit of fiddling to get the background image working correctly (unlike the original HTML5Up that uses a static file for this image I set it up to use the one WordPress lets you set in the customizer as the Header image.
Another advantage of the new version is that inside it uses FontAwesome 5 for the icons you can add to buttons, which my theme offers for each “box” so you can tailor the return buttons to your iconic tests.
The advantage here is you can ever load multiple header images and use the WordPress Customizer option to load random one, this is how my site plays at http://cog.dog/
I updated the GitHub version of WP-Dimension – it would help if anyone willing to so so would check on their own site, I am worried slightly that I overlooked some other CSS issues as the HTML5Up Dimension template has a lot of flex-box stuff that I marginally (like margin: 1px) understand.
If I don’t hear soon, I will nudge Reclaim Hosting to push out updates from the versions they offer from the One Click installer and maybe get the OpenETC to update theirs too.
As far as keeping the themes updated, I recommend mostly using WP-Pusher plugin so you can get (or grab in one click) all theme updates done when I update them in GitHub.
I probably should circle back and make similar updates for WP-Big Picture, WP-Highlights, et al.
Thanks Fred! I get a charge when someone reaches out with a suggestion or even a bug, but moreso, when I get a chance to see what someone has created with one of these themes.
Feature Image
