Generate Mobile Specific Content Using WPTouch Pro Shortcodes

Generate Mobile Specific Content Using WPTouch Pro Shortcodes

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?

We take your privacy seriously.

6 Responses to Generate Mobile Specific Content Using WPTouch Pro Shortcodes

  1. is there a way to wrap copy in both a mobile and desktop shortcode so when someone turns off the mobile feature on their tablet or mobile it will still show the site the correct way?

    • Daryl Lozupone says:

      Hi Nicholas–

      I am not sure I understand what you mean by “still show the site the correct way.”

      However, I believe your question essentially is: can you nest shortcodes? For example:
      [wptouch target="mobile"][wptouch target="desktop"]Some content here[/wptouch][/wptouch]

      And the answer is no. The above statement would only display the content if the browser was in mobile and desktop mode at the same time. And the folks at Brave New Code (the makers of WPTouch Pro) have not implemented any sort of “or” (e.g. [wptouch target="mobile"] OR [wptouch target="desktop"]...). You will have to put the content in twice, once for each shortcode.

      I hope that answers your question, please feel free to let me know if I have not.

      –Daryl

  2. Tony Boaks says:

    Thanks. It does seem to work quite well. But I’m having trouble with the poster images/video holders. (Video plays fine.) Although you can set the holders to a mobile size, it seems to be a static size, ie it doesn’t scale to fit the mobile window. Do you know any way around that?

    • Daryl Lozupone says:

      Correct. This is a known issue with WPTouch Pro. If the width and height attributes are part of a style tag, WPTouch does not resize them. I brought this issue up with the developers nine months ago, and they have yet to issue a fix.

      Scaling will not work:

      <video preload="none" controls="controls" style="top: 0px; left: 0px; width: 600px; height: 390px; z-index: 1; position: absolute; "></video>

      Scaling will work:
      <video height="390" width="600" ...

      If you can embed your video code as in the second example, it should work just fine.

  3. Tony Boaks says:

    That’s handy. Where do these shortcodes go?

Leave a reply

Renegade Tech Consulting Security Monitored by Sucuri

26512 Clarksburg Road Damascus, MD 20872
510-846-1202