How to add Multi Device Switcher in Wordpress

This WordPress plugin allows you to set a separate theme for device (Smart Phone, Tablet PC, Mobile Phone, Game and custom). Wordpress Tutorial

Noted That:

To install correctly this multi-device-switcher.zip .
Fisrt Download the multi-device-switcher.zip to your computer
Extract/Open multi-device-switcher.zip to Your Computer.
Then, Find readme.txt file inside multi-device-switcher.zip and Open readme.txt .
Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
Then, Follow the Tips Below.

Start the Tips:

1. First Download " multi-device-switcher.zip " Plugin to your Local Computer. (Click Download)

2. Then, Login to your " yourdomain.com/wp-admin " Dashboard.

3. Then, Click on " Plugins " + " Add New " from left sidemenu of Dashboard.

4. Now, Click on "Upload Plugin" button.

5. Now, Browse " multi-device-switcher.zip " Downloaded plugin from your computer, Where you downloaded multi-device-switcher.zip According to Step – 1 Above then, click on " Install Now"

6. Now, Click on " Active Plugin"

7. Then, See left sidemenu. " Multi Device Switcher " folder is added on left sidemenu. Now, Click on " Multi Device Switcher " folder.

Noted that: If you do not see " Multi Device Switcher " folder on left sidemenu then, see at left sidemenu " Settings " or " Tools ".

8. Now you configure yourself oR Watch video tutorial below about Multi Device Switcher Configurtions and Settings or How to work " Multi Device Switcher " in your WordPress site.

After Activated Plugin According to Step-6 then,

Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
or Direct go to: https://yourdomain/wp-admin/plugins.php
Then, Find " Multi Device Switcher " Activated Plugin from Plugin List.
Then, Click on " Settings " from Plugin that is Multi Device Switcher
Now, Edit/Add/Config the setting and Click on " Save Changes " button,

Guide

Guide
Download and unzip files. Or install multi-device-switcher using the WordPress plugin installer. In that case, skip 2. Upload “multi-device-switcher” to the “/wp-content/plugins/” directory. Activate the plugin through the ‘Plugins’ menu in WordPress. Upload a separate theme to the “/wp-content/themes/” directory. Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress. Configure settings to your needs. Select Theme by Theme option. Add and fix UserAgent by UserAgent option if necessary. Have fun! How to add the Custom Switcher Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress. Enter the name of the Custom Switcher (20 characters max, alphanumeric) to the ‘Add Custom Switcher’. Push the button ‘Add’. Configure settings. Select Theme by Theme option. Add UserAgent by UserAgent option. Have 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 Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress. Configure settings. Check the checkbox ‘Add a PC Switcher to the footer.’ by PC Switcher option. Have fun! 2. Add a PC Switcher to your sidebars/widget areas Add-on the widget ‘PC Switcher’, when you activate the plugin “Multi Device Switcher”. Go to the “Widgets” options page through the ‘Appearance’ menu in WordPress. Drag and drop the title bars ‘PC Switcher’ into the desired area. Have fun! 3. For the theme authors and developers, add a PC Switcher to your theme. Add the following code into the PHP files, when you develop your theme. Have fun! Using default CSS and customized CSS Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress. Configure settings. Check the checkbox ‘Add a default CSS.’ by PC Switcher option. If you want to customize CSS, uncheck the checkbox. Have fun! You can design the PC Switcher in the Style Sheet. HTML output of the PC Switcher `Mobile PC` HTML output of the PC Switcher when switched `Mobile PC` 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 smart tablet mobile game the 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. 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. Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress. Enter 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. Have fun! Example `/sample-page /2015/01/hello-world` Regex mode (in the case of regular expression) `\/sample\- \/2015\/01` UserAgent option Samples Default 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 `multi-device-switcher` The name of the device is switched (value: null \| device name) `disable-switcher` State of disabled (value: null \| 1) `pc-switcher` State of the PC Switcher when switched (value: null \| 1) Example 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 Example Parameters device name (required) (string) The name of the device smart tablet mobile game the 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 Example 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 Example Parameters None Return Values (boolean) Return the state of disabled. Filter hooks multi_device_switcher/get_options multi_device_switcher/get_option multi_device_switcher/add_header_vary multi_device_switcher/validate_options Action hooks multi_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` 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` .

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

How to add the Custom Switcher

Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
Enter the name of the Custom Switcher (20 characters max, alphanumeric) to the ‘Add Custom Switcher’. Push the button ‘Add’.
Configure settings. Select Theme by Theme option. Add UserAgent by UserAgent option.
Have 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

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

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

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

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

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

Using default CSS and customized CSS

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

You can design the PC Switcher in the Style Sheet.

HTML output of the PC Switcher


 

Mobile

PC

HTML output of the PC Switcher when switched


 

Mobile

PC

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

smart
tablet
mobile
game
the 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.

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.

Go to the “Multi Device Switcher” options page through the ‘Appearance’ menu in WordPress.
Enter 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.
Have fun!

Example


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

Regex mode (in the case of regular expression)


\/sample\-
\/2015\/01

UserAgent option Samples

Default 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

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

Example

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

Example

Parameters

device name (required)

(string) The name of the device

smart
tablet
mobile
game
the 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

Example

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

Example

Parameters

None

Return Values

(boolean) Return the state of disabled.

Filter hooks

multi_device_switcher/get_options
multi_device_switcher/get_option
multi_device_switcher/add_header_vary
multi_device_switcher/validate_options

Action hooks

multi_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

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 .

phone , allows , separate , theme , device , smart , tablet , mobile , game , custom ,

Name
How to add No Page Comment in Wordpress
How to add Wordpress Simple Paypal Shopping Cart in Wordpress
How to add Meteor Slides in Wordpress
How to add Wp Structuring Markup in Wordpress
How to add Top 10 in Wordpress

Read Article
https://develop.horje.com/learn/1434/reference