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.

1st 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:

[php]

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 );
}

[/php]

 

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:

[php]

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;
}

[/php]

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:

[php]

/**
* 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;
}

[/php]

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:

[php]

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 );
}
}
}
}

[/php]

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

How to setup multiple site in wordpress

This new feature is being called Network or Multi-site option.

In WordPress By default this feature is disabled.
If you want to use this option in your WordPress, you need to enable it.To enable this feature, simply open your wp-config.php file located in your WordPress root folder.

Then add the following line anywhere in the file:

define(‘WP_ALLOW_MULTISITE’, true);
Refer to the attached picture.

 

Now to create multiple blog site follow below mentioned steps:

In the wordpress admin section:

  • Go to Tools > Network Setup. You can see screen as the attached image.

2

  • Press Install to configure network setup and follow the instructions on the screen to finish the network setup.

3

  • Once you finish the network setup you’ll have the Super Admin panel(Network Admin) activated on the admin screen.
  • You can find “Network admin” at top right, as you can see in the screenshot.
  • Clicking on it, You get Network Admin Dashboard

5

  • Now to start multi site setupGo to Sites > Add New site (for the secondary domain).
  • Now we’ll have to set it up as a subdomain and we’ll later map it to the main domain. Let’s create it as primarydomain/secondary/
  • Browse to this site and verify that everything is fine.

 

By, Sonal L Khunt