Posted by December 7, 2012on
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: