Fixing Theme Issues with WordPress 4.8 Media Widgets

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.

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

27 May 2013

WordPress: 10 Years Young, What Does The Future Hold?

WordPress is now 10 years old. I started using wordpress 9 years ago – which means I joined the WordPress community early on. The reason I chose WordPress is simply because of the fabled 5 minute install process – I...
13 May 2010

6 Tips to Build Better WordPress Themes

If you want to make WordPress themes, for clients, to release for free or to sell, then there are a lot of factors you need to take into consideration. Below are some hints and tips that should help ease your...
01 Apr 2015

The State of WordPress Themes #wcldn

I recently spoke on a panel at WordCamp London 2015e. Lance – who used to be the Theme Team lead at WordPress.com – asked me if I wanted to speak on a panel with him at WordCamp London 2015. I’ve...
21 Mar 2014

How to Get Started With WordPress Theme Development

I was asked recently how to get into WordPress themeing and so I thought I would answer publicly. Perhaps my thoughts can help others.When I first started using WordPress things were much simpler. The default theme was an index.php and...
13 Oct 2016

Lessons Learned from 20 Theme Releases on WordPress.com

In 2007 I partnered with Darren Hoyt to release Mimbo Pro, one of the earliest premium WordPress themes. In 2012 Mimbo Pro was published on wordpress.com. Last week – on October 5th 2016 to be precise – my 20th theme...