{"id":3529,"date":"2017-09-09T09:20:21","date_gmt":"2017-09-09T09:20:21","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3529"},"modified":"2019-06-10T07:35:07","modified_gmt":"2019-06-10T07:35:07","slug":"how-to-add-menu-in-amp-theme-framework","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-menu-in-amp-theme-framework\/","title":{"rendered":"How to add Menu in AMP Theme Framework"},"content":{"rendered":"<p>This article is for&nbsp;<a href=\"https:\/\/ampforwp.com\/amp-theme-framework\/\">AMP Theme Framework<\/a>&nbsp;users.<\/p>\n<h3>About this Component<\/h3>\n<p>Menu Component is for setting the Menu in your AMP theme.<\/p>\n<h3>How to use:<\/h3>\n<p>Following are the steps to use this component.<\/p>\n<p><strong>Step 1:<\/strong><\/p>\n<p>To initiate the support for the component in your theme just add the following code to the functions.php of the theme files.<\/p>\n<pre class=\"lang:default decode:true\">\/\/Menu\nadd_amp_theme_support('AMP-menu');<\/pre>\n<p>This was the back-end part where we&#8217;ve just initiated, now to make it appear in the front-end follow the next step.<\/p>\n<p><strong>Step 2:<\/strong><\/p>\n<p>To add the <span style=\"background-color: #f6d5d9;\"><b>Menu<\/b><\/span>&nbsp;we need to call it where we wanted to set it.<br \/>\nexample: add the following code in header.php of the theme files.<\/p>\n<pre class=\"lang:default decode:true\">&lt;?php amp_menu(); ?&gt;<\/pre>\n<p>with this, you&#8217;re successfully able to set&nbsp;<strong>Menu<\/strong>&nbsp;on your theme.<\/p>\n<div>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<\/div>\n<div>\n<div class=\"hkb-article__content\">\n<div class=\"hkb-article__content\">\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>\n<\/div>\n<\/div>\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>This article is for&nbsp;AMP Theme Framework&nbsp;users. About this Component Menu Component is for setting the Menu in your AMP theme. How to use: Following are the steps to use this component. Step 1: To initiate the support for the component in your theme just add the following code to the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[81],"ht-kb-tag":[82],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3529"}],"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=3529"}],"version-history":[{"count":5,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3529\/revisions"}],"predecessor-version":[{"id":10890,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3529\/revisions\/10890"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3529"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3529"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}