Multi Device Switcher

1. 01Download and unzip files. Or install multi-device-switcher using the WordPress plugin installer. In that case, skip 2.
2. 02Upload “multi-device-switcher” to the “/wp-content/plugins/” directory.
3. 03Activate the plugin through the ‘Plugins’ menu in WordPress.
4. 04Upload a separate theme to the “/wp-content/themes/” directory.
5. 05Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
6. 06Configure settings to your needs. Select Theme by Theme option. Add and fix UserAgent by UserAgent option if necessary.
7. 07Have fun!

How to add the Custom Switcher

1. 08Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
2. 09Enter the name of the Custom Switcher (20 characters max, alphanumeric) to the ‘Add Custom Switcher’. Push the button ‘Add’.
3. 10Configure settings. Select Theme by Theme option. Add UserAgent by UserAgent option.
4. 11Have fun!

Setting and Using the PC Switcher

There are three ways how to Using the PC Switcher.

1. Add a PC Switcher to the footer

1. 12Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
2. 13Configure settings. Check the checkbox ‘Add a PC Switcher to the footer.’ by PC Switcher option.
3. 14Have fun!

2. Add a PC Switcher to your sidebars/widget areas

1. 15Add-on the widget ‘PC Switcher’, when you activate the plugin “Multi Device Switcher”.
2. 16Go to the “Widgets” options page through the ‘Appearance’ menu in WordPress.
3. 17Drag and drop the title bars ‘PC Switcher’ into the desired area.
4. 18Have fun!

3. For the theme authors and developers, add a PC Switcher to your theme.

1. 19Add the following code into the PHP files, when you develop your theme.
2. 20Have fun!

Using default CSS and customized CSS

1. 21Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
2. 22Configure settings. Check the checkbox ‘Add a default CSS.’ by PC Switcher option. If you want to customize CSS, uncheck the checkbox.
3. 23Have fun!

You can design the PC Switcher in the Style Sheet.

HTML output of the PC Switcher

<div class="pc-switcher"><span class="active">Mobile</span><a href="http://DOMEIN/PATH/TO/?pc-switcher=1">PC</a></div>

HTML output of the PC Switcher when switched

<div class="pc-switcher"><a href="http://DOMEIN/PATH/TO/?pc-switcher=0">Mobile</a><span class="active">PC</span></div>

How to use the Display Switcher Shortcode

The Display Switcher Shortcode switch the content of the post or page through the detection of the device.

Add the shortcode [multi] in a post or page and use the device attribute to device name. if the device attribute is empty, detect the desktop PC.

Attributes

device

(string | empty) The name of the device

1. 24smart
2. 25tablet
3. 26mobile
4. 27game
5. 28the name of the Custom Switcher

if empty, detect the desktop PC

Example Shortcode

[multi]pc or other specific stuff here[/multi] [multi device="smart"]smartphone specific stuff here[/multi] [multi device="tablet"]tablet specific stuff here[/multi] [multi device="test"]test Custom Switcher specific stuff here[/multi]

For theme or plugin developers. Filters The Display Switcher Shortcode through hooks. In that case, edit theme or plugin files.

<?php echo do_shortcode('[multi device="smart"]smartphone specific stuff here[/multi]'); ?>

How to use the Disable Switcher

The Disable Switcher disable the switching of the theme by a particular URL. If you match the access the url and a string or a regular expression (Regex mode), disable the switching of the theme. Regex mode is for advanced users.

1. 29Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
2. 30Enter the path to the line by line where you want to disable by Disable Switcher option. Check the checkbox ‘Enable Regex’, if you want to use a regular expression.
3. 31Have fun!

Example

/sample-page /2015/01/hello-world

Regex mode (in the case of regular expression)

\/sample\- \/2015\/01

UserAgent option Samples

1. 32Default UserAgent

Detect the device by JavaScript

Multi Device Switcher set the Cookie that holds the state of the switch. You can get the Cookie and detect the device by JavaScript.

Cookies

1. 33multi-device-switcher The name of the device is switched (value: null | device name)
2. 34disable-switcher State of disabled (value: null | 1)
3. 35pc-switcher State of the PC Switcher when switched (value: null | 1)

Example

<script src="http://DOMEIN/PATH/TO/jquery.cookie.js"></script> <script> (function($) { $(function() { if ( $.cookie( 'multi-device-switcher' ) == 'smart' ) { /* smartphone specific stuff here */ } else if ( $.cookie( 'multi-device-switcher' ) == 'tablet' ) { /* tablet specific stuff here */ } else { /* pc or other specific stuff here */ } }); })(jQuery); </script>

is_multi_device() function

is_multi_device() function is a boolean function, meaning it returns either TRUE or FALSE. Works through the detection of the device by the Multi_Device_Switcher class.

Usage

<?php is_multi_device('smart'); ?>

Example

<?php if ( function_exists( 'is_multi_device' ) ) { if ( is_multi_device('smart') ) { /* Display and echo smartphone specific stuff here */ } elseif ( is_multi_device('tablet') ) { /* Display and echo tablet specific stuff here */ } else { /* Display and echo pc or other specific stuff here */ } } ?>

Parameters

device name (required)

(string) The name of the device

1. 36smart
2. 37tablet
3. 38mobile
4. 39game
5. 40the name of the Custom Switcher

Return Values

(boolean) Return boolean whether a particular device.

is_pc_switcher() function

is_pc_switcher() function is a boolean function, meaning it returns either TRUE or FALSE. Return the the state of PC Switcher by the Multi_Device_Switcher class. Return true if the theme has switched by the PC Switcher.

Usage

<?php is_pc_switcher(); ?>

Example

<?php if ( function_exists( 'is_pc_switcher' ) ) { if ( is_pc_switcher() ) { /* Theme switched by the PC Switcher. Display and echo specific stuff here */ } else { /* Display and echo specific stuff here */ } } ?>

Parameters

None

Return Values

(boolean) Return the state of PC Switcher.

is_disable_switcher() function

is_disable_switcher() function is a boolean function, meaning it returns either TRUE or FALSE. Return the state of disabled by the Multi_Device_Switcher class.

Usage

<?php is_disable_switcher(); ?>

Example

<?php if ( function_exists( 'is_disable_switcher' ) ) { if ( is_disable_switcher() ) { /* Disabled. Display and echo specific stuff here */ } else { /* Display and echo specific stuff here */ } } ?>

Parameters

None

Return Values

(boolean) Return the state of disabled.

Filter hooks

1. 41multi_device_switcher/get_options
2. 42multi_device_switcher/get_option
3. 43multi_device_switcher/add_header_vary
4. 44multi_device_switcher/validate_options

Action hooks

1. 45multi_device_switcher/detect_device

Multi Device Switcher Command

The Multi Device Switcher Command is command-line tool.

Add-on the Multi Device Switcher Command, when you activate the plugin “Multi Device Switcher”. To use the Multi Device Switcher Command is WP-CLI required.

NAME

wp multi-device

DESCRIPTION

Multi Device Switcher Command

SYNOPSIS

wp multi-device <command>

SUBCOMMANDS

add add Custom Switcher css turn on/off default CSS delete delete Custom Switcher pc-switcher turn on/off PC Switcher reset reset Settings to Default UserAgent status get status of settings theme get or switch a theme useragent get or set UserAgent

For more information about the Multi Device Switcher Command, see wp help multi-device <SUBCOMMANDS> .