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:
- 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.
- template / archive.php: This is the file which allows us to define the layout of archives, such as categories, tags and date archive.
- template / footer.php: This is where you can add your footer code which will get displayed at the end of the website.
- template / header-bar.php: This is where you can define the header for the theme.
- 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.
- 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.
- 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.
Thank you guys! you made my day 🙂
Hey Adjie Purbojati,
Thanks! We’re so glad that you are using it!
Please do share with us your results.
Thanks, look perfect.
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 .
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?
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
Good thing I found this. The URL on the github page seems to be broken.
https://ampforwp.com/step-step-guide-modify-amp-theme
Any idea if that would be up?
Hey, I have checked all the Github URL’s and they seem to work perfectly fine.
Perhaps you are looking for this url: https://github.com/MohammedKaludi/ampforwp-custom-theme/
Any more help would be appreciated