WordPress Admin Notifications in the Wrong Places

We had a very interesting bug we found with WordPress the other day. If you customize a page within the WordPress admin and use, say, h2 tags, you may notice your notifications get messed up. They may appear in odd places of your HTML. That’s because of how WordPress decides to append that information. Here’s the WordPress JavaScript code found in ~/wp-admin/js/common.js:


$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
$('div.updated, div.error').not('.below-h2, .inline').insertAfter( $('div.wrap h2:first') );


So what’s this mean? If you use a div with class wrap and an h2 anywhere but at the very top of your page, your notifications are going to be embedded in the wrong places. Notifications are those alerts or warnings that _SHOULD_ appear at the top of the page.


So how do you avoid this mess? With a hack of course. Notice this line of code of the ReduxFramework:


echo "<div class="wrap"><h2></h2></div>"; // Stupid hack for WordPress alerts and warnings


And then voila. Put that at the top of your page and alerts will stay where they should be.


An annoying hack, but it works. Hopefully this will help other devs. Sure wish I could have found a post ANYWHERE about this. Haha. Now you can.

About The Author
Dovy Lead dev of Redux and all-around WP sensei.

Leave a Reply

Your email address will not be published. Required fields are marked *