I have successfully using Jetpack Mobile Theme to serve the mobile version of my blogs, as of now it uses a theme called minieleven (that is starting to look a bit old…), with some tweaks here and there it can shine brighter and be customized to your taste, but unfortunately you can’t use a child theme, so other strategies must be used, so all the hard work isn’t wiped out by an update (and you do your updates, right?).
The plug-in native customization options are rather weak. You can customize, excerpts or full posts in home/archive/search pages, hide or show featured images, and display a promo for WordPress mobile apps. And that’s it, no more customization options for the mobile theme. Actually (never tried myself) if your main theme has colour and background options they should be picked up. And that’s it. From that point onward it’s up to you. So here we go…
First, if you are using Adsense for monetization, you will probably will notice that the Adsense mobile ads come with a nasty yellow background and cropped at the far right. The fix is very easy, go to Jetpack-> Options -> Custom CSS (be sure to check Mobile-compatible to Yes and simply add this:
.mobile-theme ins.adsbygoogle {
background-color: transparent !important;
}
.mobile-theme ins.adsbygoogle iframe {
width: inherit !important;
}
This is an important concept, as from here you can CSS override anything in the mobile theme, just be sure to prefix your selector with the .mobile-theme class, so you don’t mess up the desktop version.
This is all good for minor adjustments, and let’s say honestly this Jetpack feature is a little bit dumb, because it adds the custom CSS both to the mobile and the desktop version, actually to act on mobile you must switch an option and append the .mobile selector. This is dumb because to customize a desktop theme you simply create a child theme…. let’s say you want to use your own font with font-face, .mobile @font-face simply wont work.
The best bet for anything more than simple teaks is to create your own plug-in that pulls a specific style-sheet for the jetpack mobile version. A plug-in to customize other plug-in, wordpress is getting a bit tricky. happily this is quite easy, create a directory inside your /wp-content/plugins/ directory, let’s say jetpack-mobile-customizer and create a new file called jetpack-mobile-customizer.php with this content:
<?php
/**
* @package Jetpack Mobile Customizer
* @version 0.1
*/
/*
Plugin Name: Jetpack Mobile Customizer
*/
// Check if we are on mobile
function jetpackme_is_mobile() {
// Are Jetpack Mobile functions available?
if ( ! function_exists( 'jetpack_is_mobile' ) )
return false;
// Is Mobile theme showing/not showing?
if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
return false;
if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'true' )
return true;
return true;
}
function jetpackme_add_css() {
if ( jetpackme_is_mobile()) {
wp_register_style('custom_jpmobile_style',
'/wp-content/themes/my-child-theme/jpmobile_style.css');
wp_enqueue_style('custom_jpmobile_style');
}
}
add_action('wp_enqueue_scripts', 'jetpackme_add_css');
?>
and customize on line 26 your (child) theme and css. Now, just place all the CSS stuff on this file and it will be applied only to the jetpack mobile site.
To customize the number of posts showed on the mobile version (probably 5 posts it’s a bit overwhelming on hand-held devices), just add this code to your plug-in:
function custom_posts_per_page() {
if ( jetpackme_is_mobile()) {
return 1; // mobile version posts number
} else {
return false;
}
}
add_filter('pre_option_posts_per_page', 'custom_posts_per_page', 10000);
And to customize the footer? Yes, again we go to the plug-in to add our stuff and hide the other stuff with CSS. On the plug-in add:
function jetpackme_custom_footer() {
if ( jetpackme_is_mobile()) {
global $wp;
$current_url = trailingslashit( home_url( add_query_arg( array(), $wp->request ) ) );
echo '<span><a href="'.$current_url.
'?ak_action=reject_mobile">Go to Desktop Version</a></span>'.
'<p align="center">© All rights reserved, yadayadayada</p>';
return false;
}
}
add_action('wp_mobile_theme_footer', 'jetpackme_custom_footer');
and in the CSS:
footer #site-generator {
padding: 0 !important;
}
footer #site-generator > a {
display:none;
}
So, there you go. Some clear ideas how to do the job of customizing the Jetpack Mobile Theme and surviving updates.
And now for a completely free bonus, a full customization of the menu and search. A more modern look and feel with everything hidden (menu items and search form) and of course replacing the ugly “Menu” and down arrow text with the ubiquitous 3 horizontal bars. Just open this blog with a mobile device or force the mobile view on this link.
We are using all the concepts previous explained and the very useful gettext filter. On the plug-in:
// Check if we are on mobile
function jetpackme_is_mobile() {
// Are Jetpack Mobile functions available?
if ( ! function_exists( 'jetpack_is_mobile' ) )
return false;
// Is Mobile theme showing?
if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
return false;
return jetpack_is_mobile();
}
function jetpackme_add_css_js() {
if ( jetpackme_is_mobile()) {
wp_register_style('custom_jpmobile_style',
'/wp-content/themes/my-child-theme/jpmobile_style.css');
wp_enqueue_style('custom_jpmobile_style');
wp_register_script('custom_jpmobile_script',
'/wp-content/themes/my-child-theme/jpmobile_script.js',
array('jquery'));
}
}
function fix_menu($translated_text, $text, $domain) {
if ( jetpackme_is_mobile()) {
switch ( $translated_text ) {
case 'Menu' :
$translated_text = '<span>Menu</span>';
break;
case 'Termo' :
$translated_text = 'Pesquisar';
break;
}
}
return $translated_text;
}
add_filter('gettext', 'fix_menu');
add_action('wp_enqueue_scripts', 'jetpackme_add_css_js');
The CSS:
.search-form #s, .menu-search {
background-color: transparent !important;
}
.menu-search {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin: 0 0.6em 0 !important;
padding: 1% 2.5% !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
width: auto !important;
height: auto !important;
}
.menu-search::after {
display:none;
}
#access {
width:50% !important;
}
#access h3::before {
content: "\f419";
color: #666;
font:1.3em "Genericons";
line-height:46px;
}
#access h3.menu-toggle {
color:#000 !important;
padding: 0 !important;
width: auto !important;
}
#access h3.menu-toggle span {
display:inline-block;
text-indent: -9999px;
}
#access .menu-toggle::after {
display:none !important;
}
#access ul.nav-menu {
left:0 !important;
background-color:#f1f1f1 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: 0 2px 2px -2px #999 !important;
padding: 0 !important;
border-bottom:1px solid rgba(0,0,0,0.1) !important;
margin-top:3px !important;
}
#access ul.nav-menu li {
margin: 0 0.6em 0 !important;
padding: 0 2.5% !important;
border-bottom: 0 !important;
}
#access ul.nav-menu li a {
display:block !important;
padding:1em 0 !important;
}
#access ul.nav-menu::before {
display:none !important;
}
.search-form {
width:49% !important;
display:none;
}
.search-form #s {
border:1px solid #ddd !important;
color:#999 !important;
padding: 0.3em !important;
}
.search-form #s:focus {
font-size: 1em !important;
color:#000 !important;
padding: 0.3em !important;
}
And the extra Javascript file loaded in the plug-in:
(function($) {
$('h3.menu-toggle').click(function() {
if ($(this).hasClass('toggled-on') == true) {
$('div.search-form').show(500);
} else {
$('div.search-form').hide();
}
});
})(jQuery);
Comments, thoughts or other stuff feel free to use the comment box bellow.
So,