{"id":4009,"date":"2017-09-22T13:20:21","date_gmt":"2017-09-22T13:20:21","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=4009"},"modified":"2020-02-25T12:20:28","modified_gmt":"2020-02-25T12:20:28","slug":"install-activate-amp-theme-framework","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/install-activate-amp-theme-framework\/","title":{"rendered":"How to Install AMP theme Framework"},"content":{"rendered":"<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<p><strong>Follow these step to Activate the AMP Theme Framework<\/strong><\/p>\n<p>After downloading <strong>AMP Theme Framework<\/strong><strong>\u00a0<\/strong>on your Desktop follow the below-given steps.<\/p>\n<p><strong>Step 1 \u2013<\/strong>\u00a0Go to\u00a0<strong>Plugins<\/strong>\u00a0-&gt;\u00a0<strong>Add New<\/strong>\u00a0then click on\u00a0<strong>Upload Plugin<\/strong>.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"755\" height=\"382\" class=\"wp-image-16549\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png\" sizes=\"(max-width: 755px) 100vw, 755px\" 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\" alt=\"\" \/><\/figure>\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<ul>\n<li>Click on\u00a0<strong>Upload Plugin<\/strong><\/li>\n<li>then choose \u00a0\u201c<strong>AMP Theme Framework<\/strong>\u201d Extension from which you already downloaded.<\/li>\n<li>After that, click on\u00a0<strong>Install Now<\/strong><\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16616\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/7-5.png\" alt=\"\" width=\"911\" height=\"318\" 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><\/p>\n<p><strong>Step 3 \u2013<\/strong>\u00a0After Uploading the plugin, Click on\u00a0<strong>Activate Plugin. <\/strong>The AMP Theme Framework will be visible on the AMP version of your site.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16618\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/8-2.png\" alt=\"\" width=\"684\" height=\"214\" 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><\/p>\n<p><strong>Step 4 &#8211;<\/strong> Now you need to select <strong>AMP Theme Framework<\/strong> option. You will find this option in the <strong>WordPress Dashboard<\/strong>\u00a0-&gt;\u00a0<strong>AMP option panel<\/strong>\u00a0-&gt;\u00a0<strong>Design<\/strong>\u00a0-&gt;\u00a0<strong>Themes<\/strong>\u00a0-&gt; Select\u00a0<strong>AMP Theme Framework<\/strong> option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button see the below screenshot.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16620\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/9-4.png\" alt=\"\" width=\"1230\" height=\"595\" 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><\/p>\n<p>When you select the theme from this dropdown and save it then it will start working.<\/p>\n<h3>How to Create Custom AMP Theme Framework<\/h3>\n<p><strong>Step 1 &#8211;<\/strong> If you want to create Cutom AMP theme Framework then you need to <strong>WordPress Dashboard<\/strong> -&gt; Click on the \u00a0<strong>Plugins -&gt; <\/strong><strong>Plugin Editor<\/strong> -&gt; \u00a0On 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 a <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<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16627\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/11-3.png\" alt=\"\" width=\"1345\" height=\"761\" 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><\/p>\n<p><strong>Step 2<\/strong> &#8211; Now you need to select &#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>\u00a0-&gt;\u00a0<strong>AMP option panel<\/strong>\u00a0-&gt;\u00a0<strong>Design<\/strong>\u00a0-&gt;\u00a0<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<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16631\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/12-3.png\" alt=\"\" width=\"1277\" height=\"594\" 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><\/p>\n<h4>The Output of the Custom AMP Theme Framework<\/h4>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-16633\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/13-3.png\" alt=\"\" width=\"1349\" height=\"657\" 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><\/p>\n<h4 id=\"to-make-it-easy-we-have-created-a-video-tutorial\">To make it easy, we have created a video tutorial<\/h4>\n<p><iframe loading=\"lazy\" title=\"How to Install &amp; Activate AMP Theme Framework for creating Custom Themes\" width=\"643\" height=\"482\" src=\"https:\/\/www.youtube.com\/embed\/0pplhwghMgY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\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>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 AMP Theme Framework\u00a0on your Desktop follow the below-given steps. Step 1 \u2013\u00a0Go to\u00a0Plugins\u00a0-&gt;\u00a0Add New\u00a0then click on\u00a0Upload Plugin. Step 2 \u2013 AMP Theme Framework is&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[81],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4009"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=4009"}],"version-history":[{"count":16,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4009\/revisions"}],"predecessor-version":[{"id":16638,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4009\/revisions\/16638"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=4009"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=4009"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=4009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}