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 manage Session in Magento

Session in Magento can be implemented and managed by one of the following way

  1. File system.
  2. Database.
  3. Memcached.
  4. tmpfs Filesystem.

Out of these 4 options, 2 options are available while installing Magento from which File system is by default selected.

How to Add, Retrieve and Delete (unset) a Magento session?

  1.  Add.
    Syntax to add Magento session

    Mage::getSingleton(‘{{type}}/session’) ->set{{SESSION_NAME}}(‘VALUE’);

    For  e.g.

    Mage::getSingleton(‘core/session’) ->setCompanyName(‘Trimantra’);

    Here type can be core, customer, checkout… Etc.

  2. Retrieve.
    Syntax to get/retrieve Magento session

    Mage::getSingleton(‘{{type}}/session’) ->get{{SESSION_NAME}}();

    For  e.g.

    Mage::getSingleton(‘core/session’) ->getCompanyName ();

    Here type can be core, customer, checkout… Etc.

  3. Delete / Unset Session.
    Syntax to delete / unset Magento session

    Mage::getSingleton(‘{{type}}/session’) ->uns{{SESSION_NAME}}();

    For  e.g.

    Mage::getSingleton(‘core/session’) ->unsCompanyName ();

    Here type can be core, customer, checkout… Etc.

Rakesh Gangani
Magento  Developer

Create a Custom config file for Codeigniter

By default, CodeIgniter has one primary config file, located at “application/config/config.php
What if we want to have a custom configuration file? What if we want to create custom config array with desired name?
Codeigniter allows a developer to create custom file but developer has to define values with $config array developer cannot define a custom variable or array inside this new file and use it

$this->message->item(‘msg_cn_welcome’);

By doing this developer will get an error – “application/config/custom.php file does not appear to contain a valid configuration array.

Well to over come with this, I have created a customized message configuration file that will store all messages at one place. This article will help you to create your own custom config files.

At the end of this article downloadable packages are available for complete codeigniter v2.1.4 with customized files and only customized files.

Step 1: Create your config file.

I have created a file called message.php in “application/config/” directory. This file contains a config array named “message”. Define as much as data in $message array, that you would like to access.

$message[‘msg_cn_welcome’] = “Welcome to CodeIgniter!”;

Step 2: Create a Class

Create a Message Class in “/system/core/ “. This is going to be a core class as it will be auto loaded. Define a Method inside this class to perform a desire action. With respect to Message class, I have define a method calleditem. Item function will get the value from $message array and will return it to the caller function.
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
/**
* CodeIgniter
*/
class CI_Message { var $message = array();
var $is_loaded = array();function CI_Message()
{
$this->message =& get_message();
log_message(‘debug’, “Message Class Initialized”);
}

function item($item, $index = ”)
{
if ( ! isset($this->message[$item]))
{
return FALSE;
}

$pref = $this->message[$item];

if ( isset($index) OR is_array($index))
{
if(is_array($index))
{
for($i=1; $i <= sizeof($index); $i++)
{
$pref = str_replace(‘%V’.$i,$index[$i-1],$pref);
}
}
else
{
$pref = str_replace(‘%V’,$index,$pref);
}
}
return $pref;
}
}

Step 3 : Create a reference function to load this new config file.

Now create a reference function get_message in “Common.php” file located at “/system/core/ “.
This function will be responsible to load message.php config file and read $message array and its values. Here is the code block.
/**
* Loads the main message.php file
* Added By : Pinal Desai
* @access private
* @return array
*/
function &get_message()
{
static $main_msg; if ( ! isset($main_msg))
{
if ( ! file_exists(APPPATH.’config/message’.EXT))
{
exit(‘The configuration file message’.EXT.’ does not exist.’);
}require(APPPATH.’config/message’.EXT);

if ( ! isset($message) OR ! is_array($message))
{
exit(‘Your Message file does not appear to be formatted correctly.’);
}

$main_msg[0] =& $message;
}
return $main_msg[0];
}

Step 4 : Load the Class

Now one thing is remaining, which is; to load a Message class. To load this customized class; add following code block to “CodeIgniter.php” file located at “/system/core/ “.

/*
* ——————————————————
* Load the Message class
* ——————————————————
*/

$EMSG =& load_class(‘Message’, ‘core’);

Step 5: Use the custom cofig file

Ready to use newly created config file and array. Following code will show the simple usage.

echo $this->message->item(‘msg_cn_welcome’);

Download DEMO Package:

Complete Codeigniter v2.1.4: Download Now
Only Customized Code and Files : Download Now

Article by: 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