{"id":15132,"date":"2020-06-19T16:53:18","date_gmt":"2020-06-19T16:53:18","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=15132"},"modified":"2020-06-19T16:53:22","modified_gmt":"2020-06-19T16:53:22","slug":"how-to-display-navigation-menus-of-our-custom-theme-in-wordpress-part-8","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-display-navigation-menus-of-our-custom-theme-in-wordpress-part-8\/","title":{"rendered":"How to Display Navigation Menus of our Custom Theme in WordPress? Part-8"},"content":{"rendered":"\n

How to Display Navigation Menus of our Custom Theme in WordPress?<\/p>\n\n\n\n

In blog Part-7<\/a><\/strong>, we have seen how to register Navigation Menus<\/strong> of our Custom Theme. We have to create pages to make menus.<\/p>\n\n\n\n

Step 1:-<\/strong> Go<\/strong> to Dashboard->Pages->Add New<\/strong> Page. Name the <\/strong>first menu as Home<\/strong> page, second About<\/strong> page, third Menu<\/strong> page, forth Specials<\/strong> page, fifth Events<\/strong> page, sixth Gellary<\/strong> page, seventh Chefs<\/strong> page, eighth Contact page, ninth Book a Table<\/strong> page. Click<\/strong> Publish.<\/p>\n\n\n\n

\"\"
Example of Home Page<\/figcaption><\/figure>\n\n\n\n

Step 2:-Go<\/strong> to Appearance->Menus<\/strong>–>Pages<\/strong> Check<\/strong> menu items boxes<\/em><\/strong> which are created and Click<\/strong> Add to Menu<\/strong><\/em>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Menu Structure<\/span><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3:<\/strong>– Rearrange<\/strong> menus name according to your needs by dragging its. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4:<\/strong>– To Display Location Checkbox<\/strong> of Primary Menu<\/strong> and Click<\/strong> Save Menu.<\/em><\/strong><\/p>\n\n\n\n

Step 5:-<\/strong> Go<\/strong> to index.php<\/strong> file of customtheme<\/strong> folder and delete<\/strong> the given nav-menu<\/strong> to see your created new nav-menu.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
wp_nav_menu(array<\/span>(\n'menu'<\/span> =>'primary-menu'<\/span>, \/\/id of Primary Menu<\/span>\n'container'<\/span> => ''<\/span>,\n'items_wrap'<\/span> =>'<ul class=\"nav navbar-nav navbar-right headerMenu\">%3$s<\/ul>'<\/span>\n));\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 7:-<\/strong> Put this wp_nav_menu( array<\/em> $args = array() )<\/strong> method in nav-menu section<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 8:-<\/strong> Refresh<\/strong> the custom theme site<\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Thanks<\/p>\n","protected":false},"excerpt":{"rendered":"
How to Display Navigation Menus of our Custom Theme in WordPress? In blog Part-7, we have seen how to register Navigation Menus of our Custom Theme. We have to create… <\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5150],"tags":[],"class_list":["post-15132","post","type-post","status-publish","format-standard","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=15132"}],"version-history":[{"count":5,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15132\/revisions"}],"predecessor-version":[{"id":15190,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15132\/revisions\/15190"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=15132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=15132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=15132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Step 6:<\/strong>– To display <\/strong>nav-menu, use pre-defined wp_nav_menu( array<\/em> $args = array() )<\/strong> method in WordPress. To more details of this method, visit https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu<\/em><\/strong>\/<\/a>.<\/p>\n\n\n