Before you get started: This tutorial is for developers and the people who are not afraid of playing with the code.
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’.
The above two are the screenshots of AMP starter theme, which we will be building in this tutorial. It’s available at Github.
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.
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.
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.
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.
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'; } }
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.
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.
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.