Tweak the Mobile Switcher

With the WordPress Mobile Pack plug-in installed on your blog, the first thing that greets your visitors is the mobile switcher. Before you get into customizing how this nifty bit of code works, here’s a brief explanation: The mobile switching agent identifies what kind of device is visiting the page and delivers the design that is optimized for that device.

1

Open a browser and navigate to your WordPress blog’s Dashboard.

This is your starting point.

2

Click the Plugins button in the left sidebar.

The Manage Plugins page appears.

3

Scroll to the WordPress Mobile Pack plug-in and click the Switcher link.

Alternatively, you can access the Mobile Switcher by selecting it from the Appearance tab. The Mobile Switcher page opens, as shown. This page contains various drop-down lists that you can use to adjust the settings.

4

On the Switcher Mode drop-down menu, choose from the following options:

Disabled: Choose this option to disable the switching feature, perhaps because you have a site that is designed to be seen only on mobile devices.

Browser Detection: When users access your blog, their browser sends a little information to your server, telling it what kind of browser and operating system are making the request. This mode is effective, although the WordPress mobile switcher may not recognize very new or nonstandard browsers, in which case users would be sent to your desktop site. (To guard against that kind of error, see Step 9.)

Domain Mapping: This option identifies whether the visitor to your blog is trying to access a mobile domain (say m.mobilewebdesignblog.com, mobilewebdesignblog.com/m, or mobilewebdesignblog.mobi) or just the regular desktop site. This is quite effective if your users are typing in the complete address. However, you must create a completely separate mobile site at that address.

Both Browser Detection and Domain Mapping: The advantage of using this setting is that it covers almost all possible mobile user access scenarios and flashes a warning message when your user tries to access the mobile site through a desktop browser or vice versa.

5

In the Mobile Theme drop-down list, select the theme you want your mobile users to see.

The defaults are limited to the base color scheme, as well as blue, green, or red. If you customize and save a mobile theme of your own, it appears here, too.

6

In the Browser Detection drop-down list, select User-Agent Prefixes, if you like.

This drop-down list is available only when you choose Browser Detection or Both Browser Detection and Domain Mapping in Step 4. If you’re not using Browser Detection, the choices here are not available.

7

In the Desktop Domains text box, change the text only if you have a complicated or custom-built site.

The default is your primary web address where users visiting your site from traditional desktop or laptop computers are sent. If you don’t know what you’re doing with this text box, leave it alone.

8

In the Mobile Domains box, enter the names of any custom mobile domains you've created.

As we mention in Step 4, you can create a completely different site at an m.whatever.com or whatever.mobi domain. However, just filling in a variation of your existing domain address doesn’t magically create this site. Creating subdomains like these requires a fair amount of specialized knowledge and access to server-level functions that not all web hosts offer.

9

(Optional) Select the Footer Links check box to allow your users to override the mobile switcher.

This places a link on the bottom of the page that allows users to defeat the switcher in case it sends a desktop user to a mobile page, or vice-versa. If you're confident in the switcher and want to save space on your page, don't include the link, but most people choose to just in case.

Allow your users to choose which version of your blog they want to see; maybe a desktop user is on a particularly slow connection and just wants to access the simplest version of your site.

10

Click the Save Changes button.

Now you're done!

blog comments powered by Disqus
Advertisement

Inside Dummies.com