Displaying a menu using the wp_nav_menu function. Navigation bars using CSS. More details about registration and menu display in the template
Register and display a custom menu created in the panel: « Appearance> Menu (Appearance > Menus).
Registering the menu
Add_action("after_setup_theme", function())( register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)) ; ));
The second option for registering the menu (I don’t know how correct it is, so it’s better to use the first option)
If (function_exists("register_nav_menu")) ( register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)) ; )
Displaying the menu
Second menu option
"menu-header", "theme_location" => "primary")); ?>
More details about registration and menu display in the template
Usage
wp_nav_menu(array("theme_location" => "" // (string) The location of the menu in the template. (indicates the key with which the menu was registered in the function "menu" => "", // (string) The name of the displayed menu (indicated in the admin panel when creating a menu, priority is given to specified location theme_location - if specified, the theme_location parameter is ignored) "container" => "div", // (string) Menu container. Wrapper ul. The container tag is specified (by default in the div tag) "container_class" => "", // (string) class of the container ( div tag) "container_id" => "", // (string) id of the container (div tag) "menu_class" => "menu", // (string) class of the menu itself (ul tag) "menu_id" => "", / / (string) id of the menu itself (ul tag) "echo" => true, // (boolean) Display or return for processing "fallback_cb" => "wp_page_menu", // (string) Used (backup) function, if menu does not exist (could not get) "before" => "", // (string) Text before each link "after" => "", // (string) Text after each link "link_before" => "", // (string) Text before the anchor (text) of the link "link_after" => "", // (string) Text after the anchor (text) of the link "items_wrap" => "", "depth" => 0, // (integer) Nesting depth (0 - unlimited, 2 - two-level menu) "walker" => "" // (object) Class that collects menus. Default: new Walker_Nav_Menu));
$args Parameter Arguments
theme_location(string)
ID of the menu location in the template. Identifier specified when registering a menu using the register_nav_menu() function.
Default: ""
menu(string)
The menu that needs to be displayed. Match: id, slug or menu name.
Default: ""
container(string)
How to wrap the ul tag. Acceptable: div or nav.
If you don’t need to wrap it with anything, then write false: container => false.
Default: div
container_class(string)
The value of the class attribute of the menu container.
Default: menu-(menu slug)-container
container_id(string)
The value of the id attribute of the menu container.
Default: ""
menu_class(string)
The value of the class attribute of the ul tag.
Default: menu
menu_id(string)
The value of the id attribute of the ul tag.
Default: menu slug
echo(boolean)
Print to screen (true) or return for processing (false).
Default: true
fallback_cb(string)
A function to process the output if no menu is found.
Passes all $args to the function specified here.
Set the empty string to '__return_empty_string' to display nothing if there is no menu.
Default: wp_page_menu
before(string)
Text before tag on the menu.
Default: ""
after(string)
Text after each tag in the menu.
Default: ""
link_before(string)
The text before the anchor of each link in the menu.
Default: ""
link_after(string)
Text after the anchor of each link in the menu.
Default: ""
items_wrap(string)
Do I need to wrap elements in a ul tag? If necessary, a wrapper template is specified.
Default: ""
depth(number)
How many levels of nested links to show. 0 - all levels.
walker(object)
The class that will be used to build the menu. You need to specify an object, not a string, for example new My_Menu_Walker(). Default: Walker_Nav_Menu(). See below for how to use...
Default: Walker_Nav_Menu
item_spacing(string)
Whether or not to leave line breaks in the HTML menu code. Could be: preserve or discard
Default: "preserve"
Example
Show menu only if it exists
By default, if there is no menu, the site pages will be displayed instead. But if you need to display the menu only when it is created in the admin panel, specify the fallback_cb parameter as "__return_empty_string" :
Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));
Hello, today we’ll talk again about creating a menu (vertical and horizontal) in wordpress through the control panel, as well as how to display it anywhere on your site using the wp_nav_menu function, everything will be much easier than my previously written guides on creating menus .
You can download the sources for the article below
The below guide is based on my previous article -
However, here we will do everything simpler (we will not touch the functions.php file or use scripts to make the menu drop-down), namely, we will learn how to make a vertical menu or a horizontal non-drop-down menu.
Let's get started!
1. Go to the WordPress site control panel, in the left menu select the “Appearance” item and its sub-item “Menu”.
Here we create the menu we need.
For example, let’s create a menu from categories, but not from all of them, but only those that we need and call this menu “rubrici”, this is how it will look:
2. To display the menu in WordPress we will use the following function:
Everything is simple, in the above code, instead of “menu name” you substitute the name of the menu you created and paste the code anywhere on your site.
For the menu created in our example, this function will look like this:
3. Insert the menu in the desired place on our website.
Let's, for example, insert our “rubrici” menu into the header, at the very top.
For example, let’s take the standard WordPress theme – Twenty Twelve.
To do this, in the WordPress control panel, go to the “Header View” item and its sub-item “Editor”, select header.php in the list of templates on the right.
In its code we find the opening body tag, and immediately after it there is a tag that opens the “page” block - after it we will insert the output of our “rubrici” menu using the function – wp_nav_menu:
...
>Save the changes and go to your website, see what we got:
As you can see, we get a vertical menu, and this is good if you need a vertical menu, however, let’s say that we need a horizontal menu, then we need to specify design styles for our menu – “rubrici”.
4. We write menu styles.
To begin with, let’s wrap the function for displaying our menu in a new block, for example “menu2”, in order to assign design styles for it.
That is, the code in the header.php file (path 3 of this guide) will look like this:
...
>The next step we need to do is to specify design styles for our new block (“menu2”), which contains our new menu (“rubrici”).
And to do this, in the WordPress control panel, in the left menu, select the “Appearance” item, then its sub-item “Editor”, and on the right among the templates select the file - style.css.
Go to the very bottom of the code and insert the following fragment:
#menu2 ( padding: 0 0 0 20px; margin: 0; ) #menu2 li ( float: left; list-style: none; font: 12px Tahoma, Arial; ) #menu2 li a ( display: block; background: #20548E ; padding: 5px 12px; border-right: 1px solid white; color: #EAFFED; white-space: nowrap; menu2 li ul ( margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; )
Then we go to the site and see what we got:
As you can see, our menu has turned from vertical to horizontal, all that remains is to adjust the design styles to suit your site.
For example, in this example, we need to stretch each menu item in width - the attribute is responsible for this:
Width: 70px;
I change it to:
Width: 170px;
After which my menu will look like this:
Navigation is present on any good website, even if it is a one-page one. Depending on the situation, navigation links can lead to various sections of the site or send to a bookmark (anchor) located on the current page. Competently designing navigation in which the user does not get confused requires certain knowledge and experience. Navigation bar design also needs to be done wisely, and in this tutorial we'll show you how to create a user-friendly navigation menu.
Creating Navigation
What is navigation? This is a collection of links, often ordered and grouped by meaning. A navigation menu is often created using an HTML list tag
- , where at each point
- contains one link . In HTML5, a separate tag was introduced for navigation
