Enable WebP Image Uploads in WordPress Easily
Explanation
To allow WebP image uploads in WordPress, you need to make a few tweaks to your site's settings. This code snippet helps you do just that by adding WebP support.
- Allow WebP Uploads: The first part of the code adds WebP to the list of file types you can upload. This means you can now upload WebP images just like any other image format.
- Display WebP in Media Library: The second function ensures that WebP images show up correctly in your media library. It checks if a file is a WebP image and sets the right properties so it displays properly.
- Add WebP Support: Finally, the code adds WebP to the list of image formats that WordPress can handle. This means WordPress can process WebP images just like JPEG or PNG files.
By using this code, you can seamlessly integrate WebP images into your WordPress site, making your images load faster and saving bandwidth.
Code
<?php
// Enable WebP image uploads in WordPress
// Allow WebP image uploads by adding the MIME type to the allowed file types
function wp_dudecom_allow_webp_uploads($mime_types) {
// Add WebP MIME type
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('mime_types', 'wp_dudecom_allow_webp_uploads');
// Ensure WebP images are displayed correctly in the media library
function wp_dudecom_display_webp_in_media_library($result, $path) {
// Check if the file is a WebP image
if (strpos($path, '.webp') !== false) {
$result['ext'] = 'webp';
$result['type'] = 'image/webp';
$result['proper_filename'] = $result['file'];
}
return $result;
}
add_filter('file_is_displayable_image', 'wp_dudecom_display_webp_in_media_library', 10, 2);
// Add WebP support to the list of image formats WordPress can process
function wp_dudecom_add_webp_support($extensions) {
// Add WebP extension
$extensions[] = 'webp';
return $extensions;
}
add_filter('wp_image_editors', 'wp_dudecom_add_webp_support');
?>Instructions
To enable WebP image uploads in WordPress, follow these steps:
File Location: Add the code to your theme's functions.php file or a custom plugin file.
Prerequisites: Ensure you have access to your WordPress theme files or the ability to create a custom plugin.
Implementation Steps:
- Access Your WordPress Files:
- Log in to your WordPress admin dashboard.
- Navigate to Appearance > Theme Editor if editing
functions.php. - Alternatively, use an FTP client or your hosting file manager to access your WordPress files.
- Edit the
functions.phpFile or Create a Plugin:- If using
functions.php, locate and open the file for editing. - If creating a plugin, create a new PHP file in the
wp-content/pluginsdirectory and open it for editing.
- If using
- Add the Code:
- Copy and paste the provided code snippet into the file.
- Ensure the code is placed within PHP tags if editing a new plugin file.
- Save Changes:
- Save the changes to the
functions.phpfile or your custom plugin file.
- Save the changes to the
- Verify Functionality:
- Go to your WordPress admin dashboard.
- Navigate to Media > Add New and try uploading a WebP image.
- Ensure the image uploads successfully and displays correctly in the media library.
By following these steps, you can enable WebP image uploads on your WordPress site, enhancing image performance and reducing bandwidth usage.
If you need assistance with implementation or require more advanced functionality, consider reaching out to wp-dude.com for expert help.