How to Create a Custom AMP Theme (Tutorial with Source Code)

Before you get started: This tutorial is for developers and the people who are not afraid of playing with the code.

We are we going to do?

We will be creating a custom theme for AMP from scratch. This theme will be update proof, meaning if you update the AMP or AMPforWP plugin the future, your custom theme changes will remain the same as it is. We are calling this one as ‘AMP Starter Theme’.

What will the final output look like?

The above two are the screenshots of AMP starter theme, which we will be building in this tutorial. It’s available at Github.

How to Install & Test this Theme?

Download it from Github Repo and install it from the plugins of your WP-admin dashboard, just like any other plugin and then activate it. Then just check your website’s /amp version and you will see this theme in action.

Let’s have a look at Folder Structure

Here is an overview of the folder structure:

1. ampforwp-custom-theme.php: This is the main file that contains the name of the theme and version. In this file, we define the custom files for header, footer, index, etc. as well as registering Google fonts and menus. If you are familiar with the WordPress theming, then think of this file as functions.php but for AMP custom theme.
2. template / archive.php: This is the file which allows us to define the layout of archives, such as categories, tags and date archive.
3. template / footer.php: This is where you can add your footer code which will get displayed at the end of the website.
4. template / header-bar.php: This is where you can define the header for the theme.
5. template / index.php: This is the homepage of your AMP theme. This file contains the loop with the pagination. If you are looking to modify the home of your AMP version, then this is the file you modify this file.
6. template / single.php: This file allows you to modify the look and feel of the Post article. For this tutorial, I have only added few basic elements of the post, but you should not underestimate the power of this file, you can go as advanced as you want, as long as you make it compatible with AMP.
7. template / style.php: This file contains all the stylesheet of the theme. This file is divided into two parts, first half is the barebones core and the second part is the custom CSS that helped me achieve the look I wanted to have. I will explain more about this file in the later part of the article.

Now that you have some idea about each file, let’s go through each and every file, it’s section and try to understand it. One thing to remember here is that even though it’s called a theme, technically it’s a plugin that act’s as a theme.

Available at Github! Start playing & modifying to make new themes for AMP.

We have this AMP Starter theme available for download from Github. Try it, play with the code and make new themes. You are free to use this code on your or your client’s website. You are free to use this code in the commercial project as well.

Let’s dive right into the code: (In-depth)

The theme is divided into two main parts: ampforwp-custom-theme.php & template folder. The ampforwp-custom-theme.php is the main file where functions are defined, and then the template folder is where the layout can be modified.

1. ampforwp-custom-theme.php

So, Initially, we will define a name to the plugin, so that WP detects it and makes it as an installable plugin.

Plugin Name: AMP Starter Theme
Plugin URI: https://wordpress.org/plugins/accelerated-mobile-pages/
Description: This is a custom AMP theme built to show how easy it is to make custom AMP themes.
Version: 1.0
Author: Mohammed Kaludi, Ahmed Kaludi
Author URI: http://ampforwp.com/themes
License: GPL2

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) exit;

We’re now defining a plugin directory path in line 1. We then removed the old files on the line 4 because we want to completely override the template with our custom files which we are defining at line 16.

// Define the Folder of the theme.
define('AMPFORWP_CUSTOM_THEME', plugin_dir_path( __FILE__ ));

// Remove old files
add_action('init','ampforwp_custom_theme_remove_old_files',11);
function ampforwp_custom_theme_remove_old_files(){
remove_action('pre_amp_render_post','ampforwp_stylesheet_file_insertion', 12 );
remove_filter( 'amp_post_template_file', 'ampforwp_custom_header', 10, 3 );
if ( is_single() ) {
remove_filter( 'amp_post_template_file', 'ampforwp_custom_template', 10, 3 );
}
add_action('amp_post_template_head', function() {
remove_action( 'amp_post_template_head', 'amp_post_template_add_fonts');
}, 9);
}
// Register New Files
add_action('init','ampforwp_custom_theme_files_register', 10);
function ampforwp_custom_theme_files_register(){
add_filter( 'amp_post_template_file', 'ampforwp_custom_header_file', 10, 2 );
add_filter( 'amp_post_template_file', 'ampforwp_designing_custom_template', 10, 3 );
add_filter( 'amp_post_template_file', 'ampforwp_custom_footer_file', 10, 2 );
}

We now registering / overriding the files with over own files that are located in the folder called ‘template’. On line 1 & 35, we are calling the header and footer. On 12, 18 and 24, we are defining the files for Single posts, archives and the Homepage. and on line 34, we are setting up the file for footer.

// Custom Header
function ampforwp_custom_header_file( $file, $type ) {
if ( 'header-bar' === $type ) {
$file = AMPFORWP_CUSTOM_THEME . '/template/header-bar.php';
}
return $file;
}

// Custom Template Files
function ampforwp_designing_custom_template( $file, $type, $post ) {

// Single file
if ( is_single() || is_page() ) {
if('single' === $type && !('product' === $post->post_type )) {
$file = AMPFORWP_CUSTOM_THEME . '/template/single.php';
}
}
// Archive
if ( is_archive() ) {
if ( 'single' === $type ) {
$file = AMPFORWP_CUSTOM_THEME . '/template/archive.php';
}
}
// Homepage
if ( is_home() ) {
if ( 'single' === $type ) {
$file = AMPFORWP_CUSTOM_THEME . '/template/index.php';
}
}

return $file;
}

// Custom Footer
function ampforwp_custom_footer_file($file, $type ){
if ( 'footer' === $type ) {
$file = AMPFORWP_CUSTOM_THEME . '/template/footer.php';
}
return $file;
}
add_action( 'amp_post_template_head', 'amp_post_template_add_custom_google_font');

Now, we are registering the Google fonts that we will be using in this design template.

</pre>
<pre>// Loading Custom Google Fonts in the theme
function amp_post_template_add_custom_google_font( $amp_template ) {
    $font_urls = $amp_template->get( 'font_urls', array() );
	$font_urls['source_serif_pro'] = 'https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600|Source+Sans+Pro:400,700';  ?>
<link rel="stylesheet" href="<?php echo esc_url( $font_urls['source_serif_pro'] ); ?>">
<?php }
</pre>
<pre>

We then used the below code to bring the stylesheet in action.

// Loading Core Styles
require_once( AMPFORWP_CUSTOM_THEME . '/template/style.php' );

We are using clickable sub menus which are made with the help of amp-accordion, so we need to call that script properly for amp-accordion menu to work.

// Add Scripts only when AMP Menu is Enabled
if( has_nav_menu( 'amp-menu' ) ) {
if ( empty( $data['amp_component_scripts']['amp-accordion'] ) ) {
$data['amp_component_scripts']['amp-accordion'] = 'https://cdn.ampproject.org/v0/amp-accordion-0.1.js';
}
}

2. Template Folder

The structure of the template folder is not much different from the WordPress theme folder structure. The only thing that is different is that this doesn’t have a style.css, but instead, it has style.php. I have divided style.php into two parts,

You will get a better idea when you will have a look at style.php. The styling in the template folder is no really complex if you are familiar with HTML or WordPress templating. I would recommend you have a look at the Template folder and files.

Download the Source Code Files

The code is open source and available for the community. Download it from the Github page, please feel free to play with the code and be creative with it! There is much more in-depth documentation coming over to cover each and every aspect of the theming and extending it your way.

Share it with the Community

If you have made a unique or interesting theme for AMP, then please send the zip file to us via the contact us page and we will feature your theme on our website. It will help and inspire thousands of other developers and users.

On the closing note, Thank you so much for using the plugin! I would be so interested in hearing your feedback and thoughts. If you are having any issues, then feel free to comment below.