Adding Reader Themes

Reader mode is an option if your theme is not currently AMP compatible. By default, you can select any of the WordPress Core Themes (except for the non-responsive Twenty Ten) and the AMP Legacy theme as your Reader mode theme. While in the future the plugin will increase the list of AMP compatible ecosystem themes, it is possible to add any AMP compatible theme to the list with just a few steps depending on your current active theme. In this Playbook, we discuss three common scenarios where Reader themes can be used and how to configure them.

Scenario One #

In this scenario we have an Active theme that is not AMP compatible. In this case we want to use an AMP compatible theme as the reader theme. We can do so following these steps:

  1. Install an AMP compatible theme
  2. Navigate to AMP > Settings > Reader > Reader themes to check if the theme is available on the list 
  3. If not present, create a child theme of the AMP compatible theme
  4. Add the AMP: true metadata value to the child theme’s stylesheet (style.css file):
/* Theme Name: AMP Reader Theme Description: This is an AMP Reader Theme Template: harrison Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ampreadertheme AMP: true */

5. The theme will now be available in the list to use for your AMP content in Reader mode:

Optionally, providing a  screenshot-mobile.png (or screenshot-mobile.jpg) alongside the child theme’s screenshot.png allows for better presentation in the list of Reader themes.

Scenario Two #

In this scenario we have an active theme is AMP compatible, but would like to make specific changes or use another AMP compatible theme for Reader mode. 

While the recommendation is to use Transitional or Standard mode if your theme is fully AMP compatible, follow the same steps above using a child theme of your active theme or another installed theme. 

Scenario Three #

In this scenario we have an active theme is already a child theme or custom theme, and would like to use an AMP compatible theme available on WordPress.org or one already installed.  In this case we can do the following:

Add the amp_reader_themes filter to your active theme’s functions.php file or a custom plugin

add_filter( 'amp_reader_themes', function ( $reader_themes ) { $reader_themes[] = [ 'name' => 'Neve', 'slug' => 'neve', 'preview_url' => 'https://wp-themes.com/neve', 'screenshot_url' => 'https://i0.wp.com/themes.svn.wordpress.org/neve/2.7.5/screenshot.png?w=1144&strip=all', 'homepage' => 'https://themeisle.com/themes/neve/', 'description' => 'This is a non-core theme.', ]; return $reader_themes; } );

Update the values for your preferred AMP compatible theme. Please note the slug of the theme is required.