If we look at the bottom of the site, then we will see that there are several blocks with links on the left side of it (Links to Important Stuff), I think it will be right to continue to deal with them.

First, let's create 4 menu in admin panel Appearance -> Menu (Appearance -> Menu).

After creating four menus, you need to fill each menu with links, which are currently in the template. Never leave a site empty, always populate it with test data.

Filling the menu, do everything in order:

1. Choose the type of content link (link);
2. In field URL add a lattice, using the grid, you can fill the href attribute of the link, but the link itself will not lead anywhere. In field Link text (Link text) you need to enter link text (anchor);
3. After filling in the URL and link text, click on the button Add to menu (Add to Menu);
4. When all the necessary items appear in the right part of the workspace, click save menu (Save menu).

Add items yourself and continue.

To display the menu, we need to make the menu insertion area, these areas are created in the functions.php file.

After registering areas for the menu, you need to select the desired menu in the admin panel and specify the desired placement area.

To the selected menu, you must specify the area of ​​placement [1] and save [2].

Output of the created menu in the template

To display a menu in WordPress, we need a function wp_nav_menu() which we insert into content-bottom.php as shown below.

More about the wp_nav_menu function() I advise you to read official website.

If you did everything right, then your template will show the menu, created in admin panel. To check, you can change the order of menu items in the admin panel and see the result on the site.

Minor modifications to the template

In file content-top.php add the name of the site using the function

Full header code

We display the menu in the header of the site

In the functions.php file, add an area for displaying the menu, the modified code will look like this.

Create a new menu in the admin panel called “Header menu” and add items from our template to it, determine the location of the menu and remember to save the menu after setting.

In the content-top.php file, we create a function to display the top menu. Since our layout has a non-standard structure (without ul and li tags), then we need to slightly modify the wp_nav_menu function().

Let's analyze the resulting code in order:

1. The $args array holds all the attributes of the function.
   1. theme_location - theme placement area, discussed above;
   2. ‘menu_id’ => ‘nav’ – adds id = “nav” to the menu wrapper, in our case, the wrapper is a tag <nav id=”nav”></nav>.
   3. ‘echo’ => false, - default wp_nav_menu function() generates a menu and displays it on the screen, when set to false, the function will not output data and the generated menu can be saved to a variable, in our case the variable $header_menu.
   4. ‘items_wrap’ => ‘<nav id=”%1$s” class=”%2$s”>%3$s</nav>’ - generates a menu wrapper template.
2. In a variable $header_menu the generated menu is saved in which there is still an extra tag <li>, we need to remove it.
3. Construction echo strip_tags($header_menu, ‘<a><nav>’) removes all unnecessary tags, other than those in quotes.

After these manipulations, our menu should appear in the form, in which it was originally in the layout and it will not contain any <ul> and <li>.

Although we have analyzed this example, but it would be better to fix the layout of the site, than to do such manipulations.

How to enable the admin bar on the site

For convenience, WordPress has a special admin bar on the user side.. To enable the admin bar, needed in footer.php file, before the closing tag </body> enter function <?php wp_footer(); ?>

My Theme Source Files

All for today, In the next tutorial, we will look at how to make navigation in WordPress without additional plugins., because when developing premium themes, you need to use as few plugins as possible.