Mobile, iOS, Safari, IE browser detection using simple JS

This post is just for reference for when browser detections are required:


/*If handheld device such as mobile and tablets returns true, else false */
function isHandheldDevice() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
return true;
}
return false;
}


/*Simple: If safari on windows returns true, else false */
function isSafariOnWindows() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari/") !== -1 && // It says it's Safari
ua.indexOf("windows") !== -1 && // It says it's on Windows
ua.indexOf("chrom") === -1 // It DOESN'T say it's Chrome/Chromium
) {
return true;
}
return false;
}


/*Advanced: If safari on windows returns true, else false */
function isSafariNotMac () {
var myNav = navigator.userAgent.toLowerCase();
var is_chrome = myNav.indexOf('chrome') > -1;
var is_safari = myNav.indexOf("safari") > -1;
var is_mac = myNav.indexOf("macintosh") > -1;
var is_windows = myNav.indexOf("windows") > -1;
if ((is_chrome)&&(is_safari)) {is_safari=false;}
if ((is_mac)&&(is_safari)) {is_safari=false;}
if ((is_windows)&&(is_safari)) {is_safari=false;}
return is_safari;
}


/* If Safari return version number, else return false */
function safariVersion()
{
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari/") !== -1 && ua.indexOf("chrom")   === -1 )
{
var version = parseInt(ua.substr(ua.indexOf("safari/") + ("safari/").length, 1));
return version;
}
return false;
}


/* If IE return version number, else return false */
function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

Create Shortcode in Plugin

1. Under folder plugins create a new folder with your plugin name, example “my-sample-plugin”

2. Create a php file in the new folder with the same name “my-sample-plugin.php”

3. Setup your class in the newly created file:
class wp_my_sample_plugin {
public function __construct() {
}
}

$wpSample = new wp_my_sample_plugin ();

 

4. At the end of your constructor add the code for the shortcode:

 

add_shortcode( 'mysample', array( $this, 'my_sample_shortcode_fn' ) );

//first parameter represents the shortcode name you want to assign

//second parameter represents the function name to call

 

5. Right after the constructor, create the function name “my_sample_shortcode_fn”

 

public function my_sample_shortcode_fn($atts) {
$msg = 'Welcome to my sample plugin shortcode';
if(isset($atts['name']))
{
$msg .= ','.$atts['name'];
}
return $msg;
}

//The above function will display a welcome message whenever the shortcode is called.

//$atts represents any attributes passed along in the shortcode

//To check if an attribute is set, all we need to do is call $attr[‘name_here’]

//Attributes help making a plugin customizable through shortcodes

 

6. And finally, in your html all you need to do is add the following shortcode where ever you would like to display the content:

echo do_shortcode('[mysample name="Rochelle"]');