WPTouch Shortcodes

Below, you’ll find a detailed guide on how to add the WPTouch Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Wptouch Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the WPTouch Plugin and the shortcodes it provides:

WPtouch – Make your WordPress Website Mobile-Friendly

"WPtouch is a dynamic plugin that effortlessly transforms your WordPress website into a user-friendly, mobile-optimized version. Ideal for enhancing the mobile browsing experience."

★★★☆✩ (308) Active Installs: 90000+ Tested with: 6.3.2 PHP Version: false

Included Shortcodes:

• [wptouch]
• [nullify_shortcode]

WPTouch [wptouch] Shortcode

The ‘wptouch’ shortcode is a dynamic tool that adjusts content visibility based on the device type. It targets mobile, non-mobile, desktop, webapp, and non-webapp devices. This shortcode detects the device type and applies the corresponding CSS class to the content. If the target attribute is not set, it defaults to ‘mobile’. It generates new content wrapped in a span tag with a class related to the target device. The content within these tags will only display on the specified device type.

Shortcode: [wptouch]

Parameters

Here is a list of all possible wptouch shortcode parameters and attributes:

• non-mobile – Displays content only on non-mobile devices.
• desktop – Shows content on mobile devices not using the mobile theme.
• non-webapp – Displays content on mobile devices using the mobile theme.
• webapp – Shows content on mobile devices using the mobile theme, but hides it from view.
• mobile – Displays content on mobile devices using the mobile theme.

Examples and Usage

Basic example – Show content only on mobile devices

[wptouch target="mobile"]This content will only show on mobile devices[/wptouch]

Advanced examples

Display content only on non-mobile devices

[wptouch target="non-mobile"]This content will only show on non-mobile devices[/wptouch]

Display content only on desktop, even if the device is a mobile but the desktop theme is being shown

[wptouch target="desktop"]This content will only show on desktop theme[/wptouch]

Display content only on mobile devices, but not on webapp

[wptouch target="non-webapp"]This content will only show on mobile devices, but not on webapp[/wptouch]

Display content only on webapp

[wptouch target="webapp"]This content will only show on webapp[/wptouch]

Display content based on custom target filter

[wptouch target="custom"]This content will be displayed based on the 'wptouch_shortcode_custom' filter[/wptouch]

PHP Function Code

In case you have difficulties debugging what causing issues with [wptouch] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'wptouch', array( &$this, 'handle_shortcode' ) );

Shortcode PHP function:

function handle_shortcode( $attr, $content ) {
		$new_content = '';

		// Add a default for target=mobile
		if ( !isset( $attr[ 'target' ] ) ) {
			$attr[ 'target' ] = 'mobile';
		}

		if ( isset( $attr['target'] ) ) {
			switch( $attr['target'] ) {
				case 'non-mobile':
					if ( !$this->is_mobile_device ) {
						$new_content = '<span class="wptouch-shortcode-non-mobile">' . $content . '</span>';
					}
					break;
				case 'desktop':
					if ( $this->is_mobile_device && !$this->showing_mobile_theme ) {
						$new_content = '<span class="wptouch-shortcode-desktop">' . $content . '</span>';
					}
					break;
				case 'non-webapp':
					if ( $this->is_showing_mobile_theme_on_mobile_device() ) {
						$new_content = '<span class="wptouch-shortcode-mobile-only" style="display: none;">' . $content . '</span>';
					}
					break;
				case 'webapp':
					if ( $this->is_showing_mobile_theme_on_mobile_device() ) {
						$new_content = '<span class="wptouch-shortcode-webapp-only" style="display: none;">' . $content . '</span>';
					}
					break;
				case 'mobile':
					if ( $this->is_showing_mobile_theme_on_mobile_device() ) {
						$new_content = '<span class="wptouch-shortcode-webapp-mobile">' . $content . '</span>';
					}
					break;
				default:
					$new_content = apply_filters( 'wptouch_shortcode_' . $attr[ 'target' ], $content );
					break;
			}
		}

		return do_shortcode( $new_content );
	}

Code file location:

wptouch/wptouch/core/class-wptouch-pro.php

Conclusion

Now that you’ve learned how to embed the Wptouch Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.