Jose Mortellaro

Specific Content For Mobile allows you to create pages and posts content designed for mobile devices.
This plugin DOES NOT redirect content from the desktop website: it creates brand new mobile-specific content.
It’s perfect if in some pages you need different content for the mobile version.
The best way to have a mobile version is always a fully responsive design, but in some cases you may need specific content for the mobile version.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/-vc3zBI9Prw?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>How to add or remove specific content for the mobile version:</h3>
<ul>
<li>Click on Pages in the main admin menu</li>
<li>Go with your mouse on the page you want to modify for the mobile version and click on the action link “Create mobile version”, or click on the icon “+” you see in the devices column</li>
<li>Modify your page as you want to see it on mobile</li>
<li>Save your page mobile version</li>
</ul>
If you want to create a mobile version for your blog posts, do as explained above, but going to the list of Posts.
On mobile devices, the plugin will load the mobile version you have created for that page or post.
If you create the mobile version for a page reachable at https://your-domain.com/page-example/, and you are logged-in, you will see also https://your-domain.com/page-example-mobile/. 
But logged-out users will not see it, and the only URL that exists for the public is https://your-domain.com/page-example/.
The page reachable at https://your-domain.com/page-example/ will show the desktop content on desktop devices, and the mobile content on mobile devices The URL is always the same.
You have no redirections, and the plugin just replaces the desktop content with the related mobile version.
For more details read the <a href="https://specific-content-for-mobile.com/documentation/" rel="nofollow ugc">Documentation</a>.
<h3>Requirements</h3>
If you have a server cache plugin, be sure to set a different server cache handling for mobile devices, in another case the mobile version of your pages could also be served on desktop devices. 
E.g. <a href="https://wordpress.org/plugins/w3-total-cache/" rel="ugc">W3 Total Cache</a>, <a href="https://wordpress.org/plugins/wp-fastest-cache/" rel="ugc">WP Fastest Cache</a>, and <a href="https://wordpress.org/plugins/powered-cache/" rel="ugc">Powered Cache</a> are caching plugins that can handle the mobile cache. 
Be careful if you are using <a href="https://wordpress.org/plugins/w3-total-cache/" rel="ugc">W3 Total Cache</a> or whatever other caching plugin that gives you the possibility to manage the mobile version, DO NOT set up any redirection for mobile devices. 
If you have issues with the mobile and desktop versions with W3 Total Cache, read <a href="https://wordpress.org/support/topic/mobile-version-showing-in-desktop-view-w3-total-cache-plugin/#post-17279915" rel="ugc">Mobile version showing in desktop view – W3 Total Cache Plugin</a> 
Specific Content For Mobile DOES NOT redirect the mobile users. The URL of a page visited on mobile is exactly the same as the desktop URL.
<h3>Differences with AMP plugins</h3>
Specific Content For Mobile has nothing to do with AMP pages. It gives you the possibility to show specific content for mobile, but without any redirection, and without generating any AMP markup. 
If you want to serve AMP pages, Specific Content For Mobile is not for you. In that case, you may be interested in a plugin like <a href="https://wordpress.org/plugins/amp/" rel="ugc">AMP</a>, or <a href="https://wordpress.org/plugins/accelerated-mobile-pages/" rel="ugc">AMP For WP</a>. 
You consider Specific Content For Mobile like an alternative to AMP plugins.
<h3>Limitations of the free version</h3>
The free version supports only the mobile version of pages and posts, no custom post types, no archives, no terms.
<h4>I need advanced functionality to be integrated with this plugin.</h4>
If you need custom functionality, I offer a development service for WordPress plugin integrations and advanced feature extensions. 
Learn more about <a href="https://josemortellaro.com/advanced-functionality-for-wordpress/" rel="nofollow ugc">advanced functionality for WordPress</a>.
<h3>Additional information</h3>
As a default, WordPress doesn’t output the blog page content before the posts loop. 
Some themes do it. In this case, the blog page content output before the loop is handled by the theme templates. 
The plugin will check if the theme declares support for the blog page mobile version, if not so the blog page mobile version may take the original desktop content.
As a default Specific Content For Mobile synchronizes the post metadata. This means that when you save a post or page, if they have a mobile version, the same metadata will be saved in the mobile version. 
When you save a mobile version, the mobile version metadata will be saved also in the desktop version. 
If you want to change this behavior, go to Specific Content For Mobile settings and choose “Allow mobile versions having their own metadata”.
For the most popular SEO plugins, you can choose the metadata synchronization specifically for that plugin.
<h3><a href="https://specific-content-for-mobile.com/documentation/" rel="nofollow ugc">PRO Version</a></h3>
<h4>The <a href="https://specific-content-for-mobile.com/documentation/" rel="nofollow ugc">PRO version</a> also allows you to:</h4>
<ul>
<li>Have a mobile version of all the queriable post types are supported</li>
<li>Load a different theme specifically on mobile devices</li>
<li>Unload specific plugins only on mobile devices</li>
<li>Decide if tablets should be considered as mobile devices or not so</li>
<li>Have a different navigation on mobile</li>
<li>Write specific content depending on the device</li>
<li>Have access to the premium support</li>
</ul>
<h3>For developers</h3>
Template for mobile
If you need to use a different template file on mobile, copy the template file of your theme and put it in one of these folders:
wp-content/scfm/
wp-content/themes/theme-name/scfm
For example, if your theme is “theme-name” and you want to load a different page.php on mobile, it will be something that looks like:
wp-content/scfm/page.PHP
or
wp-content/themes/theme-name/page.php
In the case of mobile devices, Specific Content For Mobile will look for the custom template file first in wp-content/themes/theme-name/scfm and if it doesn’t find it in wp-content/scfm.
Integration with other plugins
If you add an option for the metadata synchronization of an external plugin, you can use the filter “eos_scfm_meta_integration_array”.
Here an example:
<pre><code>add_filter( 'eos_scfm_meta_integration_array','my_custom_scfm_meta_integration',20,2 );
//It adds an option to synchronize your plugin meta data.
function my_custom_scfm_meta_integration( $arr,$options ){
 $slug = 'my_custom_meta';
 $arr[$slug] = array(
 'is_active' => defined( 'WPSEO_FILE' ),
 'args' => array(
 'title' => __( 'My custom meta synchronization','my-textdomain' ),
 'type' => 'select',
 'value' => isset( $options[$slug] ) ? esc_attr( $options[$slug] ) : 'synchronized',
 'options' => array(
 'synchronized' => __( 'Synchronize desktop and mobile metadata','my-textdomain' ),
 'separated' => __( 'Allow mobile versions having their own metadata','my-textdomain' )
 ),
 ),
 'prefix' => array( '_my_plugin' ),
 'default' => 'synchronized'
 );
 return $arr;
}
</code></pre>
Then you will see your custom option “My custom meta synchronization” in the main settings page.
Helper functions
In your theme, you can use the following functions to give full support to the mobile version content:
<pre><code>eos_scfm_related_desktop_id( $post_id );
</code></pre>
given the post ID, it will get the post ID of the related desktop version.
<pre><code>eos_scfm_related_mobile_id( $post_id );
</code></pre>
given the post ID, it will get the post ID of the related mobile version.
Theme support
To add the theme support to the blog content, you can add this line in your theme support action hook:
<pre><code>add_theme_support('specific_content_form_mobile',array( 'posts_page' => true ) );
</code></pre>
<h3>Help</h3>
If something doesn’t work on the free version, open a thread on the <a href="https://wordpress.org/support/plugin/specific-content-for-mobile/" rel="ugc">support forum</a> 
If you are a PRO user, and you have issues, don’t hesitate to open a ticket on the <a href="https://specific-content-for-mobile.com/support/" rel="nofollow ugc">premium support</a>

Specific Content For Mobile – Customize the mobile version without redirections

Specific Content For Mobile allows you to create pages and posts content designed for mobile devices.

Tubal

A lightweight detector of mobile devices, OSs & browsers that, optionally, allows your site to switch to a mobile theme when a mobile device is detected or when your users feel like it.
This plugin adds the class MobileDTS to WordPress.
<h4>Mobile Detection</h4>
On every request, this plugin will try to detect if the user is viewing your site with a mobile device or not. If he is, the detector will also give you some info about the device, browser and OS used.
Who will be happy with this detector?
If you need a fast and reliable way to detect if a user is visiting your site with a mobile device, then you’ll be happy. However, if you need precise information about the device used (other than OS and browser) such as screen resolution you need a detector such as <a href="http://deviceatlas.com/" rel="nofollow ugc">DeviceAtlas</a> or <a href="http://wurfl.sourceforge.net/" rel="nofollow ugc">WURFL</a>.
How to query the detector?
Use the method <code>MobileDTS::is($key)</code>. <code>is()</code> returns boolean <code>true</code> or <code>false</code>.
Example:
<pre><code><?php

if (MobileDTS::is('android')) {
 // User with a mobile device running Android OS
} else if (MobileDTS::is('ios')) {
 // User with a mobile device running iOS
} else if (MobileDTS::is('mobile')) {
 // User with a mobile device (any, even 10 years old mobile phones) 
} else {
 // User with a desktop device 
}

?>
</code></pre>
Available keys:
<ul>
<li><code>mobile</code> (Is it a mobile?)</li>
<li><code>other</code> (Any other mobile device)</li>
</ul>
Popular mobile devices
<ul>
<li><code>iphone</code> (Apple iPhone)</li>
<li><code>ipad</code> (Apple iPad)</li>
<li><code>kindle</code> (Amazon Kindle)</li>
</ul>
Mobile OS
<ul>
<li><code>android</code> (Android OS)</li>
<li><code>bada</code> (Bada OS)</li>
<li><code>bbos</code> (Blackberry OS)</li>
<li><code>ios</code> (Apple iOS)</li>
<li><code>palmos</code> (Palm OS)</li>
<li><code>symbian</code> (Symbian OS)</li>
<li><code>webos</code> (Hp WebOS)</li>
<li><code>windows</code> (Windows Phone OS and older)</li>
</ul>
Mobile browsers
<ul>
<li><code>ff_mobile</code> (Mozilla Fennec & Firefox mobile)</li>
<li><code>ie_mobile</code> (IE mobile)</li>
<li><code>netfront</code> (NetFront)</li>
<li><code>opera_mobile</code> (Opera Mobile or Mini)</li>
<li><code>uc_browser</code> (UC Browser)</li>
<li><code>webkit_mobile</code> (Webkit mobile)</li>
</ul>
<h4>Theme Switching</h4>
You can configure your site to automatically switch to a mobile theme when a mobile device is detected or when the user requests it (on demand).
Once the plugin is installed, a new submenu titled <code>Mobile Detector</code> is added under the <code>Settings</code> menu.
Theme switching is disabled by default. To enable theme switching simply select a theme to use as your mobile theme and the plugin will take care of the rest.
This plugin assumes your active theme is optimized for desktop screens only. So, if you’re using a responsive theme that adapts to any screen size you shouldn’t use the theme switching feature (don’t select a theme).
How it works:
<ul>
<li>On each page load, this plugin checks for the existence of a cookie that stores which theme (mobile-optimized or desktop-optimized) the user prefers to browse.</li>
<li>If the cookie exists, the theme the user expects will be displayed.</li>
<li>If the cookie does not exist (first-time visitor), this plugin checks whether the user is visiting your site with a mobile device or not and, if he is, your mobile-optimized theme will be used. Afterwards, a cookie will be set to store the user’s “initial preference”.</li>
<li>Anytime the user switches (you must create a link/button in your theme using the Template functions below) between themes, the cookie is updated with his preference so the site version (theme) the user expects will be displayed on future visits.</li>
</ul>
Template functions
<ul>
<li>
<code>MobileDTS::get_switch_theme_link()</code> Returns the current URL with an additional <code>switch_theme</code> parameter (set automatically to ‘mobile’ or ‘desktop’). You’ll need this function to create a link/button that allows users to switch between the desktop and mobile themes. See example below.
</li>
<li>
<code>MobileDTS::switch_theme_link()</code>: same as above but this one outputs the URL instead of returning it. URL is escaped.
</li>
<li>
<code>MobileDTS::get_switch_theme_name()</code> returns the type of the theme to switch to (either ‘mobile’ or ‘desktop’). Use this method together with <code>get_switch_theme_link()</code>. The type can be translated to your language (plugin uses wp’s <code>__()</code> function for ‘mobile’ & ‘desktop’ strings).
</li>
<li>
<code>MobileDTS::switch_theme_name()</code> same as above but this one outputs the type instead of returning it.
</li>
<li>
<code>MobileDTS::is_mobile_theme()</code> tells you wether your site is displaying to the user the mobile theme or not. Returns boolean <code>true</code> or <code>false</code>.
</li>
<li>
<code>MobileDTS::is_switcher_enabled()</code> tells you wether theme switching is disabled or not. Returns boolean <code>true</code> or <code>false</code>.
</li>
</ul>
Creating a ‘Switch to …’ link
Let’s create a switch link to allow the user to switch between the 2 versions of a site (themes):
<pre><code><?php if (MobileDTS::is_switcher_enabled()): // Optional but useful if you need to disable theme switching for a while. ?>

<a href="<?php MobileDTS::switch_theme_link() ?>">Switch to the <?php MobileDTS::switch_theme_name() ?> version of this site</a>

<?php endif; ?>
</code></pre>
Paste that code in your templates (usually in <code>header.php</code> and/or <code>footer.php</code>), enable theme switching and play a little.
Let’s suppose a user is viewing the site (http://example.com/home) for the first time with a mobile device and theme switching is enabled. The above code would output this link:
<pre><code><a href="http://example.com/home?switch_theme=desktop">Switch to the desktop version of this site</a>
</code></pre>

Mobile Detector

Nice and Simple

Lightweight detector of mobile devices, OSs & browsers. Optionally a mobile theme switcher.

Specific Content For Mobile – Customize the mobile version without redirections vs Mobile Detector