Wordpress/How to Create a Simple and Dynamic Navigation Menu in WordPress at master · amit-kumar-dev/Wordpress · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/
=====================================================================
How to Add Custom Navigation Menus in WordPress Themes

Creating Custom Navigation Menus in WordPress Themes
To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

============================= Or ===========================================

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

You will need to add this code in your theme’s template file where you want to display your menu.


<?php
wp_nav_menu( array(
    'theme_location' => 'my-custom-menu',
    'container_class' => 'custom-menu-class' ) );
?>


You can use the CSS class .custom_menu_class to style your menu by adding custom CSS code. Here is a sample CSS to help you get started:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
}

div.custom-menu-class a {
    color:#000;
}


===========================================================================================================================================
===========================================================================================================================================

Step 1: Register Custom Navigation Menu

Which Files Will Be Needed for Modification?
functions.php – To register the menu
template file – To display the menu

register_nav_menu('primary-header-menu',__( 'Header Menu' ));

in this example, we are registering the primary header menu. We can also register multiple menus at a time.

register_nav_menus(array(
    'primary' => __('Primary Menu', 'My_First_WordPress_Theme'),
    'secondary' => __('Secondary Menu',       'My_First_WordPress_Theme'),
    'My_custome_menu' => __('finally Menu', 'My_First_WordPress_Theme')
));

Step 2: Display the Custom Navigation Menu

We can display a custom navigation menu the menu in footer than we will need to override the footer.php

wp_nav_menu( array( 'theme_location' => 'primary' ) );

Step 3: Style the Custom Navigation Menu
If we want a specific look for the website we can style the navigation menu by referencing custom CSS classes in the wp_nav_menu function call in the previous step.

wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'my_css_class' ) );