Home Newspaper 7 Documentation The Mobile Theme

The Mobile Theme

Available on: Newspaper v7+

The Mobile Theme is a feature specially designed to maximize the theme performance on mobile devices.

The mobile devices are evolving with the speed of light becoming smaller and faster each day. All the digital user experiences are now filtered through the speed the information can be accessed on mobile. This is the ultimate challenge: making the website on mobile as fast as on desktop as mobile visitors are looking for a fast page loading speed, clean content and relevant information. We took all these aspects back to the design board and solve them by creating the new Mobile Theme feature.

Watch the video

The philosophy

The mobile browsing experience is often frustrating. The causes are multiple: slow page load speed, small text which is hard to read, low quality images, banners blocking the content, buttons which are too close to each other making it impossible to tap on the desired one, etc. We decided to put an end to this mess and for this we built the “Mobile theme”.

How it works?

The Mobile Theme is a lighter, performance optimized theme included in the Newspaper main template and it loads only on mobile devices. It comes with it’s own templates for page, post, category, etc.  Each template was carefully tuned to offer optimal performance and exquisite user experience. The posts come in a predefined clean format including all the features which are available on the main theme. On homepage it automatically renders a grid which contains featured posts and a latest posts section. The theme doesn’t require any other plugin and this ensures maximum performance. Once activated it’s own administration panel will show up in the Theme Panel area, from here you can customize various parameters for the “Mobile theme”.

mobile-theme-doc

The Mobile Theme is optional meaning that, if you decide not to use it, the main theme will still look good on mobiles because of it’s responsive design.

Caching

The mobile theme works fine with WP Super Cache. For more details on how to set the plugin visit the Cache plugin – install and configure page.

Installation

The plugin can be found in this path:

Newspaper-tf\plugins\td-mobile-plugin.zip

Go to your WordPress admin panel and open the Plugins > Add New section.Click on the Upload Plugin button and browse your local computer to find the Newspaper-tf > Plugins folder. Select the td-mobile-plugin.zip file and click the Install Now button.

mobile_install

Page customization

Homepage – the “Mobile Theme” comes with a single predefined page template that includes two section:

  • top grid – displays 3 featured posts (posts included in the Featured category)
  • latest articles – displays the latest articles

This template appears only if a static page is used, for this check the wp-admin Settings->Reading section.

td-mobile-theme-page-template

To add custom HTML, images or text just edit the page and add those elements inside the Mobile Editor.

td-mobile-theme-custom-elements

On front-end the custom elements will appear between the Top Grid and the Latest Articles section.

td-mobile-theme-custom-elements-frontend

Important note

Regular pages – The content of custom pages (ex. Contact Us page), present on the main theme, doesn’t appear on the “Mobile theme”, because the last one comes with it’s own editor and the possibility to add content that’s specially designed for mobiles. This offers you the opportunity to display the same content in two different ways, one optimized for desktops and another for mobiles.

Page builder elements – The “Mobile theme” is designed for users who want to optimize the page content for mobile devices or they want to display fewer / different elements on mobiles. For optimal performance we removed the page builder (Visual Composer) dependency; this means you cannot use the page builder elements for the “Mobile theme” pages. If you want to display the same elements on both mobile and desktop, don’t use the mobile theme, the main theme is already capable of this with it’s responsive design for mobiles.

td_find_us_here

The Mobile Theme Settings

Once the plugin is installed a new tab called “Mobile Theme” will show up in the Newspaper -> Theme Panel area. The options available in this tab allow you to customize the look and functionality of the mobile theme.

mobile_theme_setting_area

Mobile settings

  • main menu – select the main menu
  • footer menu – select the sub-footer menu
  • show sign in / join – chose if you want to display or hide the user register/login area, it will appear in the main menu panel

mobile_theme_mobile_settings

Theme colors

  • accent color, theme main color which applies to various elements
  • color settings for main menu, footer and sub-footer areas

mobile_theme_theme_colors

Mobile ads

  • ad title – set your desired title, this will appear on top of each ad (optional – by default no title is displayed)
  • general ads – general predefined ad spots, just add the code in the desired area
  • article ads – predefined article/single ad spots, just add the code in the desired area

mobile_theme_mobile_ads

Excerpts

  • title length – set the title excerpt length for modules used by the theme (1 and 2)

mobile_theme_excepts

Custom code

  • custom CSS – use this panel to add custom CSS modifications
  • custom HTML – add custom HTML elements, they will appear at the page bottom
  • custom JavaScript – add custom JavaScript

mobile_theme_custom_code