Day 6- How to add a nav bar in WordPress? (In a dynamic or static way)

Day 6- How to add a nav bar in WordPress? (In a dynamic or static way)

Welcome to my day 6 of ruthlessly learning custom WordPress!

1) Dynamic way:-

Check the code below in functions.php file:-

function university_features() {
    //add all sorts of default wp functions
    add_theme_support('title-tag');
    //to add dynamic menu option in wordpress. First argument is variable. Second argument gives the name on menu settings
    register_nav_menu('headerMenuLocation', 'Header Menu Location');
    register_nav_menu('footerMenuLocationOne', 'Footer Menu Location One');
    register_nav_menu('footerMenuLocationTwo', 'Footer Menu Location Two');
}

add_action('after_setup_theme', 'university_features');

As you can see above that we are using register_nav_menu() which takes 2 arguments.
1st argument - Variable name you want to give for the menu
2nd argument - Name of the menu type to show

As you can see below on the nav menu settings on the WordPress dashboard, the menu names of register_nav_menu() are showing.

image.png

To use the menu on the header we then use wp_nav_menu(); function which takes array as an argument to add the menu variable name which you set in function.php file.
Something like this:-

<nav class="main-navigation">
          <?php 
          wp_nav_menu(array(
            'theme_location' => 'headerMenuLocation' //menu variable
          )); 
          ?>
          </nav>

Now as we add a menu in the header like this:-

image.png

We see something like this on the nav bar:-

image.png

The same we can do on the footer too.

Now, you may want to use this only if you are trying to sell the theme and want users to add a nav menu on their own. Else, keep it static.

2) Static way to highlight menu name:-
Now, in a dynamic way the menu items are automatically highlighted by WordPress function when you are on the current page like this:-

image.png

But if you want to use a static way to highlight, use the following code to highlight menu in manual way:-

<li <?php if(is_page('about-us') or wp_get_post_parent_id(0) == 16) echo 'class="current-menu-item"' ?>>
              <a href="<?php echo site_url('/about-us') ?>">About Us</a></li>

Here, is_page('about-us') function is checking if the current page is About Us or wp_get_post_parent_id(0) == 16 is checking if the current page is a child page of About Us, since About Us has page ID=16.

You can check the page ID when you edit any page on WordPress like this:-

image.png

That's it for today. See you on day 7!