How to edit jetpack mobile theme

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

image of jetpack mobile theme footer

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

image of add logo jetpack mobile themeThere 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"/>

image of add logo jetpack mobileThat 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.

By | 2013-07-07T20:26:30+00:00 December 2nd, 2012|Plugins, Social, Tutorials|68 Comments

About the Author:

A Computing teacher by profession Abu teaches children aged 11-18. His background is in Computer Science. Currently writing for Top Islamic blog as the main editor. His passion is to disseminate computing and Islamic concepts to the willing ... Connect on Facebook.

68 Comments

  1. Jermain 06/12/2012 at 3:58 am - Reply

    thanks for the tips I couldn’t locate the files, so this can in handy.

  2. hotels in calicut 15/12/2012 at 6:53 am - Reply

    Thank you so much for the information. Keep posting, i’ ll follow.

  3. Sandor 14/01/2013 at 5:39 pm - Reply

    Very nice! Solved my problem. Thank You!

  4. eric kindley 25/01/2013 at 9:03 am - Reply

    Pure awesome sauce. Cant thank you enough.

  5. brandandon 30/01/2013 at 6:48 am - Reply

    Is there someway to make it use a custom menu instead of the primary?

    • Abu Zainab 07/02/2013 at 4:19 pm - Reply

      You could change the header.php starting from line 50 just manually add the new menu items as a quick resolution?

  6. FizX Entertainment (@fizx) 02/02/2013 at 12:03 am - Reply

    Amazing article help alot , can you please tell me which code to change for the background color of the theme ? i tried some but its not renderiing the changes.

    Thank you

  7. Mike 13/02/2013 at 3:01 pm - Reply

    A few weeks back I enabled the Jetpack Mobile Theme. I’ve decided that I do not like it and do not want to bother editing it and would like it removed. I’ve deactivated it in the Jetpack module but it still shows up when browsing on mobile devices. Any ideas on how to remove it completely after it’s been deactivated? Thanks!

    • Abu Zainab 13/02/2013 at 5:03 pm - Reply

      Hi Mike, make sure it is updated to the latest version and then deactivate it from the jetpack dashboard, if that doesn’t work you should deactivate jetpack altogether from the plugins section and then reactivate hopefully that should solve it.

      • Mike 14/02/2013 at 2:02 pm - Reply

        Thanks much for your reply. I think I figured it out. I had WP-Super Cache installed (but not active) and I think it was messing with things. I re-activated WP-Super Cache, emptied the cache and then deleted the plugin. I double checked that the Jetpack Mobile Theme was still deactivated and re-loaded on my mobile and it worked! Thought I would share just in case anyone else runs into this.

        • Abu Zainab 14/02/2013 at 4:00 pm - Reply

          Thanks for getting back! It will certainly help someone else!

        • scottiem303 08/02/2014 at 10:33 pm - Reply

          Thank you so much for this tip! I was freaking out trying to fix this stupid Jetpack issue. I find the plugin to cause far more problems than fix. Piece of junk.

          • Abu Zainab 11/02/2014 at 2:56 pm

            Glad it helped you scottiem303.

  8. michael 14/02/2013 at 7:41 am - Reply

    Hi. Mike
    your post is really awesome and very much helpful.
    Thanks for sharing your thought

  9. Street Style Indianapolis 21/02/2013 at 5:19 pm - Reply

    This was very helpful, and the instructions were very clear. Thanks so much!

    • Abu Zainab 22/02/2013 at 4:37 pm - Reply

      Glad you found it good! Thanks for the comment.

  10. Dev 01/03/2013 at 11:07 pm - Reply

    Thanks so much for this! I do have one question: after I put in the image logo, the text name still remains beneath the logo (like shown in your screen shot). Do you know which file I could go to to change that and how? Thanks again!

    • Abu Zainab 02/03/2013 at 12:24 pm - Reply

      Hello Dev, to remove or change the mobile themes Site Title you will need to change the custom-header.php which is inside:
      public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/inc
      on line 36 you’ll find the h1 and h2 tag just comment out or delete. Hope that helps

      • eric kindley 02/03/2013 at 6:38 pm - Reply

        The tips on this blog have helped me achieve a nice look to my mibile theme. ( http://hostpuppies.com/blog. ) I was able to change the link colors, buttons, footer color and everything. Pretty awesome tips. I just got a little more carried away

        • Abu Zainab 03/03/2013 at 4:26 pm - Reply

          Looks good Eric, thanks for sharing that with us.

  11. 209KTMDude 03/03/2013 at 10:30 pm - Reply

    As you can see the amount of customizing you can do with this css is endless. Browse this with your Iphone or Android phone. Notice I changed the Menu color, footer color, link colors, as well as button colors. See: http://trinitybailbonds.com

  12. Jocuri Diferente 27/03/2013 at 12:19 pm - Reply

    Thank you, Abu!

  13. Mobileinsurance 28/03/2013 at 4:11 am - Reply

    Hey thanks guys for your help I found it and it worked. Your input is greatly appreciated…
    state farm insurance mobile

  14. eric kindley 29/03/2013 at 2:42 am - Reply

    @mobileinsurance. Is that link to your Jetpack mobile theme? If so would you mind sharring your steps? I like your layout way better.

  15. novacioit 02/04/2013 at 3:19 am - Reply

    it didn’t work

  16. mobile4my 05/04/2013 at 11:01 pm - Reply

    good

    top mobile apps

  17. Aman Kharbanda 06/04/2013 at 12:19 pm - Reply

    Very very useful πŸ˜€

  18. online hotels deals 20/04/2013 at 5:27 pm - Reply

    I need some mobile theme .Would you help me anybody ?

  19. Kay Wong 30/04/2013 at 4:17 am - Reply

    Hi,

    Thanks for your demo. I am using the latest WordPress with Jetpack currently. Unfortunately, I couldn’t find “” in order to add a logo. Does Jetpack make change after updating last week?

    Thanks for help.

    Kay

    • Abu Zainab 30/04/2013 at 12:57 pm - Reply

      Yes there has been a change to the themes look and some code. But it is still the same you just need to find:

      < ?php $location = minileven_get_menu_location(); // get the menu locations from the current theme in use ?>

      Which is on line 21 and put your logo on top of that.

  20. eric kindley 30/04/2013 at 4:07 pm - Reply

    Oh yeah. That is a bit of a shake up. Lol

  21. Arpan Das (Cyberster) 04/05/2013 at 10:08 am - Reply

    Thank you very much. Its working great.

  22. thechaoswithin3 06/05/2013 at 2:45 pm - Reply

    So is the Powered by WordPress thing not able to be deleted now?

    • Abu Zainab 06/05/2013 at 11:21 pm - Reply

      Yes you can still delete it same way as before. πŸ™‚

  23. destinynaples123 15/05/2013 at 5:40 pm - Reply

    Hello,

    Thanks, for the great tutorial. I have found it to be very helpful! I am wanting to add an image to the home page of my mobile site and not sure how to do it or if its even possible. My actual site has a javascript image slider and it doesn’t display in the jetpack mobile site. I would like to add an image or something to the index page so when users are redirected to the mobile site they see most of the same context from my actual site. If you are able to help with this I would be very grateful!

    Thanks,
    Evan

    • Abu Zainab 17/05/2013 at 4:25 pm - Reply

      Hi Evan, you are able to have an image load just for the moblie theme, since it doesnt use your image carousel. To do that you need to open up index.php in the minileven directory within the plugin (shown above) then on line 51 after < ?php get_template_part( 'content', get_post_format() ); ?>

      just add a image tag like above and that should display an image, this is untested so I would recommend you to test it after you edit it. Hope that helps and let us know how you get on πŸ™‚

      • destinynaples123 17/05/2013 at 5:12 pm - Reply

        Thanks for the reply! I did what you said and for some reason the image isn’t loading. Maybe there is something wrong with my image tag. Here is the tag I used, . I took a screenshot of my php file, here is a link to view the screenshot http://www.destinynaples.org/wp-content/uploads/2013/05/Picture-2.png. Thanks again for the help!

        • Abu Zainab 17/05/2013 at 7:53 pm - Reply

          Hey, I’d put it outside the while loop, I’ve looked at your screenshot the tag is fine. So instead of line 51 put in after < ?php endwhile; ?> but before anything else. And then check from a mobile, to see if it comes up on any other pages too.

  24. That was a very helpful tips, with this can be able to learn how to use a jetpack mobile theme.

  25. Tom 10/06/2013 at 7:44 pm - Reply

    Thanks a lot. Is there a way to disable Sharing Buttons in posts only in mobile theme?
    As far as I’ve investigated, you can only disable it for the whole blog (excerpts, content) in the jetpack/modules/share folder

    • Abu Zainab 16/06/2013 at 5:46 pm - Reply

      Hi Tom, you can try to disable the share buttons even on the mobile homepage by going to your dashboard then Jetpack>sharing>configurate then uncheck ‘show buttons on’ for the ones that you need to disable it. That should work.

  26. Chetan@Best SEO in Mumbai 06/07/2013 at 4:43 am - Reply

    Can you explain: “Add your Logo to Jetpack Mobile theme” again? According to this article, the second point says: “around line number 42 you should find “. Can you please throw some light on this?
    I want to get a logo on one of my client’s website. The information in this pointer is incomplete. Please let me know which file to modify the logo.

    • Abu Zainab 07/07/2013 at 8:29 pm - Reply

      Hi Chetan, thank you for pointing that out. I have now updated it though I do not use Jetpack mobile theme anymore so there wasn’t a way for me to test it but it should work. Please check the update above and let me know if this works for you.

  27. Kay Wong 08/07/2013 at 9:40 am - Reply

    Hi,

    I think it would be better to insert the site logo after

    Then the logo will be shown up above the menu.

    • Abu Zainab 08/07/2013 at 1:48 pm - Reply

      Agreed! You can put in either place depending on where you want the logo to appear. Thanks for your comment.

  28. Gadable 17/09/2013 at 4:17 pm - Reply

    great article , thanks you

  29. Joel 05/11/2013 at 8:18 am - Reply

    Thanks for the info! Is there a way to get the image to resize so that no matter what mobile device it is in, it fits perfectly? Right now, the image I’m using is larger than the page and doesn’t resize so the entire mobile site width is thrown off. Thanks!

  30. pacquills 28/11/2013 at 7:53 pm - Reply

    You opened my eyes friend, check what you made me achieve in the footer and header of http://techriffs.com . Thanks a bunch.

  31. luis 14/01/2014 at 10:44 pm - Reply

    Hi,
    Does anyone knows how do I change the default home page shown by the mobile theme?
    Regards.

    • Blake Hammerton 11/02/2014 at 8:28 pm - Reply

      I second this option! I have a site that I want to have land on a specific page instead of the blog. I’m using Jetpack 2.6 (can’t upgrade). I’m looking for it in the code, but it would help if I knew a specific code and line to change.

      By the way, that you so much for this tutorial. This is helping immensely.

    • whytotravel 09/08/2014 at 10:14 am - Reply

      I am also looking for how I can change the default home page for the mobile theme (without changing the default home page for the normal webbrowser). Would be great if someone could come up with and idea… Regards, Daniel

  32. reviews allvetmed 22/03/2014 at 8:41 pm - Reply

    thats great

  33. geekovert 16/11/2014 at 2:25 pm - Reply

    Hi. I want to decrease the font size of Header. How can I do the same

  34. r-t-b 25/02/2015 at 7:02 pm - Reply

    Thanks, have been going in circles at wordpress support for this answer.

  35. Peh 19/03/2015 at 5:46 pm - Reply

    Hi there, sorry i very new to wordpress, i try to locate the file footer.php (wanna change the footer to my own link) follow your guide above but I only see fonts and js folder and inside there no footer.php can you please help me…ty

  36. buddykarl 07/04/2015 at 5:54 pm - Reply

    Hi and thanks for the great how-to guide. Everything is working with the exception of the copyright tag not showing up only on the home page beneath the ‘view full site’ link. Every other page displays it, but not the home page. Any thoughts as to why this isn’t displaying on that one page?

  37. Rashedul islam 21/05/2015 at 4:27 am - Reply

    thanks a lot for this article, and jetpack has been the most popular wordpress plugin. BUT i always prefer not to use the mobile friendly option, because i find that option weird. when i enable that feature, i see the mobile version is enabled for both desktop and mobile site. so i prefer rather then using this, use a responsive theme.
    thanks

  38. Rafaqat 23/10/2015 at 2:44 pm - Reply

    i just want to change the link color to #2266aa of the posts displaying at the main page.

  39. Anthony 27/05/2016 at 12:58 am - Reply

    Good post. I wondered where they’d buried the damn thing.

  40. Andy 25/08/2016 at 1:37 pm - Reply

    Perfect! Thank you very much! But I think, every update I have to put my logo back in the header.php, have I?

  41. Luis Matos 09/10/2016 at 5:25 am - Reply

    Thank you very much

Leave a Comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.