So, I keep expanding my bag of tricks for WordPress, and one of the tricks I have is a media uploader that be placed in a meta box or in widget settings by just adding a couple lines of HTML, jQuery does the rest from there. The problem I ran into was when a new widget was added the
click events were not bound to them, which is because the html for the widget is dynamically added, but you already knew that.
I dug into the WordPress jQuery code (/wp-admin/js/widgets.js to be exact) and found this:
This will allow you target the newly created widget with a function you’ve created:
Congrats, you have one less white hair today.
The project I am working on has several templates, some which do not use the main WordPress editor. For those templates, I typically hide the editor via jQuery’s
The problem I ran into was that when editing a page using a template that did not use the editor, then switching the template to one that used the editor, the editor would be broken until the user scrolled, resized the window, etc. This is due to how WordPress 4.0 now resizes the editor window automatically to fit the content in it.
The trick to fix this is to turn the auto resizing off and on again, which fires off all of the auto resize functions. The methods are:
The longer explanation is below the gist.
First I get the elements I am watching or modifying, I then create the function that is going to flip the switch off and on again.
In the function I first see if auto resizing is even on, because if it isn’t, then you don’t need to do this. Next you can see that I have it set to wait 401ms, the reason for this is due to I am using
.slideDown(), which has a default time of 400ms, and I want it to fire after that.
I then listen for the change of the page template select box, and show/hide my editor as needed. I also flip the switch every time there is a change, which may be too much, but it shouldn’t affect any usability.
And that’s it. If you have a better way of doing some of the things, let me know.