Customizing The Media Upload Page In WordPress For Clients

By September 22, 2020Web Development
wallydavid.cm development

Something that is a constant battle with clients is explaining over and over on a weekly basis why you can’t take a 25MB HD image of your dog from your iPhone and upload it as a hero image to your blog post.

You can fiddle the the php.ini and install all kinds of image compression plugins, but at the end of the day average people just aren’t as technical as developers. If you give them a 2MB upload limit — they will kill their bandwidth and blogroll with a ton of 2MB images. Even though all of them could have been under 200kb probably.

What I’ve found is that little helpful reminders of conversations or tips & tricks links at the top of pages really help. Here are two ways to nudge clients into doing image uploads right.

INLINE MESSAGE directly in the uploads.php file.

I’ll say upfront that this is not the best way to do this. However, the reason I do this sometimes is because I use a function to disable plugin and theme cross-selling and advertising nags globally in WordPress. I also hide all the WordPress notification cruft that clients don’t need to see in the back end. So rather than inserting this notice using a function, I just edit the upload.php file. This is an easier – but dirtier hack. The downside to this being, if you update WordPress, the uploads.php gets written over along with your code.

To start – Head to the wp-admin folder in your installation directory and open the upload.php file. Head to line 96 and look for the space right before <hr class=”wp-header-end”>.

Paste something like this:


<div style="margin-top: 20px; border: 1px solid #cccccc; padding: 15px; background: #0073AA; border-radius: 5px; color: #ffffff;">Reminder: Image sizes for SLIDERS need to be no wider than 1900px.</div>
<div style="margin-top: 5px; margin-bottom: 20px; border: 1px solid #cccccc; padding: 15px; background: #0073AA; border-radius: 5px; color: #ffffff;">All images should be under 500kb max. Try <a style="color: #fbbc03;" href="https://pixlr.com/x/" target="_blank" rel="noopener">Pixlr</a> to resize images. Import image &gt; Choose Save &gt; Quality MED.</div>

Save the file and preview the media uploads section now. Edit the messages to say whatever you want.

AS a PLUGIN

Here is the second and (probably) the correct way. Using a function to select the page then echo out the messages as WordPress notices. You can update your WordPress installation and not write over the uploads.php file this way. The only draw back to this is, you can’t hide the mind boggling amount of upsell-nags from themes and plugins using a site wide function to disable all nags and warning because you’ll disable these messages to your client too.


<?php
/**
* @package        Media Notice
* @version        Version 1.0
* @category      Plugin
* @author              Wally David
*
* Plugin Name:      Media Notice
* Author:        Wally David
*
* Description:      Added a notice to the media gallery about image cropping size.
*
* Version:        Version 1.0
* License:             GPL v3
* Requires at least:   4.8
* Tested up to:        5.2.3
*/

function general_admin_notice(){
    global $pagenow;
    if ( $pagenow == 'upload.php' ) {
         echo '<div class="notice notice-warning">
             <p>Reminder: Image sizes for SLIDERS need to be no wider than 1900px.</p>
         </div>';
         echo '<div class="notice notice-warning">
             <p>All images should be under 500kb max. Try <a style="color: #4284F5;" href="https://pixlr.com/x/" target="_blank">Pixlr</a> to resize images. Import image > Choose Save > Quality MED.</p>
         </div>';
    }
}
add_action('admin_notices', 'general_admin_notice');

?>

DOWNLOAD THE PLUGIN CODE HERE