Create a WordPress Mobile Friendly site with Jetpack Mobile Theme

There is no doubt a large percentage of internet users surf the web with the smartphones and other mobile devices. In a few years the percentage of mobile devices will outnumber the conventional computing devices and as a blogger or website owner this should bother you especially if your website is not mobile friendly.

IN an earlier article I published on this blog titled “The various ways to build WordPress Mobile Site”, I discussed the various ways one could build a WordPress mobile site for one’s website. One of the methods I mentioned was building a WordPress mobile friendly website with plugins such as WordPress Mobile Pack, WP Touch, Wapple Architect Mobile plugin, MobilePress, Jetpack Mobile Theme etc.

Today in this article I will be discussing how to create a WordPress mobile friendly site with Jetpack Mobile Theme. Jetpack is one of my favorite WordPress plugin as its importance is limitless to me. You can accomplish so many things with Jetpack than installing several other plugins for same purpose.

Earlier on this blog I was running Mobilepress plugin for my mobile site while I was using the other awesome features of Jetpack, then I thought why increase the number of plugins I have on my blog when I can eliminate all those with similar features as Jetpack?

So I decided to let go of Mobilepress and some other plugins I could find their features in Jetpack. So I created my mobile site with Jetpack Mobile Theme. If you are reading this post on mobile you will notice the neat interface/layout and design of this blog.

Jetpack Mobile Theme is indeed an easier way to create a WordPress mobile friendly site. I have taken my time to customize my mobile site and I will teach you all there is in this article.

Install Jetpack Plugin:

To get started, download and install Jetpack plugin on your WordPress site and activate the plugin. Then connect your Jetpack to WordPress.com to enable the Jetpack features. Connect and authorize Jetpack to your WordPress.com account, if you don’t have one you can quickly create one.

How to Install Mobile Theme:

Next you will notice that Jetpack tab has been added to your dashboard. Hover your mouse over it and select ‘Jetpack’. You will see lots of Jetpack’s modules, scroll down until you see ‘Mobile Theme’, click on the ‘Activate’ button to activate the mobile theme for your WordPress site.

How to Customize Jetpack Mobile Theme:

If you desire to customize your Jetpack Mobile Theme to add logo, show thumbnails and even add adsense to your mobile theme then you will have to edit your Jetpack Mobile Theme.

Login to your Cpanel, open the file manager.

Navigate to /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven. This is where we will do all the customizations to make our site look unique.

How to Add Logo to Jetpack Mobile Theme (Minileven):

Open the header.php file and add locate <?php wp_head(); ?> on line 17. Then add the code below just below line 17.

<div id=”page”>

<div align=”center”><a href=”http://www.YOURDOMAIN.com”><img src=”YOUR LOGO URL” alt=”LOGO TITLE” border=”0″ title=”YOUR SITE TITLE“/></a></div>

Then save the header.php file. Ensure to change YOURDOMAIN LOGO TITLE, YOUR SITE TITLE appropriately and add the correct URL of your site logo.

This will create a div just above the menu and add your site logo to it.

How to change Jetpack Mobile Theme Color:

Navigate to /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css and edit the style.css file to match your current desktop theme.

How to remove powered by WordPress on Jetpack mobile theme

Navigate to /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven  and open the footer.php file and locate the

<?php do_action( ‘minileven_credits’ ); ?>

Right below it you can edit the id=”site-generator” tag as you wish.

How to add Adsense to Jetpack Mobile Theme:

There are two ways you can add adsense ads units to jetpack Mobile theme. You could manually edit the header.php file or use a plugin called Mobile Theme Ads for Jetpack.

Navigate to /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven and open the header.php file, scroll to the last line and add <div align=”center”>adsense code </div> and save.

This will show Google adsense add right under the menu on your Mobile Theme. You can also do same with the footer.php if you want to add ads to the footer area.

How to show Post Thumbnails on Jetpack Mobile theme:

By default Jetpack Mobile Theme does not show thumbnails, so if you will love to show your post thumbnails on your homepage and archives etc, install the Mobile Theme Featured images for Jetpack plugin.

Then go to Jetpack > Mobile Theme and click on the configure button on your dashboard. Select ‘Yes’ on the ‘Show features images on front page and archive pages and click the ‘Save configuration’ button to save.

This will show thumbnail images on your posts on both front page and archive pages of your WordPress mobile site.

How to add Mobile Widgets to Jetpack Mobile Theme:

If your site widgets are not showing on your mobile site that is because your sidebar is not registered as “sidebar-1” on your theme function.php.

But don’t worry I am about to show you how you can add mobile –specific widgets on your mobile site. These widgets will only be visible on your mobile site and not on your desktop site. The good thing is that you can choose which widgets to show on your mobile site.

This will involve editing your theme function.php file. Take a look at your function.php file you will notice something like this;

register_sidebar( array(
‘id’ => ‘main’,
‘name’ => __( ‘Main Sidebar’, ‘THEME-TEXT-DOMAIN’ ),
‘description’ => __( ‘This sidebar is for the full site’, ‘THEME-TEXT-DOMAIN’ ),
) );

In some sites the id may be ‘sidebar’. Copy the code below and paste it right below the one above on your function.php and save it.

register_sidebar( array(
‘id’ => ‘sidebar-1’,
‘name’ => __( ‘Mobile Widgets’, ‘THEME-TEXT-DOMAIN’ ),
‘description’ => __( ‘This sidebar is for the mobile theme’, ‘THEME-TEXT-DOMAIN‘ ),
) );

Remember to rename THEME-TEXT-DOMAIN to the name of your site theme. What we have simply done above is to add the ‘sidebar-1’ that Jetpack Mobile theme will recognize to our function.php.

Then navigate to Appearance > Widgets on your dashboard and you will notice a new widget area called “Mobile Widgets”.

Add any widgets you will like to show on your mobile site to it and save. Launch your site on a mobile browser and see how it looks.

I hope I have shown you how to create a WordPress mobile friendly site with Jetpack Mobile Theme. If you have problems please don’t hesitate to ask via the comments.

Final Advice:

All your customizations will be lost on the next Jetpack update. So the only way to save your Mobile Theme customizations is to zip the minileven folder and download it to your PC or save it in any other folder on your server. After every Jetpack update, you simply go and replace the minileven files with your saved files.