WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to create a gray scaled image of the image i upload. I have been able to upload the image and create the gray scaled version by using this code:

function bw_images_size() {
    $crop = get_option('thumbnail_crop')==1 ? true : false;
    add_image_size('thumbnail-bw', '', '', $crop);

function bw_images_filter($meta) {
    $file = wp_upload_dir();
    $file = $file['basedir'] . '/' . $meta['file'];

    list($orig_w, $orig_h, $orig_type) = @getimagesize($file);

    $image = wp_load_image($file);
    imagefilter($image, IMG_FILTER_GRAYSCALE);

    //imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
    switch ($orig_type) {
        case IMAGETYPE_GIF:
            $file = str_replace(".gif", "-bw.gif", $file);
            imagegif( $image, $file );
        case IMAGETYPE_PNG:
            $file = str_replace(".png", "-bw.png", $file);
            imagepng( $image, $file );
        case IMAGETYPE_JPEG:
            $file = str_replace(".jpg", "-bw.jpg", $file);
            imagejpeg( $image, $file );

    return $meta;

my issue is when i try and output the image in the template I just get a duplicate of the coloured version. I out the images like this:

                    if ( has_post_thumbnail() ) {
                        <div class='colour_testimonial'>
                            <?php the_post_thumbnail(); ?>
                        <div class='bw_testimonial'>
                            <?php the_post_thumbnail('thumbnail-bw'); ?>

Any ideas why my I can't output my black and white image?

Thanks in advance.

share|improve this question
up vote 0 down vote accepted

You have to add the metadata information with the new b&w thumbnail:

$meta['sizes']['thumbnail-bw'] = array(
  'width' => $meta['width'], 
  'height' => $meta['height'],
  'file' => $file

after generating the new image (after the switch block).

There 's also a plugin, called Grayscale, that does exactly what you need.

share|improve this answer
Hi thanks for replying. I tried adding your bit of code and i got it to work but i found out that wp_load_image() is depreicated. I tried changing it to using the new function but i can't get that to work so i tried the plugin but that also failed :( – asaunders Nov 25 '13 at 12:39
You're welcome! To avoid using wp_load_image you can call wp get image editor that returns a WP Image Editor object. I suggest you to extend the WP_Image_Editor_GD class to add the b&w functionality. – Lucio Coire Galibone Nov 25 '13 at 13:02
Hi Thanks again. Do you have any examples I could work from? – asaunders Nov 25 '13 at 13:06
Not too much :( You can see the WP_Image_editor_GD class source and its methods. rotate or flip methods are not so far away from what you're trying to do. – Lucio Coire Galibone Nov 25 '13 at 13:12
Okay thanks. I will give that a look and see what i can do. thanks for helping – asaunders Nov 25 '13 at 13:18

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.