{"id":3564,"date":"2017-09-09T12:34:21","date_gmt":"2017-09-09T12:34:21","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3564"},"modified":"2019-07-02T10:23:51","modified_gmt":"2019-07-02T10:23:51","slug":"activate-amp-theme-framework","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/activate-amp-theme-framework\/","title":{"rendered":"How to Activate the AMP Theme Framework"},"content":{"rendered":"<p><strong>Follow these step to Activate the AMP Theme Framework<\/strong><\/p>\n<ul>\n<li>Download and Install <a href=\"https:\/\/ampforwp.com\/amp-theme-framework\/\">AMP Theme Framework<\/a><\/li>\n<li>Upload and Activate<\/li>\n<li>Done! The AMP Theme Framework will be visible on the AMP version of your site.<\/li>\n<\/ul>\n<p>The themes on AMP are detected from the plugin header which has a specific attribute.<\/p>\n<p><strong>For example in <a href=\"https:\/\/github.com\/ahmedkaludi\/amp-theme-framework\/blob\/master\/amp-theme.php\" target=\"_blank\" rel=\"noopener noreferrer\">amp-theme.php<\/a> we have:<\/strong><\/p>\n<pre class=\"lang:default mark:9 decode:true\" title=\"AMP Theme Header\">\/*\nPlugin Name: AMP Theme Framework\nPlugin URI: https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\nDescription: Create AMP Themes easily with help of AMP Framework\nVersion: 1.0\nAuthor: AMPforWP Team\nAuthor URI: http:\/\/ampforwp.com\/amp-theme-framework\nLicense: GPL2\nAMP: AMP Theme Framework\n*\/\n<\/pre>\n<p>In the above code, you can see the line <strong>number 9 <\/strong>which mentions the name of the AMP theme, this is <em><strong><em>required<\/em>\u00a0<\/strong><\/em>if you are creating an AMP Theme.<\/p>\n<p>When you add this line, then AMPforWP will automatically detect it as a theme and display it in the Dropdown menu of the design selector.<\/p>\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Themes<\/strong> -&gt; Select <strong>AMP Theme Framework<\/strong> option see the below screenshot.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11237\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1.png\" alt=\"\" width=\"1356\" height=\"466\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1.png 1356w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-300x103.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-768x264.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-1024x352.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-60x21.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/AMP-theme-framework-1-100x34.png 100w\" sizes=\"(max-width: 1356px) 100vw, 1356px\" \/><\/a><\/p>\n<p>When you select the theme from this dropdown and save it then it will start working.<\/p>\n<p>From here, You can either Go to <strong><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/theme-structure-hierarchy\/\">Template Structure<\/a><\/strong> or Have a look at <strong><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/components-amp-theme-framework\/\">Components<\/a><\/strong>.<\/p>\n<h4>To make it easy, we have created a video tutorial<\/h4>\n<div style=\"width: 643px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-3564-1\" width=\"643\" height=\"325\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/2-AMp-theme-framework.mp4?_=1\" \/><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/2-AMp-theme-framework.mp4\">https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/2-AMp-theme-framework.mp4<\/a><\/video><\/div>\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>Follow these step to Activate the AMP Theme Framework Download and Install AMP Theme Framework Upload and Activate Done! The AMP Theme Framework will be visible on the AMP version of your site. The themes on AMP are detected from the plugin header which has a specific attribute. For example&#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\/3564"}],"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=3564"}],"version-history":[{"count":17,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3564\/revisions"}],"predecessor-version":[{"id":16981,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3564\/revisions\/16981"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3564"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3564"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}