WordPress 4.8 has just been released and, whilst not a ground breaking update, it includes some nice features that make WordPress more pleasant to use.
One of the main areas focused on is some new widgets. There haven’t been any new core WordPress widgets added in years, and these ones are very welcome. The new widgets are an image widget, a video widget, and an audio widget. In addition the text widget now makes use of TinyMCE to add some extra control for users who don’t know HTML.
Problems and Solutions
Shortly after release I was alerted by the team at wordpress.com that a few of my themes didn’t play nicely with the new widgets. The issue is with ‘hidden’ sidebars. By this, I mean sidebars that start off hidden and then appear when a button is clicked. Any overlay or modal sidebars.
The problem is that when something is hidden javascript doesn’t know how big it is – and so positioning and sizing of elements can be (very) wrong. Videos in particular will probably be the wrong size, but the audio elements are also likely to have controls in the wrong place.
I then spent a few hours last weekend fixing the problem – with a few more
The code I used to fix this is below. It’s heavily commented to make it clear what’s going on. If you have any queries about any of it then I’d be happy to explain further.
This code should be placed inside the method that toggles the overlay visibility. It also requires jQuery in order to run.
As WordPress is getting more complex, and adding more features themes are also getting more complex. The days of creating a simple theme with an index.php and a stylesheet are long gone. To stand out you have to take care of details like this – which is something I am careful to do and why I still update all my themes – even the ones that are 10+ years old! 🙂
Thanks
Thanks to the theme team at Automattic who told me about the problem and helped me to fix it. In particular Laurel who was very patient in helping me with the debugging of a couple of elements.
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.