The Mobile Theme

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

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 does it work?

  • The Mobile Theme is a lighter, performance optimized theme included in the Newspaper main theme and it loads only for mobile devices.
  • It comes with it’s own templates for page, post, category, etc so your current templates from the desktop theme will get converted to the mobile theme layout.
  • The homepage is automatically changed to a layout containing a grid showing 3 featured posts and a latest articles section.
  • The Mobile Theme is also used as an AMP template. Please read our AMP tutorial for more details.
  •  Once activated it’s own administration panel will show up at the bottom of the Theme Panel area, from here you can customize various settings for the “Mobile theme”.
  • 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.

mobile-theme-doc

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.

  • To make your custom pages visible into the Mobile Theme they need to be recreated inside the Mobile Editor tab. It supports custom HTML and photos too !
  • This Mobile Editor does not recognize a page builder so the tagDiv Composer shortcodes cannot be rendered.

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

Important notes:

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 desktop 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 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 can be disabled for individual posts or pages from the Gutenberg editor using the following option:

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 settings:

  • AMP settings – lets you decide what the mobile theme is used for. Read More about the AMP implementation here.
  • 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

 

Theme colors:

  • Accent color – theme main color which applies to various elements
  • Color settings for menu bar menu, mobile menu, footer and sub-footer areas

 

Mobile theme fonts: 

  • Header – change the header fonts for the main menu, text logo and tagline
  • Modules – Article title – choose the font for the 2 mobile module article titles 
  • Post content – lets you change the fonts for the post title, content, quotes and default heading tags (H1 – H6)
  • Post elements – all the different post elements can have separate fonts like category tags, author, date, comments, views, next/prev posts, author box, related articles, etc.
  • Footer – footer menu and footer copyright font

 

Mobile menu/search background:

  • Background image – Lets you choose the background image for the mobile menu and for the mobile search.
  • Repeat – Set the image uploaded to repeat if needed and tile Vertically or Horizontally
  • Size – Select between different available sizes for the uploaded background image
  • Position – Position your background image

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

 

Excerpts:

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

 

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

 

Grids: 

  • Show front page grid – Show or hide the front page grid section.
  • Show category page grid – Show or hide the category top grid section.
  • Number of posts – Choose the number of posts to display in the grids.
  • Front page grid category filter – Choose a single category filter for your homepage grid.
  • Front page grid sort – Set the homepage grid sorting option. Choose between Featured posts, Latest posts, Popular (all time) or just Random posts.

Latest Articles:

 

  • Limit post number – Limit the number of posts you want to show. if left empty, the setting will default to the WordPress blog and post setting from WP Settings>Reading
  • Offset posts – Start the count with an offset. If you set the top grid to show for example 5 posts, you can make the latest articles section to start from the 6’th post (by using offset 5) in order to avoid duplication. The option only applies if the top grid is set to show latest articles

 

Category tag on Modules/Blocks:

  • From here you can show or hide the category tag from mobile theme modules.