Make custom themes for AMP on WordPress (Automattic plugin): 2 easy ways!

0
SHARES
Learn 2 easy ways to make custom themes on WordPress AMP pages with Automattic's plugin

AMP (Accelerated Mobile Pages) has been slowly gaining traction since it’s introduction in 2015. WordPress already has two popular plugins to enable AMP on WordPress Blogs. Today, I am going to show you how to make a custom theme for AMP on WordPress.

AMP Plugins for WordPress

These are the two popular plugins available right now to enable AMP on WordPress Blogs:-

  1. AMP for WordPress by Automattic (Official)
  2. AMP for WP

The AMP for WP Plugin by default has some designs and themes. And, it supports additional features like comments. But, in this article, I will explain the steps to make a custom theme for AMP on WordPress with Automattic’s plugin.

Automattic’s plugin for AMP on WordPress implements very basic features on the AMP page. The default theme doesn’t even have a sidebar. The customiser only allows making minimal changes like colours.

Custom Theme for AMP on WordPress with Automattic’s Plugin

Before we begin, I suggest you install the following plugins on WordPress:-

  1. AMP for WordPress
  2. Glue for Yoast SEO & AMP

The glue plugin makes sure all the SEO related tags of the page including opengraph tags for social network are passed onto the AMP pages too. After installation and activation, you may access the AMP page for an article by adding /amp to the URL like this. For eg:- you may access the AMP version of this article at https://techarim.com/how-to-custom-theme-amp-wordpress-automattic-plugin/amp. For you now, it will show a very minimal page with a headerbar and your article.

Now, let’s learn how to customise the theme. Remember that the theme customisations I talk about will keep the core functionality of the AMP plugin as such. This means, the Plugin will still convert all your <img> tags to <amp-img> for example. There are two ways to customise the AMP theme depending on your needs:-

  1. Partially Custom AMP Theme
  2. Fully Custom AMP Theme

1. Partially Custom AMP Theme

This is what I recommend most users to do. This is very similar to creating a Child Theme. So, if you are familiar with making and editing child themes, this will be very simple for you. Here are the steps to follow:-

  1. Go to the AMP Plugin’s templates folder at wp-content/plugins/amp/templates and copy all the .php files there, eg:- header.php, style.php, etc.
  2. Go to your current theme’s folder, for eg:- wp-content/themes/twentysixteen. Create a new folder called amp there.
  3. Paste all the copied .php files in the amp folder.
  4. Now, you may edit the files inside the amp folder to make changes to the theme like add a sidebar, change footer links, etc.

Tip: To make changes to the CSS, edit them inside the style.php file. Any changes you make to the files in the amp folder will over-ride the default theme. So, if you empty (not delete) the header.php file, the headerbar will disappear altogether.

2. Fully Custom AMP Theme

If you want to start with a completely clean slate, AMP for WordPress also allows that. Remember that with a fully custom AMP theme, you will be given a blank page. You will have to add everything from the starting <!doctype html>, <html amp> to the closing </html>. Here are the steps to follow if you have made up your mind on making a fully custom AMP theme:-

  1. Go to your theme’s functions.php and add the following code:-
    add_filter( 'amp_post_template_file', 'techarim_amp_set_custom_template', 10, 3 ); 
    function techarim_amp_set_custom_template( $file, $type, $post ) { 
        if ( 'single' === $type ) { 
            $file = dirname( __FILE__ ) . '/my-amp-template.php'; 
        }
    return $file; 
    }
  2. Go to your theme’s folder and create a new file by the name my-amp-template.php. Add all html and template for your AMP theme into the file. Start with <!doctype html>.
  3. To complete the installation, apart from adding all AMP compulsory code, here are a few things you will have to add:-
    • In the <head> section, add the following:-
      <?php do_action( 'amp_post_template_head', $this ); ?>
    • Before the closing </body> tag, add the following:-
      <?php do_action( 'amp_post_template_footer', $this ); ?>
    • Within your AMP styles, i.e., in the <style amp-custom> section, add this:-
      <?php do_action( 'amp_post_template_css', $this ); ?>

Adding the additional code in relevant areas will make designing easier. But, if you truly want to do everything by yourself and are an expert, you may skip the additional do_action codes too. While this is a

Conclusion

Apart from these, if you want to make simple changes, you may also use function hooks. But, for most people, I would suggest the above methods. If you have any doubts, please feel free to comment below. I will get back at the latest. If you want me to add more AMP tutorials, please let me know.

Share this article with your friends:-

0
SHARES
Category: SEO

Like it? Tell us about it.

Your email address will not be published. Required fields are marked *