1. Home
  2. Developer Docs
  3. Extending
  4. How to Create a Custom AMP Theme (Tutorial with Source Code)

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

UPDATE: This Tutorial was published before the release of AMP Framework Theme, If you are considering to create a theme for AMP, then Use AMP Theme Framework.

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?

Home Page & Single Page

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

Structure of AMP Starter

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.

UPDATE: This Tutorial was published before the release of AMP Framework Theme, If you are considering to create a theme for AMP, then Use AMP Theme Framework.

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,

Template Folder
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.

UPDATE: This Tutorial was published before the release of AMP Framework Theme, If you are considering to create a theme for AMP, then Use AMP Theme Framework.

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.

UPDATE: This Tutorial was published before the release of AMP Framework Theme, If you are considering to create a theme for AMP, then Use AMP Theme Framework.

Updated on November 4, 2017

Was this article helpful?

Related Articles

Comments

    1. Hey Adjie Purbojati,

      Thanks! We’re so glad that you are using it!

      Please do share with us your results.

  1. Hello,
    first , many many thank to share your solution and show how to template your work.
    I’m curently work to build a template , but i have some problem.
    my original site is configured with a static page,(accueil.php) this page loop on a custom post-type and some custom widget (this page load many information all hover the site)
    in your template if a define index.php as is_home i have my home-page ok ,but , this is not the blog page , my blog page is home.php with category.php , so , i don’t see how i can load the blog , i try to add “is_front_page” and “is_home” to separate the both , but this isn’t work .
    I would be very happy if I could have an indication to get to target my home page and my blog page .

  2. Hi guys.

    Thanks for this. I have the posts working, but the homepage doesn’t seem to be displaying. I’m not sure if there is a setting for the homepage (a list of the posts with pagination). Every time I go to /amp, it simply says page not found. Any ideas on how to fix this?

    1. Hey James,

      Yes, there is a control in settings panel from where you can turn-on homepage support. Do let me know if this helped you.

      Mohammed Kaludi

  3. Hi I need diffrent layouts for diffrent pages. How can i achive this ? Right now we have only one single.php in r code

  4. For themes that have an /element/ folder inside, how do I overwrite those as well? Many thanks.

Add A Comment