Make your WordPress Theme Retina Ready

Retina displays quickly becoming the standard need on phones, tablets and laptops.  Retina display support is for giving great visual impact to viewers by serving high-res images to hi-res devices.

There are plugin available for regular WordPress users that will add retina support to their site. Here are my recommendations.

1. WP retina 2x
2. Retina image support

Both Plugins has different approach to add retina support, yet they are nearly following the same methodology, a detection of retina script and implement retina ready image creation functions.

Here is the Step-By-Step tutorial to add retina display support in any WordPress Theme.

1^st of all, download “retina.js” script. I would recommend using retina.js by Imulus. It is light weight loads pretty fast.  Click here to Download retina.js

Step 1: Enqueue the script.

Copy retina.js file into your theme’s /js folder. It needs to be in the right place in order to enqueue it.

Add the following code snippet to your theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'retina_support_enqueue_scripts' );
/**
 * Enqueueing <span class="skimlinks-unlinked">retina.js</span>
 *
 * This function is attached to the 'wp_enqueue_scripts' action hook.
 */
function retina_support_enqueue_scripts() {
    wp_enqueue_script( 'retina_js', get_template_directory_uri() . '/js/<span class="skimlinks-unlinked">retina.js</span>', '', '', true );
}

Step 2: Add functions to create the higher quality images.

Retina Script will search for the suffix @2x in order to detect the Hi-Resolution Images. You need to make sure that each time an image is uploaded, a higher quality version is created and stored with @2x added to the filename.

To create retina-ready image automatically whenever an image is uploaded, use wp_generate_attachment_metadata filter for hook.

Add the following code snippet to your theme’s functions.php file:

add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 );
/**
 * Retina images
 *
 * This function is attached to the 'wp_generate_attachment_metadata' filter hook.
 */
function retina_support_attachment_meta( $metadata, $attachment_id ) {
    foreach ( $metadata as $key => $value ) {
        if ( is_array( $value ) ) {
            foreach ( $value as $image => $attr ) {
                if ( is_array( $attr ) )
                    retina_support_create_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
            }
        }
    }

    return $metadata;
}

Next, you need to add function to create a retina-ready higher quality version. Add the following code snippet to your theme’s functions.php file:

/**
 * Create retina-ready images
 *
 * Referenced via retina_support_attachment_meta().
 */
function retina_support_create_images( $file, $width, $height, $crop = false ) {
    if ( $width || $height ) {
        $resized_file = wp_get_image_editor( $file );
        if ( ! is_wp_error( $resized_file ) ) {
            $filename = $resized_file->generate_filename( $width . 'x' . $height . '@2x' );

            $resized_file->resize( $width * 2, $height * 2, $crop );
            $resized_file->save( $filename );

            $info = $resized_file->get_size();

            return array(
                'file' => wp_basename( $filename ),
                'width' => $info['width'],
                'height' => $info['height'],
            );
        }
    }
    return false;
}

This function will create image with suffix @2x which will be having double the size of the image uploaded / thumbnails which are created.

Step 3:  Add a function to delete the higher quality images.

Add following code snippet into your theme’s functions.php file:

add_filter( 'delete_attachment', 'delete_retina_support_images' );
/**
 * Delete retina-ready images
 *
 * This function is attached to the 'delete_attachment' filter hook.
 */
function delete_retina_support_images( $attachment_id ) {
    $meta = wp_get_attachment_metadata( $attachment_id );
    $upload_dir = wp_upload_dir();
    $path = pathinfo( $meta['file'] );
    foreach ( $meta as $key => $value ) {
        if ( 'sizes' === $key ) {
            foreach ( $value as $sizes => $size ) {
                $original_filename = $upload_dir['basedir'] . '/' . $path['dirname'] . '/' . $size['file'];
                $retina_filename = substr_replace( $original_filename, '@2x.', strrpos( $original_filename, '.' ), strlen( '.' ) );
                if ( file_exists( $retina_filename ) )
                    unlink( $retina_filename );
            }
        }
    }
}

That’s Pretty much all you need to do to make your WordPress Theme retina ready.

If you already have complete site setup and live then also you can follow this tutorial. Once you place your code as mentioned above in 3 steps, you can run regenerate thumbnail plugin (http://wordpress.org/plugins/regenerate-thumbnails/) which will create @2x images for all the images uploaded on your site till date.

Pinal Desai