What is “AMP Theme Framework” and how to use it?

If you are about to create a new theme for AMP, then we recommend you to start from here. Everything we use in the template files is created as a component and these components are added to the core plugin. So you never have to use a raw code which could mess up the functionality of the AMP. Each component is loaded into a PHP function, so you just have to call that component by adding simple PHP function and you will be able to get that specific functionality working. It’s a heaven for Frontend developers because they can be experimental and play around with the code easily.

To install and use AMP theme Framework, first, you need to download it from here

Follow these step to Activate the AMP Theme Framework

After downloading the AMP Theme Framework on your Desktop follows the below-given steps.

Step 1 – Go to Plugins -> Add New then click on Upload Plugin.

Step 2 – AMP Theme Framework is a free Plugin. You won’t find that extension in the WordPress Plugin directory. So you have to upload this plugin after downloading.

  • Click on Upload Plugin
  • then choose the AMP Theme Framework” Extension from which you already downloaded.
  • After that, click on Install Now

Step 3 – After Uploading the plugin, click on Activate Plugin. The AMP Theme Framework will be visible on the AMP version of your site.

Step 4 – Now you need to select the AMP Theme Framework option. You will find this option in the WordPress Dashboard -> AMP option panel -> Design -> Themes -> Select AMP Theme Framework option and then click on the “Save Changes” button see the below screenshot.

When you select the theme from this dropdown and save it then it will start working.

Step 5 – If you want to create Custom AMP theme Framework then you need to WordPress Dashboard -> Click on the  Plugins -> Plugin Editor ->  On the right-hand side, it lists all the files from the selected plugin. There is a drop-down menu on the top that allows you to select an AMP Theme Framework plugin that you want to edit and then click on the Select button and then click on the “Update File” button.

Step 6 – Now you need to select the “My Custom AMP Theme Framework” option. You will find this option in the WordPress Dashboard -> AMP option panel -> Design -> Themes -> Select “My Custom AMP Theme Framework” option and then click on the “Save Changes” button see the below screenshot.

The Output of the Custom AMP Theme Framework

To make it easy, we have created a video tutorial

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Share
Published by
Sonali R

How to create an AWeber form in AMP

If you want to add an AWeber form in AMP then first you need to…

3 years ago

How to setup webpushr notification in AMP

Webpushr is the fastest growing web push notifications platform that marketers love & developers rely…

3 years ago

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

3 years ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

4 years ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

4 years ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

4 years ago