Congratulations, you’ve successfully activated Mobile Theme on Jetpack! Now your lovely site looks great on small mobile screens also, and it was only one click away. But wait, something is still missing… Right, there are no sidebars – and no ads inside! Maybe it makes no difference for the readers, but not for you as the blog owner.
Well, the Jetpack documentation explains that they do use look for a sidebar with some predefined ID to show it at the bottom of the page. It means that maybe you do have one of your sidebars shown there. If this is the case, you have no choice but to rearrange the content of this sidebar to match it to mobile page. Otherwise keep reading, and I will explain how to add a new dedicated sidebar for mobile theme.
First, you have to register a new sidebar. This can be done directly in your current theme, but creating a child theme is more elegant. Also, you will not lose the changes if your theme will be updated. The process is pretty straightforward – create a folder for your new theme (I named mine “Mobile Plus”) and placed it under “wp-content/themes/mobile-plus” folder. Then create the basic “style.css” file (required for a child theme) and the “functions.php” file – this one will register your new toolbar.
Here is the “style.css” from my theme. Note that my main theme is “andreas09”, you have to use the name of your main theme in the highlighted lines.
/* Theme Name: Mobile Plus Description: Child theme for the mobile ads support Author: Anton Khitrenovich Template: andreas09 */ @import url("../andreas09/style.css");
Here is the “functions.php” from my child theme. You can use it as-is. Note the only function call in the highlighted line – this is the line that registers the new sidebar with the required ID.
<?php // Register sidebar to be used by Mobile Theme from JetPack register_sidebar(array('name' => 'Mobile Sidebar', 'id' => 'sidebar-1')); ?>
That’s all. Now you can switch to your new theme and add the Mobile Banner from Google Adsense (or another mobile ads code) to your fresh Mobile Sidebar!
Note: Don’t forget to re-select the menu your theme is using, as by default it is not set for the newly chosen theme!
This is how this blog looks like on my iPhone – before and after the change:
9 thoughts on “How to enable Google Adsense on Jetpack Mobile Theme”
Awesome issues here. I’m very glad to look your article. Thanks so much and I am looking ahead to touch you. Will you please drop me a mail?
Are you interested in something specific?
Hello, i think that i noticed you visited my website thus i got here to return the choose?.I’m trying to in finding things to improve my site!I assume its adequate to make use of a few of your ideas!!
Thank you, great everything is explained and of course works great. I struggled for days looking for a solution … and I finally found … Another big thank you
This works for me. Many thanks Anton. I was almost giving up before I ran into your blog.
This sounds promising ! Let me give it a try. Also, the last screenshot (With the adsense ad) shows that the ad is a little out of bounds on the right side. You may want to fix that 🙂
I agree that it is not perfect.
Yet, for this blog mobile ads are responsible for ~0.05% of the total ad revenue – so I don’t really care about it 🙂
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.
Strange. It is enabled here, and I see mobile version on my phone only. The regular version is shown on desktop and tablets.