{"id":215,"date":"2020-06-29T12:25:32","date_gmt":"2020-06-29T12:25:32","guid":{"rendered":"https:\/\/codexjunction.com\/?p=215"},"modified":"2023-10-29T16:17:00","modified_gmt":"2023-10-29T16:17:00","slug":"add-custom-navigation-menu-to-wordpress-theme","status":"publish","type":"post","link":"https:\/\/codexjunction.com\/add-custom-navigation-menu-to-wordpress-theme\/","title":{"rendered":"Add Custom Navigation Menu to WordPress Theme"},"content":{"rendered":"

To add a custom navigation menu to a WordPress theme through code, you can follow these steps:<\/p>\n

    \n
  1. Register your menu location.<\/strong>\u00a0This is done by adding the following code to your theme’s\u00a0functions.php<\/code>\u00a0file:<\/li>\n<\/ol>\n
    \n
    PHP<\/div>\n
    function<\/span> my_custom_menu<\/span>() <\/span>{\r\n  register_nav_menu('my-custom-menu'<\/span>, 'My Custom Menu'<\/span>);\r\n}\r\nadd_action('init'<\/span>, 'my_custom_menu'<\/span>);\r\n<\/code><\/pre>\n<\/div>\n
    This will register a new menu location called my-custom-menu<\/code>. You can change the name of the menu location to anything you want.<\/p>\n
      \n
    1. \n
      Create your menu.<\/strong> Go to Appearance<\/strong> > Menus<\/strong> in your WordPress<\/a> dashboard and click the Create New Menu<\/strong> button. Enter a name for your menu and click Create Menu<\/strong>.<\/p>\n<\/li>\n
    2. \n
      Add menu items to your menu.<\/strong> You can add pages, posts, categories, and other links to your menu. To add an item, click the Add Items<\/strong> button and select the type of item you want to add.<\/p>\n<\/li>\n
    3. \n
      Arrange your menu items.<\/strong> Once you have added all of your menu items, you can arrange them in the order that you want them to appear. To do this, drag and drop the items into the desired order.<\/p>\n<\/li>\n
    4. \n
      Assign your menu to the menu location.<\/strong> Click the Save Menu<\/strong> button. Then, click the Manage Locations<\/strong> tab and select the my-custom-menu<\/code> location from the dropdown menu. Click Save Changes<\/strong>.<\/p>\n<\/li>\n
    5. \n
      Add the menu code to your theme template file.<\/strong> Open the template file where you want your menu to appear and add the following code:<\/p>\n<\/li>\n<\/ol>\n
      \n
      PHP<\/div>\n
      <?php<\/span> wp_nav_menu( array<\/span>( 'theme_location'<\/span> => 'my-custom-menu'<\/span> ) ); ?><\/span><\/code><\/pre>\n<\/div>\n
      Replace my-custom-menu<\/code> with the name of the menu location that you registered in step 1.<\/p>\n
        \n
      1. Save your theme template file and upload it to your WordPress site.<\/strong><\/li>\n<\/ol>\n
        Once you have completed these steps, your custom navigation menu will appear in your theme template file.<\/p>\n
        Example:<\/strong><\/p>\n
        To add a custom navigation menu to your theme’s header, you would add the following code to the header.php<\/code> file:<\/p>\n
        \n
        PHP<\/div>\n
        <?php<\/span> wp_nav_menu( array<\/span>( 'theme_location'<\/span> => 'my-custom-menu'<\/span> ) ); ?><\/span>\r\n<\/code><\/pre>\n<\/div>\n
        Assuming that you have registered a menu location called my-custom-menu<\/code> and created a menu called “My Custom Menu”, this code will display that menu in your theme’s header.<\/p>\n
        Additional tips:<\/strong><\/p>\n