How to edit jetpack mobile theme

The Jetpack mobile theme is a free bonus with the other components of one of the most used WordPress plugin. Jetpack adds multiple functions to your WordPress blog.

One of the things that I like about it, is the fact that with a click you can enable the jetpack mobile theme and you don’t have to worry about anything else it will detect the mobile devices and render output accordingly.

Be sure to check out how to remove the social share icons from Jetpack in excerpts.

Why would you want to edit jetpack mobile theme?

I’m sure a lot of users would agree that it’s not the prettiest mobile theme. To be honest it is a basic theme that is light weight and their isn’t much to edit. Luckily as it is written in PHP, you are able to edit jetpack mobile theme without much fuss.

A few things to note before you do though, that if you update jetpack (and you should) the change that you make to jetpack mobile theme will be overwritten with the newer updated files which means that you will have to re-edit the mobile theme files again 🙁

At least if you forget how to do it you can always come back here and remind yourself.

At the time of writing this post the WordPress version is 3.4.2 and the jetpack version is 2.0.2 all up to date thus far.

If you would like to know how to remove share icons from the excerpt then read my post on remove share icons from excerpt in jetpack.

To change the jetpack mobile theme or customize it as I’m going to show you here you’ll need a code editor, you can use the built-in code editor that WordPress has or you can use notepad++ which is free to download. I use Editplus and I have been using it to edit my jetpack theme and others ever since I was introduced to it by my university lecturer all those years ago.

So you’ll need to find the theme folder where the jetpack mobile theme is kept so that you can get started and edit those files. The structure is the same as all other WordPress themes i.e. it contains header.php, footer.php and so on.

For this tutorial I am going to show you how to remove the ‘Powered by WordPress’ attribution from the Jetpack mobile theme and add a logo to the header as my mobile site only shows the title.

Remove the Powered by WordPress attribution from Jetpack Mobile Theme

As you can see it has the attribution attached, yes you should acknowledge the owners but for those who want to remove it here’s how.

1. Using the code editor locate footer.php which can be found inside public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven
2. open up footer.php and scroll down to the bottom to find the div with id=”site-generator”
3. if you want to you can just delete or comment out this line:

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'jetpack' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'minileven' , 'jetpack'); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'minileven' , 'jetpack'), 'WordPress' ); ?></a>

That will remove the WordPress attribution from the Jetpack Mobile theme.

Add your Logo to Jetpack Mobile theme

There wasn’t an option to enable the logo from the Jetpack Mobile theme interface, I wanted to add the logo to my site. You can see on the left that it just displays the title text I am going to add the logo just below it by editing the Jetpack Mobile theme. Here’s how.

Updated 07-07-2013, thanks to Chetan who pointed this out in the comments. Because the code and layout has changed you need to put it in a different place as show below.

1. Using the code editor locate header.php which can be found inside public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven
2. around line number 42 you should find <header id=”branding” role=”banner”>
3. on line 46 you’ll find <div id=”page”>
4. below the line just insert an image tag with your logo URL as the source.

<div id="page">
<img src="https://topislamic.com/wp-content/uploads/2012/09/top_islamic_logo2.png" alt="top islamic blog" title="top muslim blog"/>

That will add your logo to your Mobile theme in Jetpack. If you want to make it clickable so that it takes you to the homepage then make sure you add an anchor to it.

As I have mentioned before there are caveats such as when the developers of Jetpack decide to upgrade the plugin then it will replace these edits and you will have to redo those. Make sure you bookmark this so that if you forget how to do it then you can always follow these easy instructions.

If you wanted to change the background colour etc then you need have to edit the style.css located in the same folder.

Update: Change Background Colour in Jetpack Mobile Theme

To change the background colour of the Mobile Theme you need to locate the CSS file which can be found in the same folder public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven

Style.css is what you need to edit, on line 64 you will find:

body {
background: #fff;
}

Change that #fff (White) to whatever colour you want, it can be a hex value or a named colour like RED.

I hope this has helped you to change the Jetpack Mobile Theme, please let me know if you have any other handy tips or if I have missed anything. Thanks for reading and if you have enjoyed this, please subscribe to this blog and share with your friends.