A little documented feature of the WPTouch Pro plugin is the ability to use shortcodes to show specific blocks of content to desktop users and other content to mobile visitors. This is necessary considering WPTouch Pro currently does not resize multimedia if the width and height tags are within a style element. Most video player plugins therefore will not resize to suit mobile device screens. In this article, I will explain what those shortcodes are and give some usage examples.
WPTouch Pro Shortcodes
WPTouch has four shortcodes set up to target different devices and situations. They are as follows:
[wptouch target="webapp"]This is content that only shows in webapp mode (only available on iDevices)[/wptouch]
[wptouch target="mobile"]This content shows up in webapp and non-webapp mode (only on mobile devices)[/wptouch]
[wptouch target="desktop"]This content shows up on the desktop version of the site when viewed from a mobile device[/wptouch]
[wptouch target="non-mobile"]This content shows up in the desktop theme when the user doesn't have a mobile device[/wptouch]
WPTouch Pro Shortcode Examples
One use of the shortcodes is to create different video embed codes for desktop browsers and mobile devices. This is necessary to compensate for WPTouch Pro’s multimedia resizing issues. Create two video embed codes and set different sizes in each. As you can see, it is the same movie file, just sized differently:
[wptouch target="non-mobile"]<video style="width:640; height:480;" src="myvideo.mp4">[/wptouch]
[wptouch target="mobile"]<video style="width:320; height:240;" src="myvideo.mp4">[/wptouch]
Of course, you can use these shortcodes to target specific browser platforms to deliver content in any way you like.
Let me know if you have any questions in the comments!
Did you enjoy this article?
Then why not sign up for email updates?