{"id":16978,"date":"2020-03-27T11:19:34","date_gmt":"2020-03-27T11:19:34","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=16978"},"modified":"2020-04-27T08:21:09","modified_gmt":"2020-04-27T08:21:09","slug":"what-is-amp-theme-framework-and-how-to-use-it","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/what-is-amp-theme-framework-and-how-to-use-it\/","title":{"rendered":"What is \u201cAMP Theme Framework\u201d and how to use it?"},"content":{"rendered":"\n<p>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\u2019s a heaven for Frontend developers because they can be experimental and play around with the code easily. <\/p>\n\n\n\n<p>To install and use AMP theme Framework, first, you need to download it <a href=\"https:\/\/ampforwp.com\/amp-theme-framework\/\">from here<\/a><\/p>\n\n\n\n<p><strong>Follow these step to Activate the AMP Theme Framework<\/strong><\/p>\n\n\n\n<p>After downloading <strong>the AMP Theme Framework<\/strong> on your Desktop follows the below-given steps.<\/p>\n\n\n\n<p><strong>Step 1 \u2013<\/strong>&nbsp;Go to&nbsp;<strong>Plugins<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New<\/strong>&nbsp;then click on&nbsp;<strong>Upload Plugin<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"755\" height=\"382\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png\" alt=\"\" class=\"wp-image-16549\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png 755w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-300x152.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-100x51.png 100w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/figure>\n\n\n\n<p><strong>Step 2 \u2013<\/strong> <strong>AMP Theme Framework<\/strong> is a free Plugin. You won\u2019t find that extension in the WordPress Plugin directory. So you have to upload this plugin after downloading.<\/p>\n\n\n\n<ul><li>Click on&nbsp;<strong>Upload Plugin<\/strong><\/li><li>then choose the<strong> <\/strong>\u201c<strong>AMP Theme Framework<\/strong>\u201d Extension from which you already downloaded.<\/li><li>After that, click on&nbsp;<strong>Install Now<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5.png\"><img decoding=\"async\" loading=\"lazy\" width=\"911\" height=\"318\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5.png\" alt=\"\" class=\"wp-image-16616\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5.png 911w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5-300x105.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5-768x268.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5-60x21.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5-100x35.png 100w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Step 3 \u2013<\/strong>&nbsp;After Uploading the plugin, click on&nbsp;<strong>Activate Plugin. <\/strong>The AMP Theme Framework will be visible on the AMP version of your site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2.png\"><img decoding=\"async\" loading=\"lazy\" width=\"684\" height=\"214\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2.png\" alt=\"\" class=\"wp-image-16618\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2.png 684w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2-300x94.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2-50x16.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2-60x19.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2-100x31.png 100w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Step 4 &#8211;<\/strong> Now you need to select the<strong> AMP Theme Framework<\/strong> option. You will find this option in the <strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP option panel<\/strong>&nbsp;-&gt;&nbsp;<strong>Design<\/strong>&nbsp;-&gt;&nbsp;<strong>Themes<\/strong>&nbsp;-&gt; Select&nbsp;<strong>AMP Theme Framework<\/strong> option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button see the below screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1230\" height=\"595\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4.png\" alt=\"\" class=\"wp-image-16620\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4.png 1230w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-1024x495.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-768x372.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4-100x48.png 100w\" sizes=\"(max-width: 1230px) 100vw, 1230px\" \/><\/a><\/figure>\n\n\n\n<p>When you select the theme from this dropdown and save it then it will start working.<\/p>\n\n\n\n<p><strong>Step 5 &#8211;<\/strong> If you want to create Custom AMP theme Framework then you need to <strong>WordPress Dashboard<\/strong> -&gt; Click on the &nbsp;<strong>Plugins<\/strong> -&gt; <strong>Plugin Editor<\/strong> -&gt; &nbsp;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 <strong>AMP Theme Framework<\/strong> plugin that you want to edit and then click on the Select button and then click on the &#8220;<strong>Update Fil<\/strong>e&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1345\" height=\"761\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3.png\" alt=\"\" class=\"wp-image-16627\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3.png 1345w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-300x170.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-1024x579.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-768x435.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-50x28.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-60x34.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3-100x57.png 100w\" sizes=\"(max-width: 1345px) 100vw, 1345px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Step 6<\/strong> &#8211; Now you need to select the &#8220;<strong>My<\/strong> <strong>Custom<\/strong> <strong>AMP Theme Framework&#8221;<\/strong> option. You will find this option in the <strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP option panel<\/strong>&nbsp;-&gt;&nbsp;<strong>Design<\/strong>&nbsp;-&gt;&nbsp;<strong>Themes<\/strong> -&gt; Select &#8220;<strong>My Custom<\/strong> <strong>AMP Theme Framework&#8221;<\/strong> option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button see the below screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1277\" height=\"594\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3.png\" alt=\"\" class=\"wp-image-16631\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3.png 1277w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-1024x476.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-768x357.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3-100x47.png 100w\" sizes=\"(max-width: 1277px) 100vw, 1277px\" \/><\/a><\/figure>\n\n\n\n<h4>The Output of the Custom AMP Theme Framework<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1349\" height=\"657\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3.png\" alt=\"\" class=\"wp-image-16633\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3.png 1349w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-1024x499.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-768x374.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3-100x49.png 100w\" sizes=\"(max-width: 1349px) 100vw, 1349px\" \/><\/a><\/figure>\n\n\n\n<h4>To make it easy, we have created a video tutorial<\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/2-AMp-theme-framework.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[185],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16978"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=16978"}],"version-history":[{"count":11,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16978\/revisions"}],"predecessor-version":[{"id":17183,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16978\/revisions\/17183"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=16978"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=16978"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=16978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}