Skip to content

WordPress Grayscale Image Tutorial

WordPress Grayscale Image Tutorial

Any website should have images, which may significantly improve your WordPress site’s aesthetic appeal.

To get a more muted impression, you can want to sometimes reduce the color intensity of your photographs. WordPress grayscale graphics are one method of doing this. Exactly how to achieve it is what we’ll demonstrate in this piece.


What is Grayscale?

Grayscale, commonly referred to as black-and-white, is a color scheme that strips a picture of all color and presents it in various tones of gray. This may have a dramatic effect and enhance the creative or professional quality of a photograph.

Grayscale Images in WordPress

There are two ways to grayscale a picture in WordPress: a plugin or custom code. This is how you do it:


Option 1: Use a Plugin

Utilizing a plugin is the simplest approach to grayscale photos in WordPress. There are a number of plugins that can accomplish this, however we suggest the “WP Image Effects” plugin.


Here are the steps to follow:

  1. Install and activate the “WP Image Effects” plugin.
  2. Go to Media > Library in your WordPress dashboard and select the image you want to grayscale.
  3. Click on the “Edit Image” button.
  4. Click on the “Effects” tab.
  5. Check the box next to “Grayscale.”
  6. Click on the “Save” button.

That’s it! Your image is now grayscale.


Option 2: Use Custom Code

If you prefer not to use a plugin, you can grayscale images in WordPress using custom code. Here’s how:

  1. Open your theme’s functions.php file.
  2. Add the following code:


function grayscale_image($attachment_ID) {
    $image_url = wp_get_attachment_image_src($attachment_ID, 'full');
    $image_path = parse_url($image_url[0], PHP_URL_PATH);
    $image_abs_path = $_SERVER['DOCUMENT_ROOT'] . $image_path;
    if (!copy($image_abs_path, $image_abs_path . '.bak')) {
        return new WP_Error('error', 'Failed to backup image.');
    $image = imagecreatefromjpeg($image_abs_path);
    if (!$image) {
        return new WP_Error('error', 'Failed to create image.');
    imagefilter($image, IMG_FILTER_GRAYSCALE);
    if (!imagejpeg($image, $image_abs_path)) {
        return new WP_Error('error', 'Failed to save image.');
    return true;

add_action('add_attachment', 'grayscale_image');
  1. Save the file.

That’s it! Now, whenever you upload an image, it will be automatically grayscale.


To get a more muted impact and give your website a more polished appearance, grayscaling photos in WordPress might be a terrific option. You don’t need to have a high level of technical expertise to get this effect with the aforementioned alternatives. If you want to create WordPress Website / WordPress Services / Support you can check our services.

Featured Products

  • WordPress Themes

    Cresta – IT Solutions & Technology WordPress Theme

    $19 Buy Now
  • WordPress Themes

    Transca – Transportation & Logistics WordPress Theme

    $19 Add to cart
  • Fincatch - Banking, Finance And Fintech HTML Template Preview
    HTML Templates

    Fincatch – Banking, Finance And Fintech HTML Template

    $29 Buy Now

Recommended Posts

1 Comment

  1. Wow, marvelous blog layout! How long have you been running a blog for? you make blogging look easy. The full look of your website is excellent, as smartly the content!

Add a Comment

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

Shopping cart