Retina-Ready and Retina-Enable Your Theme in 4 Easy Steps

This will add Retina-ready support to your WordPress theme, and also Retina-enable your theme to create high resolution images upon uploading. (will create @2x retina images while you upload your regular images). This will make your theme detect screens that are Retina-Ready, and will show the higher resolution images to them. Regular screens will get your regular images.

1. Download the retina.js file from http://retinajs.com/.
2. Place the retina.js on your server. Really, that is the only file out of the package that you need.
3. Load the retina.js script:

   wp_enqueue_script('retina', get_template_directory_uri().'/YOUR-PATH-TO-YOUR-FILE/js/retina-1.1.0.min.js', array(), false, true );
   

   Edit the path above to your own file. Adding ‘true’ as the last parameter makes it load in the footer instead of the header.

4. Add the functions to cut retina-ready images from your regular images as you upload them. The following 3 functions will…
   • Check if the uploaded file is an image.
   • If it is an image, then it will create a retina-ready image for each size that your theme makes by default. The filenames will get the “@2x” suffix. If an uploaded image is too small for the the proper retina size to be cut, then it will not create it for that image.
   • Delete the retina-ready images if you delete the original image from the media library.

   /**
    * Check if the uploaded file is an image. If it is, then it processes it using the retina_support_create_images()
    * @uses smartestb_retina_create_images()
    */
   function smartestb_retina_attachment_meta( $metadata, $attachment_id ) {
       foreach ( $metadata as $key => $value ) {
           if ( is_array( $value ) ) {
               foreach ( $value as $image => $attr ) {
                   if ( is_array( $attr ) )
                       smartestb_retina_create_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
               }
           }
       }
       return $metadata;
   }
   add_filter( 'wp_generate_attachment_metadata', 'smartestb_retina_attachment_meta', 10, 2 );
   
   
   
   /**
    * Create retina-ready images
    */
   function smartestb_retina_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;
   }
   
   /**
    * Delete retina-ready images
    */
   function smartestb_delete_retina_images( $attachment_id ) {
       $meta = wp_get_attachment_metadata( $attachment_id );
       // Avoid error when uploading plugins, which appears to run 'delete_attachement'
       if( ! is_array( $meta ) ) {
             return;
       }
       $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 );
               }
           }
       }
   }
   add_filter( 'delete_attachment', 'smartestb_delete_retina_images' );
   
   

Note that this works as you upload images, so this will not automatically create retina-ready images of your existing images.