{"id":7684,"date":"2019-04-22T12:07:37","date_gmt":"2019-04-22T12:07:37","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=7684"},"modified":"2019-12-19T12:29:01","modified_gmt":"2019-12-19T12:29:01","slug":"how-to-create-a-custom-front-page-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-create-a-custom-front-page-in-amp\/","title":{"rendered":"How to create a custom front page in AMP"},"content":{"rendered":"\n<p><strong>Here is the step to create a custom front page in AMP:<\/strong><\/p>\n\n\n\n<ol><li>First go to <strong>WordPress Admin area <\/strong>-&gt; <strong>AMP option panel <\/strong>-&gt;<strong>Settings <\/strong>-&gt; click on<strong> General.<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"389\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-1024x389.png\" alt=\"\" class=\"wp-image-7695\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-1024x389.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-300x114.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-768x292.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111-100x38.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/custom-front-pages-111.png 1316w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>2. Custom Front Page:<\/strong> If you want to Display a Static Front Page on your AMP Website, you can enable FrontPage option. It will Set Custom FrontPage as Homepage <\/p>\n\n\n\n<p><strong>3. Select Page as FrontPage:<\/strong> When you enable Custom AMP front page, make sure you select a Page from the drop-down menu to use it as Static FrontPage.<\/p>\n\n\n\n<p><strong>4. Title on Static Front Page:<\/strong> If you want to Display the title of Static FrontPage you can enable this option.<\/p>\n\n\n\n<p><strong>5.<\/strong> After that click on the &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/p>\n\n\n\n<h4>The Output of the custom front page in AMP:<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"465\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-1024x465.png\" alt=\"\" class=\"wp-image-7707\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-1024x465.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-300x136.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-768x349.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2-100x45.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/output-2.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/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>Here is the step to create a custom front page in AMP: First go to WordPress Admin area -&gt; AMP option panel -&gt;Settings -&gt; click on General. 2. Custom Front Page: If you want to Display a Static Front Page on your AMP Website, you can enable FrontPage option. It&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7684"}],"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=7684"}],"version-history":[{"count":18,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7684\/revisions"}],"predecessor-version":[{"id":15507,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7684\/revisions\/15507"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7684"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=7684"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=7684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}